如何在 ASP.NET MVC 中使用 jQuery 渲染部分视图？-js教程-PHP中文网

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

Barbara Streisand

发布： 2024-11-03 19:08:30

原创

721 人浏览过

How to Render Partial Views with jQuery in ASP.NET MVC?

在 ASP.NET MVC 中使用 jQuery 加载部分视图

直接使用 jQuery 渲染部分视图是不可行的。但是，涉及服务器端调用和 jQuery/AJAX 操作的解决方法可以实现相同的结果。

解决方案：

设置按钮单击处理程序： 将单击事件处理程序附加到将启动部分视图渲染的按钮。

<code class="javascript">$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();</code>

登录后复制

检索部分视图 URL： 获取按钮上数据属性的部分视图的 URL。

<code class="javascript">    var url = $(this).data('url');</code>

登录后复制

发出 AJAX 请求： 使用 $.get() 发送 GET 请求到服务器获取部分视图。

<code class="javascript">    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });</code>

登录后复制

渲染部分视图： 在服务器上，在控制器中创建一个渲染部分视图的操作并返回

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

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

登录后复制

更新 DOM： 将部分视图中的 DIV 容器替换为服务器响应中更新的内容。

<code class="javascript">var $detailDiv = $('#detailsDiv');
$detailDiv.replaceWith(data);</code>

登录后复制

按钮和部分视图标记：

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

<!-- UserDetails partial view -->
<div id="detailsDiv">
    <!-- ...content... -->
</div></code>

登录后复制

注意：此方法依赖于服务器端操作来渲染部分视图并使用 jQuery 更新页面的 AJAX 请求。

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