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

Question

我在我的简单ASP.NET MVC应用程序中使用时遇到了问题。我已经在SO上搜索了解决方案，但似乎没有找到有用的信息。

我使用默认的Visual Studio 2015模板创建了一个新项目。我修改了文件:

@{
    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

重要的是，我已经在_Layout.cshtml中添加了所需JavaScript文件的引用（将它们移动到页面顶部没有帮助）。

    ...
    @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文件，而我已经这样做了。以上是我对模板项目所做的所有更改，因此我无法理解我可能破坏了什么。

- kamilk

Answer 1

我在苦苦挣扎了几个小时后，在StackOverflow上发帖5分钟后就找到了解决方案。典型。

我不得不安装一个NuGet包Microsoft.jQuery.Unobrusive.Ajax，它不是默认安装的，并在页面中添加对jquery.unobtrusive-ajax.js的引用。 我以为它已经合并到jquery.validate.unobtrusive.js中了，但事实并非如此。

- kamilk

---

不！为什么这也是我的问题 :( 花了4个小时。非常感谢您更新您的原始帖子并提供答案！ - Eric