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

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

在 ASP.NET MVC 中，部分视图通常使用 Html.RenderPartial() 方法渲染。但是，在某些情况下，您可能需要使用 jQuery 来渲染分部视图。

使用 jQuery 和 Ajax 的方法

要使用 jQuery 渲染分部视图，您可以执行以下操作：

1. 创建操作方法：在控制器中定义一个操作方法以返回部分视图。
2. 绑定 jQuery 事件处理程序：将点击事件处理程序绑定到页面上的按钮或链接。
3. 调用操作方法：在事件处理程序内，使用 $.get() 或 $.post() 发送对操作方法的 Ajax 请求。
4. 替换部分视图 Div: 当操作方法返回部分视图时，使用 $.replaceWith() 或 $.html() 替换现有的页面上部分视图 div 的内容。

示例：

<code class="javascript">$('.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);         
    });
});</code>

在此示例中，带有 js-reload-details 类的按钮触发点击事件处理程序。事件处理程序使用 $.get() 加载部分视图，并将 id 为detailsDiv 的 div 内容替换为返回的 HTML。

控制器操作：

<code class="csharp">public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}</code>

父视图按钮：

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

用户详细信息部分视图：

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

以上是如何在 ASP.NET MVC 中使用 jQuery 渲染部分视图？的详细内容。更多信息请关注PHP中文网其他相关文章！