通过Blazor使用C#开发SPA单页面应用程序(3)

  • 时间:
  • 浏览:0
  • 来源:大发uu快3_uu快3骗局_大发uu快3骗局

通过Blazor使用C#开发SPA单页面应用进程(1) - 简介及特点

通过Blazor使用C#开发SPA单页面应用进程(2) - 开发环境

通过Blazor使用C#开发SPA单页面应用进程(3) - 基础知识

通过Blazor使用C#开发SPA单页面应用进程(4) - Ant Design Button

今天亲戚亲戚朋友来看看Blazor开发的有些基本知识。


 Blazor中组件的基本特征可不时需分为八个累积,如下所示:

//Counter.razor

//Directives section 指令累积 @page "/counter" //Razor HTML section Razor HTML累积 <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" onclick="@IncrementCount">Click me</button> //code sections 功能累积 @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }

  指令累积:

  • 路由   - @page
  • DI     - @inject
  • 导入库 - @using

  Razor HTML 累积:

        Razor HTML语法是C#代码与HTML的结合。此累积最终在浏览器中呈现。

  指令累积:

       件中的函数累积中有 用户操作函数(事件措施),局部变量和从/向父/子组件传递的属性。

  当然但是我想要,这累积也可不时需单独写道类文件中。


   亲戚亲戚朋友看看属性和参数,

<button id="btnClickMe" class="btn btn-primary" 
onclick="@IncrementCount">Click me</button>

  在这里,在按钮元素的id,class和onclick被称为HTML属性。

  这类地,组件的定义措施与HTML元素相同,

 //MyDemo.razor

@page "/myDome"

<h3>MyDemo</h3>

<ChildComponent Title="来自MyDemo"></ChildComponent>

  在Child Component中,该属性Title与装饰的子组件函数累积中的属性匹配 [Parameter] 关键字。

//ChildComponent.razor//Child Component
<div>
    <p>标题 : @Title</p>
</div>
@code {
    [Parameter]
    private string Title { get; set; }
}

 运行效果如下:


  Blazor的数据绑定一并提供了单向绑定和双向绑定四种 机制。

  (一)单向绑定:

  单向绑定在Blazor中简单直接,不会任何UI刷新。还记得Counter示例吗,他显示了单向数据绑定,

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

  此处 @currentCount 值根据点击按钮的数量递增Click me。<p>标记元素中的值会自动刷新,不会任何组件刷新。

   (二)双向绑定:

 在Blazor中可不时需实现双向绑定,与有些流行的JS语言框架相比,Blazor为双向绑定提供了多种实现措施,Blazor可不时需优雅地进行编写。

 (1) @bind属性在Blazor中提供双向数据绑定。下面的示例复选框演示在同一组件中的bind属性,

@page "/myDome"


<span>请选者

:</span>
<input type="checkbox" @bind="myChecked" />
<p>我选者

了 : @myChecked.ToString()</p>


@code {
    bool myChecked { get; set; } = true;
}

   运行效果如下,是就有 很简单,很优雅。

   再来一个 多控制样式表的例子看看,

@page "/myDome"

<p>
    <span>显示/隐藏:</span>
    <input type="checkbox" @bind="myChecked" />
</p>
<p display:@(myChecked ? "inline":"none")">看得人我了</p>


@code {
    bool myChecked { get; set; } = true;
}

 (2) @bind属性在Blazor中提供双向数据绑定,但是只提供了默认的绑定事件,但是们想在不同的时机触发双向绑定该咋整 办呢,别急同样很简单的,亲戚亲戚朋友看看下面的代码,展示了几种绑定实例,

@page "/myDome"

<p>
    <span>onchange 措施一</span>
    <input @bind="changeString" />
</p>
<p>
    <span>onchange 措施二</span>
    <input type="text"
           value="@changeString"
           @onchange="@((UIChangeEventArgs _e) => changeString = _e.Value.ToString())" />
</p>
<p>
    <span>onchange 措施三</span>
    <input @bind-value="changeString" @bind-value:event="onchange" />
</p>
<p>
    <span>oninput</span>
    <input @bind-value="changeString" @bind-value:event="oninput" />
</p>
<p>这是我输入的内容: @changeString</p>

