.NET 团队最喜欢的 Razor 功能 TagHelperPack BlazorWebFormsComponents

2025-06-04

.NET 团队最喜欢的 Razor 功能

TagHelperPackCI NuGet

BlazorWebForms组件

Razor 是一种用于将基于 .NET 的代码嵌入网页的标记语法。它包含 Razor 标记、C# 和 HTML。包含 Razor 的文件通常以 .cshtml 为扩展名。Razor 也包含在 Razor 组件文件 (.razor) 中。

Razor 的设计理念是轻量级且不显眼，因此您可以专注于标记。然而，它还有很多隐藏的功能，非常实用！我向 .NET 团队的一些朋友询问了他们最喜欢的 Razor 功能，以下是他们的评价。

缓存标签助手 - Scott Hanselman

我真的很喜欢像缓存这样的标签助手...它太简单了！

@page 
@model ArchivesModel

<cache expires-after="@TimeSpan.FromHours(4)">
    @foreach (var show in Model.Shows)
    {
     <a href="@show.AsAwesomeUrl()" class="showCard">
      <img data-src="@("https://images.hanselminutes.com/podcast/shows/" 
        + show.Number + ".jpg")"
        loading="lazy" class="lazyload" 
        src="/images/grey.gif" width="212" height="212" 
        alt="@show.Title" />
      <span class="shownumber">@show.Number</span>
      <div class="overlay title">
       <!-- cant add padding to the wrapping div or the layout gets 
        messed up, title will be wrapped in a p tag
       which will have the padding added to it -->
       <p class="overlay-text">@show.Title</p>
      </div>
     </a>
    }
</cache>
Enter fullscreen mode Exit fullscreen mode

文档：缓存标签助手

隐式 Razor 表达式包含异步 - James Montemagno

这是 Razor 的核心功能，允许您直接从 cshtml 调用 C# 异步代码！

<p>@await DoSomethingAsync("Hello", "from", "async")</p>
Enter fullscreen mode Exit fullscreen mode

文档：隐式 Razor 表达式

自定义标签助手 - Damian Edwards

标记帮助程序使服务器端代码能够参与创建和渲染 Razor 文件中的 HTML 元素。它有很多内置的标记帮助程序，但您也可以轻松编写自己的标记帮助程序。

下面是一个标记助手的示例asp-if，如果提供的谓词等于 false，它会抑制元素的输出。

[HtmlTargetElement("*", Attributes = "asp-if")]
public class IfTagHelper : TagHelper
{
    /// <summary>
    /// The predicate expression to test.
    /// </summary>
    [HtmlAttributeName("asp-if")]
    public bool Predicate { get; set; }

