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

2024-02-28

我看过一些 Ajax 可用于更新 div 或其他具有 id 元素的示例。我无法找到使用 Ajax 和 Razor 视图的示例来帮助我完成以下任务。

我的页面是顶部的标准菜单,中间的正文和页脚。并不需要每次都更新页眉和页脚。事实上,我的页面只需要根据页面上的菜单点击和操作链接来更新正文的一部分。我正在使用 VS 2012 创建的 Internet 模板对此进行测试(如果这有帮助的话),这样我就不必用一堆代码片段来混淆这个请求。我使用 Razor 视图和 C# 进行编码首选项。

那么,给定默认的 _Layout.cshtml 文件,我将如何通过 Ajax 加载“关于”页面,即 RenderBody() 部分?我尝试将 Ajax.BeginForm(...) 添加到一个 div 周围的 _Layout.cshtml 文件中,其中 UpdateTargetId 与我围绕 RenderBody() 调用的 div 匹配,从我的控制器返回部分视图,但这不是完全正确。我得到的只是我的部分观点。 (关于页面没有菜单、页脚等,只有关于页面上的代码)

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

编辑:使用贾森的建议 _布局.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();
}

......


这是一个使用 jquery 的简单示例。这About部分被注入到div中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");
}

关于.cshtml

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

Edit:也许更好的例子是使用链接

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

Edit:没有jquery你想使用Ajax.ActionLink()代替Ajax.BeginForm()

@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "body" }, new { })
<div id="body"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Ajax 使用 VS 2012 Internet 模板更新 RenderBody() 部分? 的相关文章

随机推荐