ASP.NETCoreMVC可重用HTML組件-有解無憂

我開始深入研究 ASP.NET Core，可能我在 Blazor 中的#1 功能是能夠重用帶有RenderFragment引數的組件，例如：

<div class="dropdown is-right" id="@this.ClientId">
    <!--trigger button-->
    <div class="dropdown-trigger">
        <button class="button" aria-label="@this.AriaLabel" aria-haspopup="true" aria-expanded="false" aria-controls="@($"{this.ClientId}_dropdown")">
            <i class="fas @this.Icon"></i>
        </button>
    </div>
    <!--dropdown-->
    <div class="dropdown-menu is-text-align-right" id="@($"{this.ClientId}_dropdown")" aria-hidden="true" role="menu">
        <div class="dropdown-content">
            @ChildContent
        </div>
    </div>
</div>

該組件的 C# 也是基本的（主要屬性是一個RenderFragment呼叫ChildContent，通過@ChildContent.

與不使用 Blazor 的 ASP.NET Core MVC 應用程式是否有等效項？我花了幾個小時研究ViewComponents，但我似乎無法弄清楚我的視圖如何訪問 aRenderFragment上的 a ViewComponent。

例如，ViewComponent我嘗試設定的一個小程式具有以下標記：

<div class="card card-px-0 shadow-sm">
    <div class="card-header">
        <h3 class="card-title">@this.Title</h3>
        <div class="card-toolbar">
            <button type="button" class="btn btn-sm btn-light">
                Action
            </button>
        </div>
    </div>
    <div class="card-body">
        @ContentTemplate
    </div>
    <div class="card-footer">
        Footer
    </div>
</div>

MyViewComponent也是非常基本的，因為這里的目的不是讓它檢索資料——它是一個基本的卡片模板（Bootstrap 5），所以如果 Bootstrap 6 改變了卡片的結構（就像他們用 4 = => 5，它不再是“portlet”），我在一個地方修復它，我擁有的數百個視圖將自動獲得新結構，而不是到處更改它。這是視圖組件：

[ViewComponent(Name = "Card")]
    public class CardViewComponent : ViewComponent
    {
        /// <summary>
        /// Gets or sets the card's body
        /// </summary>
        [Parameter]
        public RenderFragment ContentTemplate { get; set; }

        /// <summary>
        /// Gets or sets card's title
        /// </summary>
        [Parameter]
        public string Title { get; set; }

        /// <summary>
        /// Invokes this component to render the associated content.
        /// </summary>
        /// <returns>An IViewComponentResult.</returns>
        public IViewComponentResult Invoke()
        {
            return View("Default");
        }
    }

我覺得我正處于弄清楚這一點的風口浪尖，但就是不能完全做到。我還回顧了 a 的用法，@helper它非常接近，但 Razor/Blazor 應用程式的語法更簡潔，可以讓我的設計師團隊（對 .Net 一無所知）更好地理解正在發生的事情，例如：

<Card Title="Section Title">
     <p>I'm the body and would render inside the `ChildContent` RenderFragment!</p>
</Card>

我們歡迎所有的建議！

uj5u.com熱心網友回復：

根據您的問題，您只想將可重用 HTML 作為基本卡片模板而不是檢索資料，因此我建議您使用Partial View.

Microsoft 檔案中描述的Partial View和之間的區別為：ViewComponent

不要使用需要復雜的渲染邏輯或代碼執行來渲染標記的區域視圖。使用視圖組件代替區域視圖。

您可以按照我之前分享的鏈接了解更多關于Partial ViewAsp.Net 核心的資訊。

uj5u.com熱心網友回復：

一個幸運的谷歌搜索幫助我找到了這篇關于標簽助手的文章。利用它，我不需要 a RenderFragment（這似乎是 Blazor 特定的） - 我可以根據需要添加內部 HTML，方法是將 HTML 附加到and方法TagHelperOutput中包含的引數。它并不像帶來的那么簡單，但它解決了我的用例。ProcessProcessAsyncRenderFragment

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/497166.html

標籤：C＃ asp.net 核心 asp.net-core-mvc

上一篇：當啟用的可空參考型別中存在不可空屬性時，操作方法將被忽略

下一篇：無法將型別“System.Collections.Generic.IEnumerable<CommandAPI.Dtos.CommandReadDto>”隱式轉換為“Microsoft.A