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

在我们的新项目中，我们在现有的MVC应用程序中使用视图组件来分离和重用组件。最近Blazor采取了一些严肃的措施。我们认识到，对于类似异步任务，使用Blazor组件要方便得多。例如，将项目添加到购物车：

查看组件（旧方法）： 在视图组件中，我们需要制作一个AJAX-POST来添加位置，然后通过AJAX-GET请求重新加载购物车视图组件

剃须刀组件（新方法） 官方文件：

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

ProductList.razor

@foreach（产品中的var c）
{
@c、 头衔
@c、 数
}

ProductList.razor.cs 分离代码，但工作原理与我将其放入razor组件上的“@code（）”时相同（继承vom ComponentBase）

公共部分类ProductList:ComponentBase
{
[Inject]Business.Cart购物车{get；set；}
[Inject]Business.Product产品{get；set；}
受保护的列表产品=新列表（）；
受保护的重写异步任务OnInitializedAsync（）
{
List temp=wait product.GetProductList（新的GetProductListRequest{CategoryURL=UrlDesc}）；
产品=温度；
}
受保护的异步任务addposition（int-artid）
{
cartaddpositionresp=wait cart.AddPosition（新的CartAddPositionRequest{ProductID=artid}）；
cart.CallRequestRefresh（）；
}
}

Catalog.cshtml（MVC视图）

这导致了以下问题：

---

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

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

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

如果我错了，请纠正我，但你根本不应该在Blazor中使用视图组件。Blazor是否已准备好投入生产使用？@KieranDevlin我在MVC应用程序中使用视图组件/Blazor组件，而不是在Blazor应用程序中使用：@vasily.sib是的，服务器端Blazor已准备好与.net Core 3一起投入生产使用。1@vasily.sib确切地说，自.net core 3.0以来，服务器端Blazor一直受支持。从.NET3.1开始，它就支持LTS。Blazor webassembly计划于今年3月发布请纠正我的错误，但你根本不应该在Blazor中使用视图组件。Blazor准备好投入生产使用了吗？@KieranDevlin我在MVC应用程序中使用视图组件/Blazor组件，而不是在Blazor应用程序中使用：@vasily.sib是，服务器端blazor已准备好与.NETCore3一起生产使用。1@vasily.sib确切地说，服务器端Blazor从.NETCore3.0开始就受到支持。从.NET3.1开始，它就支持LTS。Blazor webassembly计划于今年3月发布

<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>
}

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();
    }
}

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