问题描述

如何使用jQuery呈现部分视图?

我们可以像这样呈现部分视图:

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

我们如何使用jQuery进行相同的操作?

推荐答案

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

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

其他推荐答案

您不能仅使用jQuery渲染部分视图.但是，您可以调用一个方法(操作)，该方法将为您呈现部分视图，并使用jQuery/ajax将其添加到页面中.在下面的情况下，我们有一个按钮单击处理程序，该处理程序从按钮上的数据属性加载了操作的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);         
    });
});

用户控制器具有命名详细信息的操作:

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>

其他推荐答案

@tvanfosson的答案.

但是，我建议在JS和小型控制器检查中进行改进.

当我们使用@Url助手调用操作时，我们将收到格式的HTML.最好更新内容(.html)而不是实际元素(.replaceWith).

更多有关AT的信息: 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);
}

以上所述是小编给大家介绍的在ASP.NET MVC中使用jQuery渲染部分视图,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对77isp云服务器技术网的支持！