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

Question

我看了几个例子,其中Ajax可用于使用id更新div或其他元素.我无法找到一个使用Ajax和Razor视图的示例来帮助我完成以下操作.

我的页面是顶部的标准菜单,中间的正文和页脚.每次都不需要更新页眉和页脚.事实上,我的页面只需要根据页面上的菜单点击和操作链接更新Body的一部分.我正在使用使用VS 2012创建的Internet模板对此进行测试,如果这有助于我不必使用一堆代码片段来混淆此请求.我正在使用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".

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

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>