在剃刀页面中使用剃刀组件

在我的最后一篇文章中,我看着ASP.NET核心3.0将向剃刀页面开发人员介绍的一些新事物。我触及的一个功能是剃刀组件。在本文中,我更详细地看看它们是什么以及如何使用它们。

剃刀组件形成了一部分海角框架。 Blazor是一个单页应用程序开发框架,其关键功能是它使您可以在C#中编写整个应用程序,并在浏览器中执行它。 为此,需要使用webassembly的新的.NET运行时。布拉泽斯开始生活作为实验框架。 作为其演进的一部分,介绍了一个服务器端模型,其中C#代码在其中 在Web服务器上执行,并且使用信号r连接来进行更新 实时应用程序在浏览器中。这个模式是 作为预览2中的.NET Core 3.0的一部分正式并入。, 并且是 最初被命名为剃刀组件。在预览4中,开发模式是 重命名为服务器端海角。术语 剃刀成分 现在是指 在布拉泽尔框架内的特定构建块而不是a 发展框架本身。

在Blazor中,Razor组件可以执行许多角色。他们可以代表一个 特定的UI,相当于剃刀页面部分,查看组件 或标签帮手。或者他们可以 代表布局。或者它们可以代表整个页面。在剃刀中使用时 页面(或确实是MVC视图),他们将取代部分,一个视图 组件或自定义标签辅助程序。

剃刀组件在文件中创建 。剃刀 扩大。他们 也可以创建 .cshtml. 文件,但这种方式呈现潜力 混乱如果你问我。这主要是为了帮助向后兼容性 具有较小的预览。这 。剃刀 文件包含HTML的混合 和C#,使用熟悉的剃刀语法嵌入HTML中。

寻呼机组件

遵循的示例显示了如何创建生成的剃刀组件 分页链接,然后将其整合到剃刀页面中。这已经开发出来 使用Visual Studio 2019 16.3.0预览1.0,以及.NET Core 3.0的预览7。

  1. 第一步是使Blazor提供给应用程序。这是在的 ConfigureServices 方法:
    services.AddServerSideBlazor();
  2. 接下来,添加名为的文件夹 组件 到项目。在文件夹中,添加一个名为的新文件 _imports.razor.。您可以使用razor组件模板选项来执行此操作。或者您可以添加文本文件并更改扩展名。
  3. 替换任何现有内容 _imports.razor. 具有以下代码行的文件:
     @using Microsoft.AspNetCore.Components

    此文件以类似的方式工作 _ViewImports.chtml. 在剃刀页面应用程序中工作 除了它只影响海角人工制品。它提供了一种方法来将名称空间带入放置在与文件中的剃刀组件中的范围内,或任何子文件夹。

  4. 将一个新文件添加到 组件 文件夹命名 Pager.Razor.。使用添加新项目可用的razor组件选项:

    添加剃刀组件

  5. 用以下代码替换任何现有内容:
    <ul class="pagination">
        @for(var i = 1; i <= totalPages; i++)
        {
            <li class="page-item @(i == pageNumber ? "active" : "")">
                <a href="@linkUrl/@i" class="page-link">@i</a>
            </li>
        }
    </ul>
    @code {
        [Parameter] int pageNumber { get; set; }
        [Parameter] int totalRecords { get; set; }
        [Parameter] int pageSize { get; set; } = 20;
        [Parameter] string linkUrl { get; set;  }
        int totalPages => (int)Math.Ceiling((decimal)totalRecords / pageSize);
    }

    文件顶部的代码是熟悉的,任何与之合作的人 剃刀。它将HTML与C#结合起来渲染包含列表的无序列表 每个分页链接的项目。标记使用Bootstrap 4样式 render buttons.

    The @code block is equivalent to the @functions 块您可能在MVC视图和剃刀页面中看到。事实上,你可以 replace @code with @functions in a 。剃刀 file, although you can't use @code in a .cshtml file - at least not 在.NET Core 3.0预览7中。这是您放置C#代码块的地方,包括 属性声明和本地方法。

    The [Parameter] attribute is used to expose private properties 作为调用者的参数,以便您可以通过任意值 成分。在这种情况下,您希望允许调用者能够通过 current page (pageNumber), the total number of records, the number of records per page (pageSize) and the URL that the link should 指向。分页链路的总数由数量计算 记录和页面大小。

  6. The RenderComponentAsync<T> method is used to include the component in a Razor page, with parameter values passed as an object:
    @(await Html.RenderComponentAsync<Pager>( new { pageNumber = Model.PageNumber, totalRecords = 150, pageSize = 20, linkUrl = Url.PageLink("Index")}))
    剃刀成分

You don't have to place your properties and methods in an @code block. You can create a class that derives from ComponentBase 然后有 。剃刀 文件继承自该文件。以下是将其转换为上面的寻呼机组件。

创建一个名为的类 PAGERCOMPONENT. 以下内容:

using Microsoft.AspNetCore.Components;

public class PAGERCOMPONENT. : ComponentBase
{
    [Parameter] public int PageNumber { get; set; }
    [Parameter] public int TotalRecords { get; set; }
    [Parameter] public int PageSize { get; set; } = 20;
    [Parameter] public string LinkUrl { get; set; }
    public int TotalPages => (int)Math.Ceiling((decimal)TotalRecords / PageSize);
}

然后改变的内容 Pager.Razor. file as follows:

@inherits PAGERCOMPONENT.
<ul class="pagination">
    @for(var i = 1; i <= TotalPages; i++)
    {
        <li class="page-item @(i == PageNumber ? "active" : "")">
            <a href="@LinkUrl/@i" class="page-link">@i</a>
        </li>
    }
</ul>

如果重新运行该应用程序,则组件应以前呈现。无需更改您传递给的对象中的参数名称的壳体 RenderComponentAsync 匹配新类公共属性的外壳的方法。在将参数值绑定到属性时,布拉泽队在不敏感匹配。

概括

剃刀组件可以轻松使用在剃刀页面应用程序中。 UI和处理代码可以在同一文件中分区,或分开到不同的文件中,可以帮助单元测试。