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

时间:2013-05-04 02:45:48

标签: asp.net-mvc-4 partial-views ajaxform unobtrusive-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");
}

我期待发生的事情是,当我按下提交时,控制器将返回一些文本内容,这些内容将被放置在ID为&#34;结果&#34;的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 ....的头部手动配置它们。 / p>

知道我做错了什么吗?我非常感谢你的帮助!

1 个答案:

答案 0 :(得分:15)

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

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

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

直到我看到这篇文章ASP.NET MVC 4: cannot modify jQuery Unobtrusive Ajax,我才检查了我的文件并发现它是旧版本。

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

这解决了问题,现在它的工作方式完全符合预期!