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



我在使用不显眼的ajax从contact us表单中发布数据时遇到了麻烦。

我的局部视图是这样的:

@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());

我的Home Controller如下:

[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");
}

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

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

我不明白这是怎么回事…我试着在网上找一些例子,却发现自己越陷越深。

我确实在我的Web中启用了不显眼的javascript。配置和我也有一个引用jquery. unobtrusiu -ajax.min.js。

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

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

In 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>

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

知道我做错了什么吗?我真的很感激你的帮助!

我终于得到了!!!!浪费了几个小时的时间!!

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

我正在使用jQuery 1.9.1和我认为是最新版本的Microsoft.jQuery.Unobtrusive.Ajax 2.0.30116.0。然而,有一个问题……jquery不显眼的ajax js文件,我仍然使用已弃用的live方法而不是on方法....

直到我看到这篇文章。. NET MVC 4:不能修改jQuery不显眼的Ajax,我检查了我拥有的文件,发现它是一个旧版本。

一开始我使用jQuery。迁移nuget包以重新启用live方法…但我发现更好的解决方案是卸载或删除现有文件,并使用nuget重新安装Microsoft.jQuery.Unobtrusive.Ajax包。

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

最新更新