    public override void Process(TagHelperContext context, 
        TagHelperOutput output)
    {
        if (!Predicate)
        {
            output.SuppressOutput();
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

使用方法如下：

<div asp-if="(DateTime.UtcNow.Minute % 2) == 0">
  This paragraph will only render during <strong>even</strong> minutes.
</div>
<div asp-if="(DateTime.UtcNow.Minute % 2) == 1">
  This paragraph will only render during <strong>odd</strong> minutes.
</div>
Enter fullscreen mode Exit fullscreen mode

我已经在这个TagHelper Pack Samples存储库中编写了很多示例标签助手。

GitHub 徽标 DamianEdwards / TagHelperPack

一组有用的、可能有自己观点的 ASP.NET Core 标签助手

TagHelperPackCI NuGet

一组适用于 ASP.NET Core（所有版本）的有用且可能有意见的标签助手。

包含的标签助手和示例

请参阅https://taghelperpack.net上的示例页面

支持 ASP.NET Core 6.0.x 和 7.0.x。在 .NET Framework 4.7.1 或更高版本上运行时，还支持 ASP.NET Core 2.1.x。

安装

  1. 从 cmd 行添加对包的引用：

    MyGreatProject> dotnet add package TagHelperPack
    Enter fullscreen mode Exit fullscreen mode

  2. 恢复：

    MyGreatProject> dotnet restore
    Enter fullscreen mode Exit fullscreen mode

  3. 在应用程序的文件中注册标记帮助程序_ViewImports.cshtml：

    @addTagHelper *, TagHelperPack
    Enter fullscreen mode Exit fullscreen mode

  4. ConfigureServices()可选：在或中注册优化Program.cs（ASP.NET Core 6+）

    services.AddTagHelperPack();
    Enter fullscreen mode Exit fullscreen mode



在 GitHub 上查看


模板组件 - Daniel Roth

文件中的任何东西.razor都是一件艺术品😍

模板化组件非常有用。它们接受一个或多个 UI 模板作为参数，这些模板随后可用作组件渲染逻辑的一部分。模板化组件允许您编写比以前更高级、可复用的组件。例如，列表视图组件可以允许用户指定用于渲染列表中项目的模板，或者网格组件可以允许用户指定网格标题和每一行的模板。

<h1>Pets</h1>

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}
Enter fullscreen mode Exit fullscreen mode

文档：模板组件

ViewComponentTagHelpers -泰勒·穆伦

您可以创建一个 ViewComponent 并让它返回内容、视图或执行任何其他复杂的逻辑：

using Microsoft.AspNetCore.Mvc;

namespace WebApplication3000
{
   public class Foo: ViewComponent
   {
       public IViewComponentResult Invoke()
       {
           return Content("Hello, World!");
       }
   }   
}
Enter fullscreen mode Exit fullscreen mode

然后它们立即被转换成您可以在视图中使用的 TagHelpers：

@addTagHelper *, WebApplication3000

<vc:foo />
Enter fullscreen mode Exit fullscreen mode

文档：视图组件

@inject -布雷迪·加斯特

@inject太🔥🔥🔥了！我很高兴我能做到这一点——简直太棒了。

以下是注入配置的示例：

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
@{
   string myValue = Configuration["root:parent:child"];
   ...
}
Enter fullscreen mode Exit fullscreen mode

您还可以注入服务：

@using System.Threading.Tasks
@using ViewInjectSample.Model
@using ViewInjectSample.Model.Services
@model IEnumerable<ToDoItem>
@inject StatisticsService StatsService
<!DOCTYPE html>
<html>
<head>
    <title>To Do Items</title>
</head>
<body>
    <div>
        <h1>To Do Items</h1>
        <ul>
            <li>Total Items: @StatsService.GetCount()</li>
            <li>Completed: @StatsService.GetCompletedCount()</li>
            <li>Avg. Priority: @StatsService.GetAveragePriority()</li>
        </ul>
        <table>
            <tr>
                <th>Name</th>
                <th>Priority</th>
                <th>Is Done?</th>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.Name</td>
                    <td>@item.Priority</td>
                    <td>@item.IsDone</td>
                </tr>
            }
        </table>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

文档：ASP.NET Core 中的视图依赖注入

Razor 类库 - Jeff Fritz

我喜欢 Razor 组件库。只需编写一个 .razor 文件，它就是一个可以引用的组件。我在BlazorWebFormsComponents项目中经常使用它们，这有助于将 ASP.NET Web Forms 项目迁移到 Blazor。

这是一个示例Label组件，实现如下Label.razor：

@inherits BaseWebFormsComponent

@if (Visible)
{
    <span id="@ID">@Text</span>
}
Enter fullscreen mode Exit fullscreen mode

逻辑在于Label.razor.cs：

using BlazorWebFormsComponents.Interfaces;
using Microsoft.AspNetCore.Components;

namespace BlazorWebFormsComponents
{
    public partial class Label : BaseWebFormsComponent, ITextComponent
    {
        [Parameter]
        public string Text { get; set; }
    }
}
Enter fullscreen mode Exit fullscreen mode

GitHub 徽标 FritzAndFriends / BlazorWebFormsComponents

Blazor 组件的集合，模拟同名的 ASP.NET Web 窗体控件

BlazorWebForms组件

Blazor 组件的集合，模拟同名的 Web 表单组件

构建状态 加入聊天：https://gitter.im/BlazorWebFormsComponents/community 文档

Nuget Nuget（含预发布版本） 现场样品

在 Azure 上运行的实时示例

方法 + 注意事项

我们相信，维护良好且有价值的 Web 窗体应用程序应该能够以最少的更改过渡到新的用户界面框架。这并非应用程序转换，也不是一个可以应用到您的项目中并神奇地使其与 ASP.NET Core 兼容的补丁。此存储库包含一个库和一系列策略，可让您重用大量标记和业务代码，并帮助缩短应用程序重写过程。

这并不适用于所有人，并非每个人都需要迁移他们的应用程序。它们可以继续以 Web Forms 的形式获得长期支持（截至撰写本文时，支持期限为 2029 年），并且考虑迁移的应用程序……


在 GitHub 上查看


使用所有 .NET 功能 - David Pine

这是一个非常有用的 Razor 代码片段。这是我喜欢 Razor 语法的原因之一，我不仅可以运用我现有的 C# 技能，还可以使用所有能够让我成为高效开发人员的语言特性。

@using static System.Runtime.InteropServices.RuntimeInformation

<div class="built-with">
    @FrameworkDescription
</div>
Enter fullscreen mode Exit fullscreen mode

没错，你没有看错，这实际上是一个using static声明——这意味着该类型的所有静态成员都System.Runtime.InteropServices.RuntimeInformation可以使用，而无需使用类型限定符。我可以使用强大的模板引擎将 HTML 和 C# 无缝地结合在一起，从而创建富内容。这只是一个简单的例子，但还有很多其他例子。你的想象力以及围绕 HTML 和 C# 语义的结构限制了你。当它被渲染为 HTML 时，你最终会得到一个<div>包含 .NET 框架描述的元素。我喜欢在我的 .NET 应用中看到运行时版本💜。

生成的 HTML：

<div class="built-with"> 
.NET 6.0.0-preview.7.21377.19
</div>
Enter fullscreen mode Exit fullscreen mode

显式过渡 - Jon Galloway

在大多数情况下，Razor 会在 C# 和 HTML 之间隐式转换，无需您费心。有时，在 C# 代码中显式地将代码块调用为内联 HTML 文本会很有用。您可以使用显式转换来实现这一点。例如，如果您在 C# 代码块中编写 JavaScript 或 CSS，这将非常有用。

您可以使用<text></text>标签结构来划分一个块，也可以将其用于@:单行。

<script>
@for(int i = 0; i < 10; i++) 
{
    @:console.log(@i);
}
</script>
Enter fullscreen mode Exit fullscreen mode

这将呈现：

<script>
    console.log(0);
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    console.log(5);
    console.log(6);
    console.log(7);
    console.log(8);
    console.log(9);
</script>
Enter fullscreen mode Exit fullscreen mode

这对于渲染包含服务器上填充的数据的图表等操作非常方便，如下所示：

@section Scripts {
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
    window.onload = function () {
        var dataPoints = [];
        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            data: [
                {

                    dataPoints: dataPoints
                }
            ]
        });
        @{Random rand = new Random();}
        @for(int i = 0; i < 10; i++)
        {
            @:dataPoints.push({ x: @i, y: @rand.Next(0, 100) });
        }

        chart.render();
    };
</script>
}
Enter fullscreen mode Exit fullscreen mode

文档：ASP.NET Core 中的视图依赖注入

详细了解 Razor 和 Razor Pages

想了解更多关于 Razor 和 Razor Pages 的知识？快来观看这个 2 小时的入门视频：一起学习 .NET：Razor Pages。

你呢？

有你喜欢的 Razor 功能想分享吗？欢迎在评论区留言！

文章来源：https://dev.to/dotnet/the-net-team-s-favorite-razor-features-5b72
Devto 翻译
PREV
使用 Go 语言实现 Google 的 Oauth2
NEXT
在.Net Core中测试