Blazor基础知识：Visual Studio 2022 中的Blazor开发入门

最新推荐文章于 2024-07-18 10:07:03 发布

寒冰屋

最新推荐文章于 2024-07-18 10:07:03 发布

阅读量424

点赞数 1

分类专栏： ASP.NET CORE 架构及框架文章标签： visual studio ide blazor 2022

原文链接：https://www.telerik.com/blogs/blazor-basics-getting-started-blazor-development-visual-studio-2022

版权

ASP.NET CORE 同时被 2 个专栏收录

1110 篇文章 54 订阅

订阅专栏

架构及框架

628 篇文章 16 订阅

订阅专栏

设置Visual Studio for Blazor开发

Visual Studio 2022中的Blazor入门：设置开发环境、创建第一个Blazor Server项目、导航项目结构并了解开发生命周期。

在 Blazor基础知识系列的第一篇文章中，我们了解了Blazor是什么、不是什么，以及它的工作原理。

现在，我们已准备好设置开发环境，创建我们的第一个 Blazor Server项目，浏览项目结构并了解开发生命周期。

设置Visual Studio for Blazor开发

可以使用首选的IDE进行Blazor开发。但是，我建议使用Visual Studio以获得最佳的Blazor开发工具支持。

Visual Studio Community Edition 免费供个人使用，您可以将其用于100万美元以下公司的商业开发中。

对于新的或现有的Visual Studio安装，请确保已安装ASP.NET和Web开发工作负载。开始使用Blazor开发所需的一切都包含在此工作负载中。

创建第一个Blazor Server项目

在Visual Studio中，我们创建一个新项目，然后选择“Blazor Server应用”项目模板。

对于第一个项目，我建议选择Blazor Server而不是Blazor WebAssembly，因为项目结构更简单，并且在Blazor开发旅程的后期使用Blazor WebAssembly项目会很容易。

为项目命名，在硬盘驱动器上选择一个位置，然后按“下一步”按钮转到“其他信息”对话框。

在“其他信息”对话框中，选择最新版本的.NET作为框架。

我们不需要对此项目进行身份验证，但支持的选项包括个人帐户、Microsoft标识平台和Windows身份验证。当您需要实现身份验证时，这些模板很有价值。

我们将使用HTTPS，不需要Docker，并希望在Program.cs文件中使用顶级语句。可以在对话框中保留所有默认值，然后按“创建”按钮，Visual Studio 将为您创建项目。

项目概述——浏览源代码

Blazor Server项目由单个项目组成。当然，您可以像使用任何其他应用程序类型一样向其他.NET项目添加依赖项。

“数据”文件夹包含Blazor组件中使用的数据类型和服务。这些文件不包含任何特定于Blazor的内容。例如，该WeatherForecastService类如下所示：

public class WeatherForecastService
{
  private static readonly string[] Summaries = new[]
  {
      "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", 
      "Sweltering", "Scorching"
  };

  public Task<WeatherForecast[]> GetForecastAsync(DateOnly startDate)
  {
      return Task.FromResult(Enumerable.Range(1, 5).Select(index => 
      new WeatherForecast
      {
          Date = startDate.AddDays(index),
          TemperatureC = Random.Shared.Next(-20, 55),
          Summary = Summaries[Random.Shared.Next(Summaries.Length)]
      }).ToArray());
  }
}

它包含一个随机生成该WeatherForecast类型的对象并返回列表的GetForecastAsync方法。

用于Blazor应用程序的常规对象和数据类型也可以位于不同的项目中，并作为项目引用添加到Blazor应用程序中。在希望与另一个(可能是现有的)应用程序共享数据对象或服务的场景中，这是有意义的。

“Shared”文件夹包含可在不同页面上使用的Blazor组件。默认模板还会将MainLayout布局组件放在Shared文件夹中。在我的项目中，我创造一个专用文件夹，用于保存所有布局组件，但这取决于开发人员的偏好。

Pages 文件夹包含充当页面的Blazor组件。我们稍后将更详细地探讨一个页面。

wwwroot 文件夹包含可从正在运行的Web应用程序访问的静态资产。它包含图像，字体，CSS库和自定义CSS定义。

项目根文件夹包含以下文件：

_Imports.razor：此文件包含所有 using 语句，这些语句导入所有Blazor组件中可用的命名空间。除了ASP.NET Core命名空间之外，它还包括两个using语句，特定于项目的命名空间。
App.razor：此文件包含路由器定义。路由在Blazor中按约定完成。我们不需要为要创建的每条路由添加条目。但是，您可以指定现有布局的默认布局页面和不存在的页面的路由。对于大多数初学者项目，我们不会更改此文件的内容。
Program.cs：此文件包含启动.NET应用程序所需的ASP.NET Core代码。在这里，您将服务注册到依赖注入容器，添加中间件，设置路由并最终启动应用程序。

