如何使用jquery渲染部分视图?
我们可以这样渲染部分视图:
<% Html.RenderPartial("UserDetails"); %>
我们如何使用jquery做同样的事情?
如何使用jquery渲染部分视图?
我们可以这样渲染部分视图:
<% Html.RenderPartial("UserDetails"); %>
我们如何使用jquery做同样的事情?
Answers:
您不能仅使用jQuery呈现部分视图。但是,您可以调用将为您呈现部分视图的方法(操作),并使用jQuery / AJAX将其添加到页面中。在下面,我们有一个按钮单击处理程序,该处理程序从按钮上的data属性加载操作的url,并触发GET请求,以用更新的内容替换部分视图中包含的DIV。
$('.js-reload-details').on('click', function(evt) {
evt.preventDefault();
evt.stopPropagation();
var $detailDiv = $('#detailsDiv'),
url = $(this).data('url');
$.get(url, function(data) {
$detailDiv.replaceWith(data);
});
});
用户控制器具有名为Details的操作,该操作执行以下操作:
public ActionResult Details( int id )
{
var model = ...get user from db using id...
return PartialView( "UserDetails", model );
}
这是假设您的部分视图是带有ID的容器,detailsDiv
因此您只需将整个内容替换为调用结果的内容即可。
父视图按钮
<button data-url='@Url.Action("details","user", new { id = Model.ID } )'
class="js-reload-details">Reload</button>
User
是控制器名称,details
是中的操作名称@Url.Action()
。UserDetails部分视图
<div id="detailsDiv">
<!-- ...content... -->
</div>
我已经使用ajax加载来做到这一点:
$('#user_content').load('@Url.Action("UserDetails","User")');
UserDetails
是动作的名称,而不是局部视图,对吗?
@Url.Action("ActionName","ControllerName", new { area = "AreaName" } )
,而不是做Handcoding。
@tvanfosson对他的回答感到震惊。
但是,我建议对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);
}
您可以尝试的另一件事(基于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 :-)
<div class="renderaction fade-in" ...></div>
要素。
您需要在Controller上创建一个Action,该Action返回“ UserDetails”局部视图或控件的渲染结果。然后,只需使用jQuery的Http Get或Post来调用Action即可显示要呈现的html。
使用标准的Ajax调用获得相同的结果
$.ajax({
url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
type: 'GET',
error: function (xhr) {
alert('Error: ' + xhr.statusText);
},
success: function (result) {
$('#divSearchResult').html(result);
}
});
public ActionResult _SearchStudents(string NationalId)
{
//.......
return PartialView("_SearchStudents", model);
}
如果需要引用动态生成的值,还可以在@ URL.Action之后附加查询字符串参数,如下所示:
var id = $(this).attr('id');
var value = $(this).attr('value');
$('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);
public ActionResult Details( int id, string value )
{
var model = GetFooModel();
if (Request.IsAjaxRequest())
{
return PartialView( "UserDetails", model );
}
return View(model);
}