• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Blazor带我重玩前端(五)

开发技术 开发技术 1个月前 (08-31) 32次浏览

概述

本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇。

我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的C#代码。

在此,先补充一下该页面的原始代码:

   1:  @page "/"
   2:  @layout MyLayout
   3:  <h1>Hello, world!</h1>
   4:   
   5:  Welcome to your new app.
   6:   
   7:  <SurveyPrompt Title="How is Blazor working for you?" />

Index.razor页面在项目编译后会生成Index.razor.g.cs文件,其位置如图所示,在obj文件夹下面:

Blazor带我重玩前端(五)

具体的源码如下:

   1:  [Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MyLayout))]
   2:  [Microsoft.AspNetCore.Components.RouteAttribute("/")]
   3:  public partial class Index : Microsoft.AspNetCore.Components.ComponentBase
   4:  {
   5:      #pragma warning disable 1998
   6:      protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
   7:      {
   8:          __builder.AddMarkupContent(0, "<h1>Hello, world!</h1>rnrnWelcome to your new app.rnrn");
   9:          __builder.OpenComponent<BlazorApp.Client.Shared.SurveyPrompt>(1);
  10:          __builder.AddAttribute(2, "Title", "How is Blazor working for you?");
  11:          __builder.CloseComponent();
  12:      }
  13:      #pragma warning restore 1998
  14:  }

可以看到,以上代码并不难理解,同时它还有两个特性,一个是布局的标识,一个是路由的标识。紧接着就是该类重写了BuildRenderTree方法,这个以后会说。需要提醒的是,大家在写Blazor项目遇到问题时,可以多查看razor页面所生成的C#代码。

创建简单组件

需要注意的是,在Blazor项目中,包括razor页面,布局以及组件都隐式或显示的继承自ComponentBase的。

在Blazor.Client项目的Shared文件夹中,我们创建一个Components文件夹用于存放我们自定义的组件。

(1)创建页面,并暂且先使用下面的默认内容

Blazor带我重玩前端(五)

(2)然后在_Imports.razor文件中添加@using BlazorApp.Client.Shared.Components,以使得该组件可以全局使用,从这个引用的命名空间来看,我们新建的组件的命名空间默认就是文件所在的位置

Blazor带我重玩前端(五)

(3)在Index.razor页面使用

Blazor带我重玩前端(五)

(4)运行后的结果如图所示

Blazor带我重玩前端(五)

单项绑定

如果读者接触了比较多的前端框架,可能会对理解单项绑定有很大的帮助,这实际上一种插值或者说是动态数据的占位(变量)。

大部分情况下,我们都希望我们的组件是可以输出动态内容,那么我们应该如何实现呢?这个时候我们就需要在页面上写一写C#代码了。

(1)在MyComponent组件中添加参数,并标记[Parameter]特性

Blazor带我重玩前端(五)

(2)在Index页面上,添加按钮和事件功能,可以参考Counter页面的按钮

Blazor带我重玩前端(五)

这个页面的功能我们暂时只关注如何传值即可,也就是在调用MyComponent组件的时候,调用其属性Counter并赋值。

(3)运行效果如下所示

Blazor带我重玩前端(五)

组件事件

添加组件自定义事件,其实就是声明一个EventCallback<int>类型的组件参数,如下代码所示:

   1:  [Parameter]
   2:  public EventCallback<int> EventSample { get; set; }

(1)自定义组件修改

增加一个计数方法,可以参考Counter中代码。在IncrementCount方法中,采用await ClickCountCallback.InvokeAsync(currentCount*2)方式传值给Index.Razor页面,页面源码

   1:  @*<h3>My Component</h3>*@
   2:   
   3:  这里是自定义组件的区域,我点击了几次 <strong style="color: red">@currentCount</strong>
   4:  <br>
   5:  <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   6:   
   7:  @code {
   8:      private int currentCount { get; set; }
   9:   
  10:      [Parameter]
  11:      public EventCallback<int> ClickCountCallback { get; set; }
  12:   
  13:      private async Task IncrementCount()
  14:      {
  15:          currentCount++;
  16:          await ClickCountCallback.InvokeAsync(currentCount*2);
  17:      }
  18:  }

(2)Index.razor页面

   1:  @page "/"
   2:  @layout MyLayout
   3:  <h1>&nbsp;</h1>
   4:   
   5:  @*Welcome to your new app.*@
   6:   
   7:  @*<SurveyPrompt Title="How is Blazor working for you?" />*@
   8:   
   9:  <h2>Index页面的CurrentCount=<strong style="color: red">@currentCount</strong></h2>
  10:   
  11:  <br>
  12:  <MyComponent ClickCountCallback="IncrementCount1" />
  13:  <br />
  14:   
  15:  @code {
  16:      private int currentCount;
  17:   
  18:      private void IncrementCount1(int value)
  19:      {
  20:          currentCount = value;
  21:      }
  22:  }

使用currentCount接收自定义组件中传来的值。

运行效果如下:

Blazor带我重玩前端(五)

Index.razor页面生成的C#源码如下所示:

Blazor带我重玩前端(五)

会往RenderTreeBuilder对象中添加AddAttribute,用于接收自定义组件回调过来的值。





喜欢 (0)