(一)Asp.Net Core Blazor 入门

 

首先确保你已经具备相应的环境,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输入框中绑定该字段,然后实现添加方法,最终代码如下:

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

 接下来我们再升级系,每个待办项的标题文本都可以编辑,复选框可以帮助用户跟踪已完成的项。 为每个待办项添加一个复选框输入,并将它的值绑定到 IsDone 属性。 将 @item.Title 更改为绑定到 @item.Title 的 <input> 元素:

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

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

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

原文地址:https://www.cnblogs.com/njabsky/p/13893780.html