如何在 .NET Core 中使用局部视图

ASP.NET Core 中的分部视图是一项强大的功能，它允许开发人员将大型视图分解为较小的可重用组件。这种模块化方法允许在不同视图之间重用 UI 元素，从而促进更简洁、更易于维护的代码。

一.什么是局部视图？

局部视图与常规视图类似，但旨在呈现网页的一部分。与完整视图不同，局部视图没有自己的布局，旨在在父视图中呈现。局部视图对于呈现动态内容和减少代码重复特别有用。

二.使用局部视图的好处

• 可重用性：常见的 UI 组件只需定义一次，便可在多个视图中重复使用。
• 关注点分离：将大视图分解为更小的组件使得代码更易于管理和理解。
• 可维护性：局部视图的更改会反映在使用它的任何地方，从而简化更新和维护。

三.创建局部视图

步骤 1.添加局部视图

要在 ASP.NET Core 中创建局部视图，请右键单击Views文件夹或子文件夹并选择Add > New Item。选择MVC View Page并使用下划线前缀命名（例如_PartialView.cshtml）。

示例

创建用于显示产品列表的分部视图。

<!-- Views/Shared/_ProductList.cshtml -->
@model IEnumerable<Product>

<div class="product-list">
    @foreach (var product in Model)
    {
        <div class="product-item">
            <h3>@product.Name</h3>
            <p>Price: @product.Price</p>
        </div>
    }
</div>

步骤 2.渲染局部视图

要在父视图中呈现局部视图，请使用PartialRazor 语法中的方法。

示例

_ProductList在父视图中 渲染局部视图。

<!-- Views/Home/Index.cshtml -->
@model IEnumerable<Product>

<h2>Product List</h2>
@Html.Partial("_ProductList", Model)

您还可以使用该PartialAsync方法异步渲染局部视图。

@await Html.PartialAsync("_ProductList", Model)

三.将数据传递给分部视图

局部视图可以接受从父视图传递的模型。您可以传递整个模型或其子集。

示例

将产品列表传递到_ProductList分部视图。

@model IEnumerable<Product>

<h2>Product List</h2>
@Html.Partial("_ProductList", Model)

如果您需要传递不同的模型，您可以通过明确指定模型来实现。

@Html.Partial("_ProductList", Model.Products)

四.使用视图组件作为替代方案

虽然局部视图很有用，但 ASP.NET Core 还提供了视图组件，它提供了一种更强大的方式来封装可重用的渲染逻辑。视图组件类似于局部视图，但可以包含更复杂的逻辑，更类似于控制器。

创建视图组件

1.创建视图组件类

public class ProductListViewComponent : ViewComponent
{
    private readonly IProductService _productService;

    public ProductListViewComponent(IProductService productService)
    {
        _productService = productService;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var products = await _productService.GetProductsAsync();
        return View(products);
    }
}

2.为视图组件创建视图

为文件夹中的视图组件创建视图Views/Shared/Components。

<!-- Views/Shared/Components/ProductList/Default.cshtml -->
@model IEnumerable<Product>

<div class="product-list">
    @foreach (var product in Model)
    {
        <div class="product-item">
            <h3>@product.Name</h3>
            <p>Price: @product.Price</p>
        </div>
    }
</div>

3.调用视图组件

使用该方法调用父视图中的视图组件Component。

@await Component.InvokeAsync("ProductList")

五.结论

ASP.NET Core 中的分部视图提供了一种创建可重用且可维护的 UI 组件的便捷方法。通过利用分部视图，您可以保持视图整洁有序，从而更轻松地进行更新并更好地管理代码。此外，请考虑使用视图组件来实现更复杂的渲染逻辑，因为它们提供了更大的灵活性和关注点分离。