如何在 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 屬性應包含呈現分部視圖的操作方法的 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中文網其他相關文章！