Skip to main content

创建一个简单的Blazor TodoList应用

分类:  Blazor入门 ◆ 标签:  #Asp.Net core基础 #.Net #Web #Blazor ◆ 发布于: 2023-05-21 21:57:48

前面我们通过几篇文件介绍了什么是Blazor以及给出了我们的hello Word, 同时介绍了典型的部署Server和WebAssembly模板创建出来的文件结构是什么样的，特别是创建不同的部署模型，应用是如何配置和启用的， 如果您对这些概念还不是很清楚，建议您通过之前的文章复习一下。

今天我们使用基于Blazor Server的部署模型创建一个简单的TodoList应用，虽然这个应用非常简单，但是基本包含了Blazor应用开发的很多要点：

  • 如何定义应用默认的Layout。

  • 如何使用预定义的组件。

  • 如何新建一个自定义的组件。

  • 如何进行数据绑定。

  • 如何监听一个事件。

  • 如何使用单独的CSS，对自定义的组件定义外观。

  • 深入的理解基于Blazor的UI渲染。

 

该教程的源代码，您可以从这里下载：
https://github.com/hylinux/AzureDeveloperCN/tree/main/TodoList

该项目运行的结果图:

创建应用

dotnet new blazorserve -o TodoList
使用模板BlazorServer 创建一个应用，名字叫做TodoList,  创建完成后，你可以进入目录TodoList, 然后尝试浏览一下使用模板BlazorServer创建出来的项目结构以及文件结构是什么样子的，可以仔细的观察一下Program.cs,     Startup.cs, 以及App.razor 等文件是整个应用最为重要的运行入口。

定义默认的Layout

在创建应用的时候，我们就提到整个应用的入口就是Program.cs,      在该文件中，创建一个普通的webhost, 然后将该webhost通过Startup.cs进行配置。

Startup.cs里有两个方法最为重要:ConfigureServer和Configure,  为了运行基于BlazorServer运行的Blazor应用，请注意只需要在Startup.cs中添加划红线的语句就可以了。这其中，添加RazorPages方法，AddServerSideBlazor() 扩展方法，以及最后在endpoint里配置，都是为了使得一个基于Blazor Server技术构架的应用正常运行，要查看自己的项目是否是可以运行Blazor Server的应用，最低要检查这几个设定和步骤。


从上述文件可以观察到，从mappingendpoint的时候开始，整个应用的首页是位于项目根目录下的Pages里的_Host.cshtml,  打开_Host.cshtml 文件可以观察到如下所示：


从上述划红线处可以看到：

  1. 该页面是一个Razor Pages类型的可以承接路由的页面。

  2. 指定了该Razor Pages页面的名称空间

  3. 并且由于该文件是一个Razor Page项目中的页面，同时也是在部署的时候用户访问根目录的入口文件，也即是首页，相当于我们之前的index.html,     index.jsp, index.asp, index.php 这些页面的作用，同时也需要注意到部署为blazor server入口文件是_Host.cshtml,  但是部署为webassembly是index.html.

  4. 从<component     type="typeof(App)"> 这一行指明我们首个组件，也即是App.razor.


理解App.razor的内容


从App.razor的内容可以学习到，整个App.razor 直接使用了Blazor内置的组件Router, 该组件定义了项目需要使用的程序集，也即typeof(Program).Assembly,  之后关于项目所需要的类，名称空间，接口等信息全是从该程序集搜索，另外也可以观察到在blazor中应用组件的模式均使用html形式的标记形式，

例如
<Router.…>
      <Found>
     </Found>

     <NotFound>
     </NotFound>

</Route>

同时需要注意在Found组件内，继续使用了组件<RouteView> 同时指定了默认的Layout组件为MainLayout组件。

MainLayout.razor 内容


请注意在Mainlayout组件中，使用了内置的组件<NavMenu/> 代表渲染左侧侧菜单。同时在Layout文件中，使用@Body代表渲染内容。

如何使用预定义的组件

