时间戳

首页 > 解决方案 > .NET Core - 为什么我应该使用视图组件而不是集成在 MVC 应用程序或 Razor 页面中的 Blazor 组件

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

问题描述

在我们的新项目中，我们在现有的 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 应用程序中的一个工作示例：

产品列表.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

分离了代码，但与我将它放在剃须刀组件上的“@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 组件，那么是否有任何理由使用视图组件，它提供了直接调用异步方法的优势，并且可以在项目的任何地方多次重用？有什么缺点吗？

标签： c#.net-coreasp.net-core-mvcblazor

解决方案

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

推荐阅读