Asp.net mvc 4 用于局部视图的不引人注目的Ajax表单

我在使用不引人注目的ajax发布来自联系我们表单的数据时遇到问题

我的部分观点是这样的：

@model site.ViewModel.Home.ContactUsViewModel 

@using (Ajax.BeginForm("_ContactUsPartial", "Home", 
                       new AjaxOptions { UpdateTargetId = "result" }))
        {
            <fieldset>
                <legend>Contact Us</legend>
                @Html.ValidationSummary(true)
                <div id="result"></div>
                <div class="editor-label">
                 @Html.LabelFor(m => m.FullName)
                 @Html.ValidationMessageFor(m => m.FullName)</div>
                <div class="editor-field">@Html.TextBoxFor(m => m.FullName)</div>
                <!-- other fields from model -->
                <input type="submit" value="Submit"/>
            </fieldset>
        }

@Html.Partial("_ContactUsPartial", new ContactUsViewModel());

[HttpPost]
public ActionResult _ContactUsPartial(ContactUsViewModel viewModel)
{
    if (ModelState.IsValid)
    {
       try
       {
           //send email
           return Content("Thanks for your message!");
       }
       catch (Exception ex)
       {
          return Content("Problem sending the email.");
       }
    }

            return Content("oops. invalid model");
}

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

我的家庭控制器如下所示：

@model site.ViewModel.Home.ContactUsViewModel 

@using (Ajax.BeginForm("_ContactUsPartial", "Home", 
                       new AjaxOptions { UpdateTargetId = "result" }))
        {
            <fieldset>
                <legend>Contact Us</legend>
                @Html.ValidationSummary(true)
                <div id="result"></div>
                <div class="editor-label">
                 @Html.LabelFor(m => m.FullName)
                 @Html.ValidationMessageFor(m => m.FullName)</div>
                <div class="editor-field">@Html.TextBoxFor(m => m.FullName)</div>
                <!-- other fields from model -->
                <input type="submit" value="Submit"/>
            </fieldset>
        }

@Html.Partial("_ContactUsPartial", new ContactUsViewModel());

[HttpPost]
public ActionResult _ContactUsPartial(ContactUsViewModel viewModel)
{
    if (ModelState.IsValid)
    {
       try
       {
           //send email
           return Content("Thanks for your message!");
       }
       catch (Exception ex)
       {
          return Content("Problem sending the email.");
       }
    }

            return Content("oops. invalid model");
}

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

我期望发生的是，当我按下submit时，控制器将返回一些文本内容，这些文本内容将放置在id为“result”的div中

实际发生的情况是，当我按submit时，我被重定向到/Home/\u contacts partial，其中只显示文本内容

我不明白这里发生了什么……我试着在网上看看例子，却发现自己在这个洞里挖得更深

我的Web.config中确实启用了不引人注目的javascript，我还引用了jquery.unobtrusive-ajax.min.js

在我的脚本文件夹中，我有以下可能相关的内容：

• jquery.unobtrusive-ajax.min.js
• jquery.validate.unobtrusive.min.js
• MicrosoftMvcAjax.js

在my_Layout.cshtml标记中，我声明了以下内容：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>

RegisterBundles如下所示：

@model site.ViewModel.Home.ContactUsViewModel 

@using (Ajax.BeginForm("_ContactUsPartial", "Home", 
                       new AjaxOptions { UpdateTargetId = "result" }))
        {
            <fieldset>
                <legend>Contact Us</legend>
                @Html.ValidationSummary(true)
                <div id="result"></div>
                <div class="editor-label">
                 @Html.LabelFor(m => m.FullName)
                 @Html.ValidationMessageFor(m => m.FullName)</div>
                <div class="editor-field">@Html.TextBoxFor(m => m.FullName)</div>
                <!-- other fields from model -->
                <input type="submit" value="Submit"/>
            </fieldset>
        }

@Html.Partial("_ContactUsPartial", new ContactUsViewModel());

[HttpPost]
public ActionResult _ContactUsPartial(ContactUsViewModel viewModel)
{
    if (ModelState.IsValid)
    {
       try
       {
           //send email
           return Content("Thanks for your message!");
       }
       catch (Exception ex)
       {
          return Content("Problem sending the email.");
       }
    }

            return Content("oops. invalid model");
}

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

不确定捆绑包的功能和工作方式，因为我似乎已将其配置为通过此ScriptBundle将其引入……但我还将它们手动配置在_Layout.cshtml的头部

---

知道我做错了什么吗？我真的很感谢你的帮助

我终于明白了！！！！在浪费了几个小时的时间之后

原来这是一个配置问题…但不完全是我所期望的

我使用的是jQuery 1.9.1，我认为是Microsoft.jQuery.Unobtrusive.Ajax 2.0.30116.0的最新版本。然而，有一个问题。。。我仍然使用不推荐的live方法而不是on方法的jquery不引人注目的ajax js文件。。。。即使执行更新包也无法正确更新文件

直到我看到这篇文章，我才检查了我的文件，发现它是一个旧版本

起初，我使用jQuery.Migrate nuget包重新启用live方法……但我发现更好的解决方案是卸载或删除现有文件，然后使用nuget重新安装Microsoft.jQuery.Unobtrusive.Ajax包

---

这解决了问题，现在它的工作完全符合预期

好的，这看起来像是一个没有正确设置的问题。您是否已确保从项目中删除了

Microsoft.Unobtrusive

库？我曾多次遇到这个问题，结果是库和依赖项问题。@Nomad101不，我没有这样做…不100%确定如何解决…您是否在visual studio中使用Nuget？还是别的什么？您是否也在实施与项目的捆绑？@Nomad101我正在使用Nuget…但在我开始使用它之前，在我当前的项目中，有些东西是在没有Nuget的情况下添加的。请转到“已安装”并搜索microsoft jquery unobtrusive ajax和验证，然后卸载它们，如果需要，您可以轻松还原它们。但是，这些microsoft库会与jquery库发生冲突，而且microsoft库现在也贬值了。这正是我所需要的。在Package Manager控制台中运行安装包Microsoft.jQuery.Unobtrusive.Ajax，将JS文件添加到我的脚本包中，我重新开始工作。