11

我看过几个例子，其中 Ajax 可用于更新 div 或其他带有 id 的元素。我无法找到将 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();
}

……

4

2 回答 2

9

这是一个使用 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>

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

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

编辑：没有你想使用的 jqueryAjax.ActionLink()而不是Ajax.BeginForm()

@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "body" }, new { })
<div id="body"></div>
于 2013-05-07T17:57:43.470 回答
-1

在你的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>
于 2016-08-25T17:21:34.587 回答