@code {
    string changeString = "";
}

  运行效果如下,

    呈现组件时, input元素value的值来自changeString。 当用户在文本框中键入内容并抛妻弃子时, 将触发事件onchange更改changeString的值。原则上, @bind将表达式的当前值value与changeString相关联, 并使用注册的出理 进程来出理 更改。

    除了使用@bind语法出理 onchange事件之外, 还可不时需通过使用event参数 (@bind-value:event) 指定@bind-value属性, 使用有些事件来绑定属性或字段。这类第八个文本框但是绑定changeString采用oninput事件的属性,以到达在文本框的值更改时激发。

   (三)组件之间绑定:  

 (1)绑定可识别组件参数, @bind-{property}可在其中跨组件绑定属性值。

//MyDemo.razor

@page "/myDome"

<h1>Parent Component</h1>
<p>当前时间: @ParentNow</p>
<hr />

<ChildComponent @bind-Now="ParentNow" />

<hr />
<button class="btn btn-primary" @onclick="@ChangeTheYear">
    更新当前时间
</button>

@code {
    [Parameter]
    public DateTime ParentNow { get; set; } = DateTime.Now;

    private void ChangeTheYear()
    {
        ParentNow = DateTime.Now;
    }
}
//ChildComponent.razor

<h2>Child Component</h2>

<p>当前时间: @Now</p>

@code {
    [Parameter]
    public DateTime Now { get; set; }

    [Parameter]
    public EventCallback<DateTime> NowChanged { get; set; }
}

   以上代码中,子组件 (ChildComponent) 具一个 多多Now组件参数和NowChanged回调参数,父组件MyDemo使用ChildComponent并将ParentNow参数从父级绑定到子组件上Now的参数上,但是通过点击MyDemo中的"更新当前时间"按钮来更改属性的值, Now则将更新ChildComponent属性,将新值呈现在 UI中。其中,参数Now是可绑定的, 但是它具有NowChanged与参数类型匹配的伴随事件。按照约定,其等效于

<ChildComponent @bind-Now="ParentNow" @bind-Now:event="NowChanged" />

  运行效果:

 (2)组件之间传递的数据通过组件属性及其属性映射所处,此措施使用委托Action<T>类型。

//MyDemo.razor

@page "/myDome"

<h3>Parent Component</h3>
<p>来自Child组件: @childString</p>
<p>
    <input @bind="inputText" />
</p>
<hr />
<ChildComponent ToChild="@inputText"
                FromChild="@ReceivedFromChild">
</ChildComponent>

@code{
    private string inputText = "";
    private string childString = "";


    private void ReceivedFromChild(string str)
    {
        childString = str;
        StateHasChanged();
    }
}
//ChildComponent.razor

<h4>Child Component</h4>
<p>
    <input @bind="inputText" />
    <button @onclick="@PassToParent">显示到Parent组件</button>
</p>
<p>来自Parent组件 : @ToChild</p>

@code{
    [Parameter]
    private string ToChild { get; set; }

    [Parameter]
    Action<string> FromChild { get; set; }

    private string inputText = "";

    private void PassToParent()
    {
        FromChild(inputText);
    }
}

   这里FromChild是ChildComponent中的属性,属性使用Action<string>数据类型将值从Child传递给Parent Component。在Parent中,有相应的接收器函数ReceivedFromChild和字符串参数,这将在ChildComponent中按钮单击并触发通知时触发PassToParent,但是为了通知情形已在父组件中更改,亲戚亲戚朋友使用StateHasChanged()的内置Blazor函数通知组件其情形已更改。

  运行效果如下:


 (1) OnInitializedAsync和OnInitialized措施,执行代码来初始化组件。要执行异步操作,请在操作上使用OnInitializedAsync和await关键字。

(2)OnParametersSetAsync和OnParametersSet当组件已接收到的参数从其父和值被分配给属性被调用。什么措施在组件初始化后以及每次呈现组件时执行。

