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

发布时间：2022-11-19 15:00:45 所属栏目：应用来源：未知

导读： 今天我们来看看Blazor开发的一些基本知识。
Blazor中组件的基本结构可以分为3个部分，如下所示：
//Counter.razor//Directives section 指令部分@page "/counter"//Razor HTML section

今天我们来看看Blazor开发的一些基本知识。

Blazor中组件的基本结构可以分为3个部分，如下所示：

//Counter.razor

//Directives section  指令部分
@page "/counter"

//Razor HTML section   Razor HTML部分
Counter

Current count: @currentCount



//code sections   功能部分
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

指令部分： Razor HTML 部分：

Razor HTML语法是C＃代码与HTML的结合。此部分最终在浏览器中呈现。

指令部分：

组件中的函数部分包含用户操作函数（事件方法），局部变量和从/向父/子组件传递的属性。

当然如果愿意，这部分也可以单独写道类文件中。

我们看看属性和参数，

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

类似地，组件的定义方式与HTML元素相同，

//MyDemo.razor

@page "/myDome"

MyDemo


"来自MyDemo">

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

//ChildComponent.razor//Child Component

    标题 : @Title


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

运行效果如下:

清单和定额的计价程序_市政工程工程量清单计价应用手册_应用程序清单

Blazor的数据绑定同时提供了单向绑定和双向绑定两种机制。

（一）单向绑定：

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

@page "/counter"

Counter


Current count: @currentCount




@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

此处 @currentCount 值根据点击按钮的数量递增Click me。

标记元素中的值会自动刷新，无需任何组件刷新。

（二）双向绑定：

在Blazor中可以实现双向绑定，与一些流行的JS语言框架相比，Blazor为双向绑定提供了多种实现方式，Blazor可以优雅地进行编写。

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

@page "/myDome"


请选择:
"checkbox" @bind="myChecked" />
我选择了 : @myChecked.ToString()



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

运行效果如下，是不是很简单，很优雅。

市政工程工程量清单计价应用手册_清单和定额的计价程序_应用程序清单

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

@page "/myDome"


    显示/隐藏:
    "checkbox" @bind="myChecked" />

"display:@(myChecked ? "inline":"none")">看到我了



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

应用程序清单_市政工程工程量清单计价应用手册_清单和定额的计价程序

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

@page "/myDome"


    onchange 方式一
    @bind="changeString" />


    onchange 方式二
    "text"
           value="@changeString"
           @onchange="@((UIChangeEventArgs _e) => changeString = _e.Value.ToString())" />


    onchange 方式三
    @bind-value="changeString" @bind-value:event="onchange" />


    oninput
    @bind-value="changeString" @bind-value:event="oninput" />

这是我输入的内容: @changeString


@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"

Parent Component

当前时间: @ParentNow



"ParentNow" />




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

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

//ChildComponent.razor

Child Component


当前时间: @Now


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

    [Parameter]
    public EventCallback NowChanged { get; set; }
}

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

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

运行效果：

市政工程工程量清单计价应用手册_清单和定额的计价程序_应用程序清单

(2)组件之间传递的数据通过组件属性及其属性映射发生，此方法使用委托Action类型。

//MyDemo.razor

@page "/myDome"

Parent Component

来自Child组件: @childString


    "inputText" />


"@inputText"
                FromChild="@ReceivedFromChild">


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


    private void ReceivedFromChild(string str)
    {
        childString = str;
        StateHasChanged();
    }
}

//ChildComponent.razor

Child Component


    "inputText" />
    

来自Parent组件 : @ToChild


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

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

    private string inputText = "";

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

这里FromChild是ChildComponent中的属性，属性使用Action数据类型将值从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"

姓名："@pName" />

年龄："@pAge" />


"@pName" Name="ProfileName">
    "@pAge" Name="ProfileAge">
        
    


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

//ParentComponent.razor

"background-color:darkgray">
    Parent Component

    "padding:10px;">

//ChildComponent.razor

"background-color:beige">
    Child Component

    输入的 姓名：@Name  , 年龄 : @Age.ToString()



@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的组件开发就先学习到这，有意犹未尽的可以查看官方文档深入学习。

原文链接：https://www.cnblogs.com/liuxtj/p/11350992.html

.NET社区新闻，深度好文，欢迎访问公众号文章汇总?http://www.csharpkit.com?

清单和定额的计价程序_市政工程工程量清单计价应用手册_应用程序清单

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!