用于局部视图的不显眼的Ajax表单

Question

我在使用不显眼的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");
}

我期待发生的是,当我按下提交时,控制器将返回一些文本内容,这些内容将被放置在id为"result"的div中.

实际发生的是当我按下提交时,我被重定向到/ Home/_ContactUsPartial,文本内容是唯一显示的内容.

我不明白这里发生了什么...我试图在网上看一下例子,发现自己正在深入挖掘这个漏洞.

我在我的Web.config中启用了不显眼的javascript,并且我还引用了jquery.unobtrusive-ajax.min.js.

在我的Scripts文件夹中,我有以下可能相关:

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

在我的_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>

在我的Global.asax.cs Application_Start中我有这一行:

BundleConfig.RegisterBundles(BundleTable.Bundles);

RegisterBundles看起来像这样:

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的头部手动配置它们....

知道我做错了什么吗？我真的很感激这方面的一些帮助!

Answer 1

我终于明白了!!!! 经过几个小时的浪费时间!

原来这是一个配置问题......但不完全是我的预期.

我正在使用jQuery 1.9.1以及我认为最新版本的Microsoft.jQuery.Unobtrusive.Ajax版本2.0.30116.0.但是,有一个问题... jquery不显眼的ajax js文件,我仍然使用不推荐的实时方法而不是on方法....即使做一个更新包也没有正确更新文件.

直到我看到这篇文章ASP.NET MVC 4:无法修改jQuery Unobtrusive Ajax,我检查了我的文件,发现它是一个旧版本.

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

这解决了问题,现在它完全按预期工作!