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

Posted 2023-04-13

【中文标题】.NET Core - 为啥我应该使用视图组件而不是集成在 MVC 应用程序或 Razor 页面中的 Blazor 组件

【英文标题】：.NET Core - Why should I use View Components over Blazor Components integrated in MVC App or Razor Pages.NET Core - 为什么我应该使用视图组件而不是集成在 MVC 应用程序或 Razor 页面中的 Blazor 组件

【发布时间】：2020-06-08 22:01:59

【问题描述】：

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

查看组件（旧方法）：

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

Razor 组件（新方法）

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

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

ProductList.razor

<div>
@foreach (var c in products)

    <div class="row">

        <div class="col-md-3">
            <img src="@c.ImageURL" class="img-fluid p-3" >
        </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>

ProductList.razor.cs

分离了代码，但与我将它放在剃须刀组件上的“@Code()”中时的工作方式相同（继承 vom ComponentBase）

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 组件，那么是否有任何理由使用视图组件，它提供了直接调用异步方法的优势，并且可以在项目的任何地方多次重用？有什么缺点吗？

【问题讨论】：

如果我错了，请纠正我，但您根本不应该在 Blazor 中使用视图组件。

Blazor 准备好用于生产了吗？

@KieranDevlin 我在 MVC 应用程序中使用视图组件/blazor 组件，而不是在 Blazor 应用程序中：docs.microsoft.com/en-us/aspnet/core/blazor/…

@vasily.sib 是的，服务器端 blazor 已准备好与 .net Core 3.1 一起生产使用

@vasily.sib 确切地说，从 .net core 3.0 开始支持服务器端 Blazor。从 .net 3.1 开始，它支持 LTS。 Blazor webassembly 计划于今年 3 月发布

【参考方案1】：

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