• Blazor带我重玩前端(五)


    概述

    本文主要讨论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文件夹下面:

    1

    具体的源码如下:

       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>
    
    Welcome to your new app.
    
    ");
       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)创建页面,并暂且先使用下面的默认内容

    2

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

    3

    (3)在Index.razor页面使用

    4

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

    5

    单项绑定

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

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

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

    6

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

    7

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

    (3)运行效果如下所示

    1


    组件事件

    添加组件自定义事件,其实就是声明一个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接收自定义组件中传来的值。

    运行效果如下:

    2

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

    8

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





  • 相关阅读:
    路由的props参数
    记录基于Vue2.0实现后台系统权限控制
    Object.keys()的详解和用法
    git checkout 命令所有参数用法详解
    JSONP原理及实现2
    珠峰vue笔记
    fastjson漏洞分析历史漏洞(图解)
    github 查询个人邮箱 (备忘)
    nmap 请求修改ua (nmap发送http请求的多种方式)
    如何有效进行回顾会议(上)?
  • 原文地址:https://www.cnblogs.com/edison0621/p/13586715.html
Copyright © 2020-2023  润新知