Blazor 项目安装创建步骤

1.安装 Blazor环境

Blazor服务器端和WebAssembly现在都作为.NET Core 3.2.0的一部分提供。现在，安装Blazor就像安装Visual Studio版本16.6或更高版本一样简单！您可以通过以下链接下载最新版本的Visual Studio。

安装时，请确保在“工作负载”选项卡下选择选项ASP.NET和Web开发。

2.创建一个新项目

• 打开Visual Studio预览。
• 单击创建一个新项目。
• 选择Blazor应用。
  
• 点击下一步。
• 输入项目名称，例如MyFirstBlazorApp。
• 单击创建。
  
• 选择Blazor WebAssembly应用 。
• 选中“ ASP.NET Core托管”复选框。
• 单击创建。

3.创建页面

在Blazor中，页面是可以通过URL进行访问的顶层视图。在本练习中，我们将从头开始重新创建Counter.razor页面。

• 在“解决方案资源管理器”窗口中，展开MyFirstBlazorApp.Client项目。
• 展开页面文件夹。
• 右键单击Counter.razor并将其删除。
• 用鼠标右键单击Pages文件夹。
• 选择Add->Razor Page 页面，然后创建一个名为Counter.razor的新页面。如果收到“scaffolding”错误，则可以选择另一种文件格式，并给它一个.razor文件扩展名。

Blazor页面是一个独立的视图。我们可以同时包含HTML和Razor视图标记，以及事件等所需的任何C＃方法。使用以下内容启动新的Blazor页面。

    @page "/counter"
    <h1>Counter</h1>
    <p>The counter value is @counter</p>
    @code {
         private int counter = 42;
    }

第一行标识呈现此页面中的内容所需的URL。更高级的路由技术将在“路由”部分中介绍。

这之后是一些标准HTML，带有页面标题的H1和其中包含一些内容的段落。与标准ASP.NET Razor页面一样，可以通过使用@符号将其转义来插入可编程内容。在这种情况下，我们将显示counter私有成员的变量。

最后，声明页面的·@code·部分。这是我们编写属性/方法，事件处理程序或其他所需内容的地方。这是我们的counter私有成员的声明和初始值的设置。运行该应用程序，单击页面左侧的“Counter”链接，您应该看到类似以下内容的内容：

与页面互动

到目前为止，我们已经绑定了页面的私有成员，以便在渲染Razor视图时将其值输出为HTML。接下来，我们将更新该值作为对用户操作的响应。

更改Razor视图以包括以下“按钮”标记。

<button class="btn btn-primary" @onclick=IncrementCounter>Increment counter</button>

这将添加一个HTML按钮，并使用一些Bootstrap样式使它看起来更漂亮。它还将其onclick事件设置为执行名为IncrementCounter的方法。该方法的实现非常简单，应放在@code部分中。

    @page "/counter"
    <h1>Counter</h1>
    <p>The counter value is @counter</p>
    <button class="btn btn-primary" @onclick=IncrementCounter>Increment counter</button>
    @code {
      private int counter = 42;
      private void IncrementCounter()
      {
        counter++;
      }
    }

现在再次运行该应用程序，导航到“Counter”页面，然后单击按钮以查看页面更新中的值。