如何在 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中文網其他相關文章！