Ajax.BeginForm用部分视图替换整个页面

时间:2015-09-27 15:49:57

标签: ajax asp.net-mvc razor

我在简单的ASP.NET MVC应用程序中使用Ajax.BeginForm()时遇到问题。我搜索过SO以寻求解决方案,但我发现的任何内容似乎都没有帮助。

我使用默认的Visual Studio 2015模板创建了一个新项目。我已将Index.cshtml文件更改为:

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div id="ajax-test"></div>

    @using (Ajax.BeginForm("Test", new AjaxOptions()
    {
        UpdateTargetId = "ajax-test",
        InsertionMode = InsertionMode.Replace
    }))
    {
        <input type="submit" />
    }
</div>

我已向HomeController添加了新动作:

    public ActionResult Test()
    {
        return PartialView("Test");
    }

新视图Home\Test.cshtml

Hello world

而且,至关重要的是,我已将所需的JavaScript文件添加到_Layout.cshtml(将它们移到页面顶部无效)。

    ...
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

我已在调试模式中验证jqueryval捆绑包呈现为:

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

web.config文件中已存在这些条目:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

我希望当我按下提交时,div将填充'Hello world'。相反,整个页面将替换为“Hello world”,浏览器将重定向到/Home/Test。开发人员工具中未报告任何错误。

缺少什么元素?我知道之前在StackOverflow上已经提出了类似的问题,但通常的答案是包含这些JavaScript文件,我做了。以上是我对模板项目所做的所有更改,因此我无法看到我可以破坏的内容。

1 个答案:

答案 0 :(得分:9)

我已经挣扎了好几个小时,并在StackOverflow上发布后5分钟找到了解决方案。典型

我必须安装默认情况下未安装的NuGet包Microsoft.jQuery.Unobrusive.Ajax,并向页面添加对jquery.unobtrusive-ajax.js的引用。我认为它已合并到jquery.validate.unobtrusive.js或其他东西但没有。