(3)OnAfterRenderAsync并OnAfterRender在组件完成渲染后调用。此时填充元素和组件引用。使用此阶段使用呈现的内容执行有些初始化步骤,这类激活对呈现的DOM元素进行操作的第三方JavaScript库。


  在有些情形下, 使用组件参数将数据从祖先组件流式传输到附属组件是不方便的, 尤其是在有多个组件层时。 级联值和参数通过提供四种 方便的措施, 使上级组件为其所有子代组件提供值。 级联值和参数还提供了四种 措施来协调组件。

  Blazor提供了四种 在整个RenderTree(所有组件)中传递数据的措施,使用CascadingValue和CascadingParameter不时需传递作为组件属性,但是可不时需通过装饰属性[CascadingParameter]而不会在RenderTree(子组件)中接收值[Parameter]。

//MyDemo.razor

@page "/myDome"

<p><span>姓名:</span><input @bind="@pName" /></p>
<p><span>年龄:</span><input @bind="@pAge" /></p>
<hr />
<CascadingValue Value="@pName" Name="ProfileName">
    <CascadingValue Value="@pAge" Name="ProfileAge">
        <ParentComponent />
    </CascadingValue>
</CascadingValue>

@code {
    private string pName { get; set; } = "张三";
    private int pAge { get; set; } = 35;
}
//ParentComponent.razor

<div background-color:darkgray">
    <p>Parent Component</p>
    <div padding:10px;">
        <ChildComponent />
    </div>
</div>
//ChildComponent.razor

<div background-color:beige">
    <p>Child Component</p>
    <p>输入的 姓名: @Name  , 年龄 : @Age.ToString()</p>
</div>

@code{
    [CascadingParameter(Name = "ProfileName")]
    string Name { get; set; }
    [CascadingParameter(Name = "ProfileAge")]
    int Age { get; set; }
}

  代码中MyDemo的姓名、年龄穿透ParentComponent直接级联到ChildComponent中。

  在这里CascadingParameter,Name参数时需与Name中有 CascadingValue组件的属性匹配,但是亲戚亲戚朋友越来越提到任何Name,则CascadingParameter中的变量类型与CascadingValue中的Value属性匹配。

  运行效果:

 


  亲戚亲戚朋友在看一个 多SPA中一个 多基本但不得劲要的功能路由。客户端路由可不时需通过使用@page指令装饰组件来在Blazor中完成。

@page "/myDome"
@page "/myDome/{text}"

  @page在上边的示例中应用了一个 多指令。

  第一个 多允许在越来越参数的情形下导航到组件。

  第八个@page指令采用{text}route参数并将值赋给Text属性。

好了今天Blazor的组件开发就先学习到这,有意犹未尽的可不时需查看官方文档深入学习。

猜你喜欢

不动代码和模板修改wordpress分类顺序

外理此问题 ,小编推荐使用插件大法。wordpress拥遇见你想到的和没想到的任何插件,这也是让朋友 这么喜爱它的意味着之一。另外须要补充的是,本文所说,是调整分类目录的顺

2020-02-18

南昌世界VR大会签约723亿

图:在二〇一九世界VR产业大会上,观众体验VR设备\新华社【大公报讯】据中新社报道:正在江西省会南昌举行的2019世界VR(虚拟现实)产业大会招商工作取得丰硕成果。官方统计数据

2020-02-18

ComicAiII 漫画批量下载工具|ComicAiII 漫画批量下载工具 Build 120416下载

亲爱的漫友,你还在用浏览器周游在线漫画网站,和着各种广告一起看漫画吗?天哪,你为社 这样能忍?快让ComicAiII给你纯净的漫画环境吧。ComicAiII是一款在线漫画批量

2020-02-18

柏林漫言/柏林摄影周/余 逾

图:柏林摄影周现场的现代舞表演/作者供图受父亲影响,肯能我也否有 摄影爱好者吧,平时喜欢看看摄影展。完后 听说柏林摄影周活动即将开幕,我还觉得 期盼了一下。柏林摄影周,跟

2020-02-18

强少爷多功能图片随机显示程序(水印版) v1.0|强少爷多功能图片随机显示程序(水印版) v1.0 下载

可用于论坛被委托人头像随机显示,也可用于网站Banner的随机显示。多多任务管理器 功能:1,图片命名无任何限制2,支持无限张图片随机显示3,图片可打水印4,完美出理 A

2020-02-18