渲染部分视图在ASP.NET MVC中使用jQuery

如何使用jQuery呈现局部视图？

我们可以像这样渲染部分视图：

<% Html.RenderPartial("UserDetails"); %> 

我们如何使用jquery做同样的事情？

Answer 1

你不能仅使用jQuery渲染局部视图。 但是，您可以调用一个方法（动作），为您呈现局部视图，并使用jQuery / AJAX将其添加到页面中。 在下面，我们有一个button点击处理程序，该button点击处理程序从button上的数据属性加载动作的url，并触发GET请求，以将部分视图中包含的DIVreplace为更新的内容。

 $('.js-reload-details').on('click', function(evt) { evt.preventDefault(); evt.stopPropagation(); var $detailDiv = $('#detailsDiv'), url = $(this).data('url'); $.get(url, function(data) { $detailsDiv.replaceWith(data); }); }); 

用户控制器有一个名为details的动作：

 public ActionResult Details( int id ) { var model = ...get user from db using id... return PartialView( "UserDetails", model ); } 

这是假设你的局部视图是一个具有id detailsDiv的容器，所以你只需要用调用结果的内容replace整个事物。

父视图button

  <button data-url='@Url.Action("details","user", new { id = Model.ID } )' class="js-reload-details">Reload</button> 

UserDetails部分视图

 <div id="detailsDiv"> <!-- ...content... --> </div> 

Answer 2

我已经使用Ajax负载来做到这一点：

 $('#user_content').load('@Url.Action("UserDetails","User")'); 

Answer 3

@tvanfosson与他的答案岩石。

不过，我会build议在js和一个小控制器检查改善。

当我们使用@Url助手来调用一个动作时，我们将接收一个格式化的html。 更新内容（ .html ）而不是实际元素（ .replaceWith ）会更好。

更多关于： jQuery的replaceWith（）和html（）之间有什么区别？

 $.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) { $('#detailsDiv').html(data); }); 

这在树中特别有用，其内容可以多次更改。

在控制器上，我们可以根据请求者重用这个动作：

 public ActionResult Details( int id ) { var model = GetFooModel(); if (Request.IsAjaxRequest()) { return PartialView( "UserDetails", model ); } return View(model); } 

Answer 4

你需要在Controller上创build一个Action，返回“UserDetails”局部视图或控件的渲染结果。 然后，只需使用jQuery中的Http Get或Post来调用Action来获取呈现的HTML即可。

Answer 5

你可以尝试的另一件事（根据tvanfosson的答案）是这样的：

 <div class="renderaction fade-in" data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div> 

然后在页面的脚本部分：

 <script type="text/javascript"> $(function () { $(".renderaction").each(function (i, n) { var $n = $(n), url = $n.attr('data-actionurl'), $this = $(this); $.get(url, function (data) { $this.html(data); }); }); }); </script> 

这使用ajax呈现您的@ Html.RenderAction。

为了让它变得更加迷人，你可以使用这个CSS添加淡入效果：

 /* make keyframes that tell the start state and the end state of our object */ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .fade-in { opacity: 0; /* make things invisible upon start */ -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation: fadeIn ease-in 1; -o-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } 

男人我爱mvc 🙂

Answer 6

我是这样做的。

 $(document).ready(function(){ $("#yourid").click(function(){ $(this).load('@Url.Action("Details")'); }); }); 

详细方法：

 public IActionResult Details() { return PartialView("Your Partial View"); }