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

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

部分视图是通过将复杂视图分解为更小的视图来模块化 ASP.NET MVC 应用程序的便捷方法，可重复使用的组件。虽然直接在父视图中渲染它们是很常见的，但在某些情况下您可能需要使用 jQuery 动态地执行此操作。

如何使用 jQuery 渲染部分视图

与误解相反，你不能单独使用 jQuery 直接渲染部分视图。但是，您可以调用返回分部视图作为响应的操作方法，然后使用 jQuery 将结果插入到页面中。

以下代码示例演示了如何实现此目的：

<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 类和名为 data-url 的数据属性的按钮。 data-url 属性应包含呈现分部视图的操作方法的 URL。
• ID 属性为detailsDiv 的分部视图。
• 用户控制器中名为 Details 的操作方法。详细信息操作采用整数参数并返回名为“UserDetails”的部分视图。

示例代码

在父视图中，您应该包含一个按钮具有适当的 data-url 属性：

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

UserDetails 部分视图应包含所需的 HTML：

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

通过组合这些元素，您可以使用动态加载和显示部分视图ASP.NET MVC 中的 jQuery。

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