javascript - 在 ASP.NET MVC 中使用 jQuery 渲染局部 View

Question

如何使用 jquery 渲染局部 View ？

我们可以像这样渲染局部 View :

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

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

Answer 1

您不能仅使用 jQuery 渲染局部 View 。但是，您可以调用一个方法(操作)来为您呈现局部 View 并使用 jQuery/AJAX 将其添加到页面中。在下面，我们有一个按钮单击处理程序，它从按钮上的数据属性加载操作的 url，并触发 GET 请求以将部分 View 中包含的 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);         
    });
});

用户 Controller 有一个名为 details 的操作:

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}

这是假设您的局部 View 是一个 ID 为 detailsDiv 的容器，因此您只需将整个内容替换为调用结果的内容即可。

父 View 按钮

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

User 是 Controller 名称，details 是 @Url.Action() 中的 Action 名称。 UserDetails局部 View

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