首次启动Blazor应用程序

在仔细查看Blazor组件和页面之前，让我们先启动应用程序，大致了解应用程序提供的功能。在Visual Studio中，可以使用 F5 启动应用程序。

Visual Studio启动本地Web服务器，并从本地端口为应用程序提供服务。

应用程序具有在MainLayout.razor文件中定义的两列布局。该菜单包含指向三个页面的链接：索引页、计数器页和FetchData页。

“Fetch Data”菜单将我们引导至“FetchData”页面，该页面包含一个包含四列的表和前面看到的WeatherData类的数据。

是什么使Blazor组件成为页面？

Blazor使用指令作为简化开发的智能工具。指令以 @符号开头，后跟指令名称。让我们看一下Pages/FetchData.razor组件。

@page "/fetchdata"
@using BlazorDemo.Data
@inject WeatherForecastService ForecastService

@page指令以声明方式将组件定义为页面。它还将页面添加到路由器，并使用定义为page指令参数的URL对其进行访问。

@using指令允许我们导入可以在整个组件中使用的命名空间。例如，FetchData组件使用BlazorDemo.Data命名空间，其包含在项目的/Data文件夹中定义的数据对象。

@inject指令提供依赖项容器中类型的实例。它是Blazor组件的依赖项注入机制。在此示例中，我们注入WeatherForecastService类型并使创建的实例作为ForecastService变量在整个组件中可用。

<PageTitle>Weather forecast</PageTitle>

该PageTitle组件是一个组件，而不是一个指令。但是，它同样有用。它允许我们方便地定义浏览器选项卡或窗口中显示的页面标题。

编辑Blazor组件

我们打开FetchData.razor文件以编辑Blazor组件。

首先，让我们探讨一下Blazor组件的结构。模板部分使用纯HTML和一些C#代码片段。C#代码始终以@符号开头。

@if (forecasts == null)
{
  <p><em>Loading...</em></p>
}
else
{
  <table class="table">
    <thead>
      <tr>
        <th>Date</th>
        <th>Temp. (C)</th>
        <th>Temp. (F)</th>
        <th>Summary</th>
      </tr>
      </thead>
      <tbody>
        @foreach (var forecast in forecasts)
        {
          <tr>
            <td>@forecast.Date.ToShortDateString()</td>
            <td>@forecast.TemperatureC</td>
            <td>@forecast.TemperatureF</td>
            <td>@forecast.Summary</td>
          </tr>
        }
      </tbody>
  </table>
}

例如，if/else检查数据是否已加载。如果有数据，组件将显示HTML表，否则将显示“正在加载...”发短信。

@code {
  private WeatherForecast[]? forecasts;

  protected override async Task OnInitializedAsync()
  {
    forecasts = await ForecastService.GetForecastAsync(
        DateOnly.FromDateTime(DateTime.Now));
  }
}

模板部分下方是用@code指令引入的代码块。它包含支持组件模板的C#类。我们可以定义可以在模板中访问的变量，例如此示例中的forecasts变量。

C#类使用回调方法将其挂钩到Blazor组件的生命周期中。此示例使用该OnInitializedAsync方法执行代码以从服务加载数据当组件已初始化时。

正如你所看到的，绑定机制对开发人员非常友好。我们可以在模板的代码块中使用以@符号为前缀的变量。例如，我们看到的foreach，其循环通过所有预测项目，对于每个项目，它会向HTML表添加一行。

我们还可以在数据对象的属性上使用方法，例如ToShortDateString格式化输出。

使用.NET热重载

虽然单页Web应用程序通常在项目开始时启动速度非常快，但添加每个组件和每个页面通常需要更长的时间。

幸运的是，基于.NET平台，我们可以在使用Blazor组件时使用.NET热重载。

例如，可以注释掉FetchData组件表中的一列，然后使用Visual Studio工具栏中的火焰图标或按键盘快捷键 Alt+F10 执行.NET热重载。

使用.NET热重载时，应用程序会继续运行，并在运行时修补DLL。您可以立即看到Web浏览器中反映的更改。

它允许快速开发，因为开发人员的生命周期非常短。

但是，请注意，目前并不支持所有操作。根据更改，您可能仍需要不时重新启动应用程序。但它绝对可以节省日常Blazor组件的大量时间发展。

https://www.telerik.com/blogs/blazor-basics-getting-started-blazor-development-visual-studio-2022

寒冰屋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Blazor基础知识：Visual Studio 2022 中的Blazor开发入门

Visual Studio 2022中的Blazor入门：设置开发环境、创建第一个Blazor Server项目、导航项目结构并了解开发生命周期。
复制链接

扫一扫

专栏目录