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

javascript jquery asp.net-mvc renderpartial

2022-08-30 00:51:30

如何使用 jquery 渲染局部视图？

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

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

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

答案 1

不能仅使用 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);         
    });
});

其中，用户控制器具有名为 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()

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

答案 2

我使用ajax加载来做到这一点：

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