如何使用Ajax更新VS 2012 Internet模板的RenderBody（）部分？

我看了几个例子，其中Ajax可以用来更新divs或其他元素与id。我一直无法找到一个使用Ajax和Razor视图的示例来帮助我处理以下问题。如何使用Ajax更新VS 2012 Internet模板的RenderBody（）部分？

我的页面在顶部的标准菜单，机身中间，和页脚。没有真正的需要每次更新页眉和页脚。实际上，我的页面只需要根据页面上的菜单点击和动作链接更新正文的一部分。我正在使用VS 2012创建的Internet模板进行测试，如果这有助于我不必使用一堆代码片段混淆此请求。我正在使用Razor视图和C＃编码偏好。

因此，考虑到默认_Layout.cshtml文件，我将如何加载关于通过Ajax网页即RenderBody（）节？我试着与一个div我缠RenderBody（）调用相匹配的UpdateTargetId添加Ajax.BeginForm（......）我_Layout.cshtml文件大约一个格，返回从我的控制器的局部视图，但是这不是完全正确。我所得到的只是我的部分观点。（关于页面没有菜单，页脚等仅仅是关于页面上的代码）

会有人友好地共享一个链接，演示此功能或亲切分享代码，做我想做的事情，即交换索引视图与关于没有完整页面刷新的视图？我错过的一些解释会很好，但我确信我可以从一个坚实的例子中推断出我错了。一如既往，您的时间非常感谢。

编辑：使用贾森的建议 _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 = “身体”

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

......

来源

2013-05-07 Budoray

下面是一个简单的例子与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>

来源

2013-05-07 17:57:43 Jasen

同样的问题。使用@ Ajax.ActionLink（...）只显示Home/About Blah文本。请参阅上面代码中的编辑。 – Budoray 2013-05-07 19:36:52

你是否包含jquery和jquery.unobtrusive *脚本？ – Jasen 2013-05-07 20:21:07

啊。我错误地认为他们与其他jQuery脚本捆绑在一起。将它们添加到我的_Layout.cshtml页面的头部，一切都很好。 – Budoray 2013-05-07 20:37:20

在您的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-25 17:21:34

刚才这个问题已经回答了。即使是这样，这个答案只是一个评论 – Aleksandar 2016-08-25 17:25:26

如何使用Ajax更新VS 2012 Internet模板的RenderBody（）部分？

回答

相关问题