如何使用 Ajax 使用 VS 2012 Internet 模板更新 RenderBody() 部分？

Question

我查看了一些可以使用 Ajax 更新 div 或其他具有 id 的元素的示例。我找不到一个使用 Ajax 和 Razor 视图的示例来帮助我完成以下工作。

我的页面是顶部的标准菜单，中间的正文和页脚。没有必要每次都更新页眉和页脚。事实上，我的页面只需要根据页面上的菜单点击和操作链接来更新 Body 的一部分。我正在使用使用 VS 2012 创建的 Internet 模板对此进行测试，如果这有助于我不必用一堆代码 sn-ps 来混淆这个请求。我将 Razor 视图和 C# 用于编码偏好。

那么，给定默认的 _Layout.cshtml 文件，我将如何通过 Ajax 加载 About 页面，即 RenderBody() 部分？我已经尝试将 Ajax.BeginForm(...) 添加到我的 _Layout.cshtml 文件中，其中一个 div 的 UpdateTargetId 与我包裹 RenderBody() 调用的 div 匹配，从我的控制器返回了一个局部视图，但这不是非常正确。我得到的只是我的部分观点。 （关于页面没有菜单、页脚等，只是关于页面上的代码）

有人愿意分享一个演示此功能的链接，或者分享我想要的代码，即在不刷新整页的情况下将索引视图与关于视图交换吗？对我所缺少的东西进行一些解释会很好，但我相信我可以从一个我出错的可靠例子中推断出来。一如既往，我们非常感谢您抽出宝贵时间。

编辑：使用 Jasen 的建议 _Layout.cshtml

<nav>
    <ul id="menu">
       <li>@Html.ActionLink("Home", "Index", "Home")</li>
       <li>@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "body" }, new { })</li>
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
</nav>

....

在我的 div 中 id="body"

@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
    @RenderBody()
</section>

..... HomeController.cs

public ActionResult About()
{
    ViewBag.Message = "Your app description page.";

    return PartialView();
}

......

Answer 1

这是一个简单的 jquery 示例。 About 部分通过 id="body" 注入到 div 中。

<button>About</button>
<div id="body"></div>

$(function () {
    $("button").on("click", function(e) {
        $.get("Home/About").done(function(result) {
            $("#body").html(result);
        });
    });
));

控制器动作

[HttpGet]
public ActionResult About()
{
    return PartialView("About");
}

关于.cshtml

@{ Layout = null }
<h2>Home/About</h2>
<p>Blah... </p>

编辑：也许更好的例子是使用链接

@Html.ActionLink("About", "About", "Home", null, new { @class="menu-button" })
<div id="body"></div>

$(function () {
    $(".menu-button").on("click", function(e) {
        e.preventDefault();
        var url = $(this).attr("href");
        $.get(url).done(function(result) {
            $("#body").html(result);
        });
    });
});

编辑：如果没有 jquery，你想使用 Ajax.ActionLink() 而不是 Ajax.BeginForm()

@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "body" }, new { })
<div id="body"></div>

Answer 2

在你的HomeController.cs

public PartialViewResult About()
{
    ViewBag.Message = "Your app description page.";

    return PartialView();
}

在您的_Layout.cshtml 中不要忘记导入：

    <script src="~/Content/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="~/Content/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>