关于如何使用预定义的组件，前面我也讲述过了，对于Blazor而言，在UI的部分直接以类似HTML标记一样的语法使用预定义的组件。

如何新建一个自定义的组件

下面我们将自定义一个组件，并逐渐丰富该组件的内容, 完成我们上述如结果图所示的功能。进入到项目的根目录，运行如下的命令:

dotnetnew razorcomponent -n Todo -o Pages

通过该命令即创建了一个新的组件，该命令的意思是创建一个新的razor组件，-n 指定该组件的名称为Todo,  -o 指定该组件输出到 Pages目录，这里有一个默认的约定需要遵守，即所有的自定义的带路由的组件必须位于项目根目录下的Pages目录下，可以通过在Startup.cs 中ConfigureServer中传递选项参数进行更改，目前我们项目直接使用这个就好。

还有需要注意的是组件名称首字母必须大写！！！


使用VS Code 打开该文件的内容，我们一一讲解要点:

首先看自定义组件的三个主要的部分：

  1. 以@+关键字部分：主要用于使用Blazor关键字指定该组件的特性，例如@page 指定该组件是带路由功能的。@using 指令引入其他程序集中名称空间的包， @inject 通过DI引入Service 类，等等。

  2. 定义UI的部分： 这个部分使用HTML 标记和C#代码以及Blazor 指令，代码块来定义UI呈现的外观，

  3. 定义代码部分：在Blazor中使用@code { } 代码块来定义 代码部分，一个组件中可以拥有多个代码块，可以定义filed, 属性，方法三个类型的内容。

 这里有一个很重要的概念需要先期理解：Razor 组件的目的是为了UI输出。所有在Razor组件中的代码都只有两个目的一个是输出UI内容，一个不输出。因此在第二部分中，Razor的表达式一定是要输出内容的，这里大家如果对Razor不熟悉的话，有必要再参考一下前面我翻译整理的Razor 语法参考。


数据绑定

数据绑定是什么？数据绑定的意思是在UI上的一个组件值和组件的属性说这是filed是一起联动的，改变组件filed或者属性的值，UI上的组件值也会相应改变，同时会触发组件重新渲染，这个设计很重要，后面我们就会看到。图片上标红2的地方，我们通过razor 表达式绑定了值，我们并没有在其上绑定任何监听的事件，但是点击列表中的checkbox, 这里的表达值是自动重新计算的，这就是绑定的魅力，希望大家好好理解。


当前显示3， 点击checkbox,  变成4， 但是我们并没有像在javascript中一样需要写监听的事件，然后由事件更改当前已经完成的事件数，这就是数据绑定的结果：


当然数据绑定的模式本身很简单，直接使用指令@bind就可以完成绑定了。例如4， 5， 6都是数据绑定的实例。


监听事件

监听事件以@on{事件名称} = "方法名” 定义一个事件监听，这些事件例如click事件，双击事件，移动鼠标，数据更新等等。部分支持事件参数的事件描述:


如何使用单独的CSS对自定义组件定义全新外观

如果需要对自定义的组件外观进行重新定义，只需要定义和Razor组件一样名字的css文件，并放置在同一个目录就可以了，例如我们自定义的组件名称叫: Todo.razor, 其CSS文件名称即为Todo.razor.css, 然后在该CSS文件中定义CSS外观就可以了。

Blazor会将组件的CSS自定义的独立文件编译成一个大的CSS文件，并将会重新定义CSS的名字，形成独立的名字，不会和其他组件的定义冲突，如下是使用Edge Developer tool 观察到CSS定义：


同时Blazor编译后的各个组件的独立的CSS会被放入文件{项目名}.styles.css 的文件中，例如本项目是:

TodoList.styles.css


如何深入理解Blazor框架是如何对UI进行渲染

这里要理解的是对于UI的渲染，Blazor 会将所有的组件在内存形成一个基于DOM的图形树，当有组件UI更新事件或者Blazor框架直接会和浏览器的DOM进行沟通，从而直接渲染页面。