ASP.. NET Core MVC可重用的HTML组件

Question

我开始深入了解ASP。. NET Core和Blazor的最大特点是能够重用带有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#也是基本的(主要属性是一个叫做ChildContent的RenderFragment，通过@ChildContent在视图中渲染。

在ASP中是否有等价的?. NET Core MVC应用程序不使用Blazor?我花了几个小时研究ViewComponents，但我似乎不明白我的视图如何访问ViewComponent上的RenderFragment。

例如，我试图设置的一个小型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>

我的ViewComponent也是相当基本的，因为这里的意图不是让它检索数据-它意味着是一个基本的卡模板(Bootstrap 5)，所以如果Bootstrap 6改变了卡的结构(就像他们对4所做的那样)==>5，它不再是一个"portlet")，我在一个地方修复它，我拥有的数百个视图将自动获得新的结构，而不是到处更改它。这是ViewComponent:

[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");
}
}

我觉得我正处于解决这个问题的尖端，但只是不能完全到达那里。我还审查了@helper的使用，这是非常接近的，但Razor/Blazor应用程序的语法要干净得多，并将让我的设计师团队(对。net一无所知)更好地理解发生了什么，例如:

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

任何建议都将非常感谢!

Answer 1

从你的问题，你只是想有一个可重用的HTML是一个基本的卡片模板，而不是检索数据，所以我建议你使用Partial View。

Partial View和ViewComponent的区别在Microsoft Document中描述为:

不要在复杂的呈现逻辑或代码中使用分部视图呈现标记需要执行。不是局部视图，使用视图组件

您可以按照我之前分享的链接了解更多关于Asp中的Partial View。网络核心。

Answer 2

一次幸运的Google搜索帮助我找到了这篇关于标记帮助器的文章。利用这一点，我不需要RenderFragment(这似乎是blazor特定的)-我可以根据需要添加内部HTML，通过将HTML附加到Process和ProcessAsync方法中包含的TagHelperOutput参数。它不像RenderFragment带来的那么简单，但它解决了我的用例。