如何使用Ajax来更新RenderBody()与VS 2012的互联网模板部分?互联网、如何使用、模板、部分

2023-09-10 19:19:41 作者:帅得无药可救

我已经看了其中,阿贾克斯可以用来更新的div或其他元素与IDS几个例子。我一直没能找到一个使用Ajax和剃刀意见为例,帮我用下面的。

I've looked at few examples where Ajax can be used to update divs or other elements with ids. I have not been able to find an example that uses Ajax with Razor views to help me with the following.

我的页面是一个标准的菜单在顶部,身体在中间,和页脚。有没有真正的需要更新页眉和页脚各一次。事实上,我的网页只需要身体的一个部分,基于菜单的点击次数进行更新和actionlinks在页面上。我测试这与使用VS 2012如果帮助,这样我就不必扰乱这一要求与一群code段创造了互联网的模板。我使用的剃刀意见和C#编码preferences。

My page is a standard Menu at the top, body in the middle, and a footer. There is no real need to update the header and footer each time. In fact, my page only requires a section of the Body to be updated based on menu clicks and actionlinks on the page. I'm testing this with the Internet Template that is created using VS 2012 if that helps such that I do not have to clutter this request with a bunch of code snippets. I am using Razor views and C# for coding preferences.

所以,给出的缺省_Layout.cshtml文件,我将如何加载关于通过Ajax网页即RenderBody()节?我试着加入Ajax.BeginForm(......)我_Layout.cshtml文件大约一格与匹配一个div我缠RenderBody()调用UpdateTargetId,返回从我的控制器的局部视图,但是这不是完全正确。我所得到的只是我的部分观点。 (关于页没有菜单,页脚等只是$ C关于页上的$ C)

So, given the default _Layout.cshtml file, how would I load the About page i.e. RenderBody() section via Ajax? I've tried adding Ajax.BeginForm(...) to my _Layout.cshtml file around one div with an UpdateTargetId that matches a div that I wrapped around the RenderBody() call, returned a partial view from my controller, but that's not quite right. What I get is my partial view only. (The About page with no menu, footer, etc. just the code on the About page)

会有人善意分享演示这一功能还是好心共享code,它是我的愿望,即交换索引视图有关视图,而不刷新整个页面的链接?对我缺少的是什么的一些解释,将是不错,但我敢肯定,我可以推断出一个坚实的例子,我就出错。与往常一样,你的时间是多少AP preciated。

Would someone kindly share a link that demonstrates this functionality or kindly share the code that does what I desire i.e. swap index view with about view without a full page refresh? Some explanation of what I'm missing would be nice, but I'm sure I could deduce from a solid example where I went awry. As always, your time is much appreciated.

编辑:使用贾森的建议 _Layout.cshtml

Using Jasen's suggestion _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 =身体

Inside my div id="body"

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

..... HomeController.cs

..... HomeController.cs

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

    return PartialView();
}

......

......

推荐答案

下面是一个简单的例子,用jQuery。该关于部分被注入的div与 ID =身体

Here is a simple example with jquery. The About partial gets injected into the div with 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>

编辑:也许一个更好的例子是使用一个链接,而不是

Maybe a better example is to use a link instead

@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()

Without jquery you want to use Ajax.ActionLink() instead of Ajax.BeginForm()

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