首先确保你已经具备相应的环境，VS2019和.NET Core SDK，学习的话，最好持续更新到最新版本。

其次推荐到微软官网去学习，文档资料也都能在官方文档中找到，这将是一个系列的文章，本人将持续的关注blazor的发展并持续学习。

第一步，找到Blazor应用

第二步，给项目改一个名称，这里就叫BlazorApp

第三步，框架选择.NET5.0,如果没有选择.net core 3.1也是一样的，Server和WebAssembly App 入门学习都是一样的，我认为未来还是wasm

创建好的项目如下

• Program.cs 是启动服务器的应用程序的入口点。
• App.razor 是应用程序的根组件。
• BlazorApp/Pages目录包含该应用程序的一些示例页面。

我们直接运行看下效果

在左侧导航栏看到有三个自带的页面，下面我们就来入门blazor。

组件

 首先看下上面的首页，就是Pages/Index.razor这个页面，我们找到并打开它

 这里有一个点就是@page指令，该指令后面跟的就是该页面的路由地址，用来指定路由的。

该组件显示了一些简单的信息，我们都很熟悉，<SurveyPrompt Title="How is Blazor working for you?" />这一段呢我们暂时先不管，它是一个组件。

我们再来看下导航栏中的第二个页面

这个页面有一个按钮，点击按钮的时候我们发现没有刷新页面当前数量的数字就会累加，通常在网页中，这种操作都是需要JavaScript来完成，但是在blazor中我们可以通过C#来实现了。

我们找到Counter组件对应的实现页面Pages/Counter.razor

 @page "/counter" 指令与页面中的地址栏相匹配，说明@page指令指定的就是请求的路由地址。

使用@code{ }来写C#代码，使用@onclick绑定点击事件的方法

每次在点击按钮的时候：

• 该onclick事件被触发。
• 该IncrementCount方法被调用。
• 在currentCount递增。
• 渲染该组件以显示更新的计数。

接下来我们就来试一下组件，我们把这个Counter组件添加到首页中，如下所示

 Ctrl + F5 运行看下效果，发现确实把组件显示了出来并且点击效果也是一样的

 组件的时候我们已经知道了，接下来我们来试着给组件中增加一个参数，并且传递参数给组件。

我们来改造下Counter.razor组件，在里面增加了一个IncrementAmount参数并且给了默认值1，并且修改了IncrementCount方法，使用了该参数。

 接下来我们运行下，看看效果，首页和这个Counter页都和原来一样，没有改变。

我们再回到首页的对应页面，修改下首页添加的Counter组件，把刚才的参数传递进去，修改后如下

 这时候我们保存再次运行，我们点击首页的这个按钮发现已经是10倍的增加了，说明传递参数有效，再看看原来的Counter组件页面，还是原来的状态。

至此，恭喜你，你已经成功的构建了一个blazor应用程序！

在这个示例中，我们了解了页面组件，如何使用组件，以及给属性定义参数并在使用组件时给组件传参的方法。

下面我们自己新建一个组件，待办事项的组件，通过该组件把上面的所有内容进行一个总结。

 然后再在项目的根目录下新建一个TodoItem.cs类，内容如下：

 再回到刚才新建的Todo.razor页面

首先在顶部指定@page路由地址，然后再@code代码段中添加一个List<TodoItem>类型的todos属性，最后在页面中循环列出这个todos的数据。

然后我们再添加一个文本框用于输入待办事项，并且在添加一个按钮用于把输入添加到上面的列表中，最终代码如下：

 我们暂时还不实现添加按钮的功能，先运行看下效果，当然，先把当前组件添加到导航栏，在Shared文件夹中找到NavMenu.razor组件，直接复制上一个li并稍作修改即可

 好，运行，看看效果，发现导航栏已经有了，点击页面显示正常，只是点击按钮没有反应，应为我们还没有实现点击事件

以上呢还都是已知的内容，接下来我们就来实现添加待办事项，并且引入一个新的东西，双向绑定。

我们回到Todo.razor组件，为button按钮添加一个点击事件AddTodo，然后再code代码段中添加一个AddTodo方法。

接下来就是实现该添加方法。

在code代码段中添加一个newTodo字段，然后在input输入框中绑定该字段，然后实现添加方法，最终代码如下：

 运行后输入一段内容点击添加是可以的

 接下来我们再升级系，将 @item.Title 更改为绑定到 @item.Title 的 <input> 元素：

为了看到绑定的勾选完成的待办事项，我们在标题中增加一个未完成的待办事项的数量统计，最终代码如下：

 运行看下效果，状态是变化的，待办事项统计数量也在变化

 到目前为止，blazor的入门你已经完成了