NET核心-为什么我应该使用视图组件而不是集成在MVC应用程序或Razor页面中的Blazor组件

Question

在我们的新项目中，我们在现有的MVC应用程序中使用View components来实现分离和可重用的组件。最近，Blazor迈出了一些重要的步伐。我们认识到，对于类似的异步任务，使用Blazor组件要方便得多。例如，将商品添加到购物车：

视图组件(旧方法(：

在视图组件中，我们需要进行AJAX-POST来添加位置，然后通过AJAX-GET请求重新加载购物车视图组件。

Razor组件(新方法(

官方文件：https://learn.microsoft.com/en-us/aspnet/core/blazor/integrate-components?view=aspnetcore-3.1

在Razor组件中，我们只需调用底层的@code-方法来添加位置，并可以调用一个事件来重新调用cart视图组件。所以我们可以完全不用JavaScript。下面是我MVC应用程序中的一个工作示例：

产品列表.razor

<div>
@foreach (var c in products)
{
<div class="row">
<div class="col-md-3">
<img src="@c.ImageURL" class="img-fluid p-3" alt="@c.Description ">
</div>
<div class="col-md-9">
<div class="row">
<div class="col-12 d-flex">
<span class="font-weight-bold mr-auto">@c.Title</span>
<span class="ml-auto">@c.Number</span>
</div>
</div>
<button class="btnAddToCart" @onclick="(() => addposition(c.ID))"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
}

产品列表.razor.cs

分离了代码，但工作原理与我将其放入"@代码(("在我的剃须刀组件上(继承vomComponentBase(

public partial class ProductList : ComponentBase
{
[Inject] Business.Cart cart { get; set; }
[Inject] Business.Product product { get; set; }
protected List<ListProduct> products = new List<ListProduct>();
protected override async Task OnInitializedAsync()
{
List<ListProduct> temp = await product.GetProductList(new GetProductListRequest { CategoryURL = UrlDesc });
products = temp;
}
protected async Task addposition(int artid)
{
CartAddPositionResponse resp = await cart.AddPosition(new CartAddPositionRequest { ProductID = artid });
cart.CallRequestRefresh();
}
}

Catalog.cshtml(MVC视图(

<component type="typeof(ProductList)" render-mode="ServerPrerendered" param-urlDesc="@Model.urlDesc"/>

这就引出了以下问题：

如果我可以使用Blazor Components，那么使用View Components有什么理由吗？Blazor Components提供了直接调用异步方法的优势，并且可以在项目中的任何地方多次重用？有缺点吗？

Answer 1

View组件的一个主要功能是它呈现一个块而不是整个响应。这可以用于呈现视图和数据，例如所有视图的登录/注销面板、导航栏、数据中的最新更新等。视图组件也允许您在它们上运行异步操作。