首页 > 其他分享 >Blazor学习之旅(5)数据绑定

Blazor学习之旅(5)数据绑定

时间：2023-07-24 16:46:16浏览次数：47  
标签：set string 之旅 get 绑定 private 组件 Blazor

大家好，我是Edison。

本篇，我们来了解下在Blazor中数据是如何绑定的。

关于数据绑定

如果希望 HTML 元素显示值，可以编写代码来更改显示内容。如果值发生更改，则需要编写额外的代码以更新显示内容。

在 Blazor 中，可以使用数据绑定将 HTML 元素连接到字段、属性或表达式。

这样，当值发生更改时，HTML 元素便会自动更新。更新通常在更改后迅速发生，并且我们无需编写任何更新代码。

例如，我们使用@bind指令完成当变量被更改时，h1和input标签的值也同步更新：

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

@bind指令比较智能，它大概可以知道你需要绑定标签的哪个属性，例如：将其绑定到input标签时，它会绑定value属性。而将其绑定到checkbox中，它则自动绑定checked属性。

将元素绑定到特定事件

默认情况下，@bind指令对于input控件通常会绑定到DOM onchange事件。对于上面的例子来说，当在文本框中输入了数据时，只有当离开文本框或选择按下Enter键或者Tab键，才会触发DOM onchange事件让h1标签的内容发生改变。

假设，我们希望在文本框中输入任何内容时，都会触发h1标签内容的更改。这个事件就不再是DOM onchange事件了而是DOM oninput事件，因此，我们可以借助 @bind-value 和 @bind-value:event 指令来绑定到oninput事件：

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

实现效果：

设置绑定值的格式

在很多场景中，我们可能需要对日期进行本地化的格式转换。这里，我们就可以借助@bind:format指令来指定格式：

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

此外，我们也可以采用属性的get/set访问器来实现自定义的格式转换，例如下面的示例：

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

组件参数的绑定（双向绑定）

在有些场景中，父组件中嵌套了子组件，我们希望父组件中的变化能够同步更新到子组件，同理，子组件中的变化能够同步更新父组件中。实现的方式就是通过组件参数（Parameter），而这个场景也被称之为链式绑定（Chained Bind）。

在Blazor中，我们可以通过 @bind-{PROPERTY} 指令来实现链式绑定，其中的 {PROPERTY} 占位符表示要绑定的属性名字。

例如，我们有以下两个组件，Parent-1.razor是父组件，其中嵌套了 ChildBind.razor 这个子组件。

ChindBind.razor：

<div class="card bg-light mt-3" style="width:18rem ">
    <div class="card-body">
        <h3 class="card-title">ChildBind Component</h3>
        <p class="card-text">
            Child <code>Year</code>: @Year
        </p>
        <button @onclick="UpdateYearFromChild">Update Year from Child</button>
    </div>
</div>

@code {
    private Random r = new();

    [Parameter]
    public int Year { get; set; }

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }

    private async Task UpdateYearFromChild()
    {
        await YearChanged.InvokeAsync(r.Next(1950, 2021));
    }
}

Parent-1.razor：

@page "/parent-1"

<h1>Parent Component</h1>

<p>Parent <code>year</code>: @year</p>

<button @onclick="UpdateYear">Update Parent <code>year</code></button>

<ChildBind @bind-Year="year" />

@code {
    private Random r = new();
    private int year = 1979;

    private void UpdateYear()
    {
        year = r.Next(1950, 2021);
    }
}

可以看到，这里Parent-1.razor中通过@bind-Year指令与子组件的Year属性进行了绑定。

需要注意的是，通常情况下，我们还需要设置一个@bing-Year:event指令，不过由于我们定义的事件回调的名字YearChanged是符合自动匹配的，即命名格式是 {PARAMETER NAME}Changed，也就可以省略@bind-Year:event="YearChanged"这个设置，这就是所谓的“约定大于配置”。因此，它其实等价于：

<ChildBind @bind-Year="year" @bind-Year:event="YearChanged" />

因此，我们可以知道，只需要在HTML属性中加上@bind-{PROPERTY}指令，就是告诉Blazor不仅要将更改到推送到组件，还要观察组件的任何修改并及时更新自己的状态。通常来说，这种在父组件和子组件之间的数据绑定 也叫做 双向绑定。

同时，我们也注意到在Blazor中事件回调（委托）的统一类型为：EventCallback。我们在子组件中使用的是InvokeAsync()方法也说明它是线程安全的。

实现效果：

在一个更真实常见的场景中，我们可能希望实现数据实施修改的联动更新，类似于下面的例子。

PasswordEntry.razor：

<div class="card bg-light mt-3" style="width:22rem ">
    <div class="card-body">
        <h3 class="card-title">Password Component</h3>
        <p class="card-text">
            <label>
                Password:
                <input @oninput="OnPasswordChanged"
                       required
                       type="@(showPassword ? "text" : "password")"
                       value="@password" />
            </label>
            <span class="text-danger">@validationMessage</span>
        </p>
        <button class="btn btn-primary" @onclick="ToggleShowPassword">
            Show password
        </button>
    </div>
</div>

@code {
    private bool showPassword;
    private string? password;
    private string? validationMessage;

    [Parameter]
    public string? Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        password = e?.Value?.ToString();

        if (password != null && password.Contains(' '))
        {
            validationMessage = "Spaces not allowed!";

            return Task.CompletedTask;
        }
        else
        {
            validationMessage = string.Empty;

            return PasswordChanged.InvokeAsync(password);
        }
    }

    private void ToggleShowPassword()
    {
        showPassword = !showPassword;
    }
}

PasswordBinding.razor：

@page "/password-binding"

<h1>Password Binding</h1>

<PasswordEntry @bind-Password="password" />

<p>
    <code>password</code>: @password
</p>

@code {
    private string password = "Not set";
}

最终效果：

组件参数绑定的最佳实践

我们可以在多层嵌套的组建中绑定组件参数，但是我们必须遵循这类单向数据绑定的流程：

  • 更改通知是逐级向上流动

  • 新的参数值是逐级向下流动

一个推荐的方式是只在父组件中存储源数据，以此避免在状态需要更新时容易产生的混淆。

例如，下面这个例子：

Parent2.razor：

@page "/parent-2"

<h1>Parent Component</h1>

<p>Parent Message: <b>@parentMessage</b></p>

<p>
    <button @onclick="ChangeValue">Change from Parent</button>
</p>

<NestedChild @bind-ChildMessage="parentMessage" />

@code {
    private string parentMessage = "Initial value set in Parent";

    private void ChangeValue()
    {
        parentMessage = $"Set in Parent {DateTime.Now}";
    }
}

NestedChild.razor：

<div class="border rounded m-1 p-1">
    <h2>Child Component</h2>

    <p>Child Message: <b>@ChildMessage</b></p>

    <p>
        <button @onclick="ChangeValue">Change from Child</button>
    </p>

    <NestedGrandchild @bind-GrandchildMessage="BoundValue" />
</div>

@code {
    [Parameter]
    public string? ChildMessage { get; set; }

    [Parameter]
    public EventCallback<string> ChildMessageChanged { get; set; }

    private string BoundValue
    {
        get => ChildMessage ?? string.Empty;
        set => ChildMessageChanged.InvokeAsync(value);
    }

    private async Task ChangeValue()
    {
        await ChildMessageChanged.InvokeAsync(
            $"Set in Child {DateTime.Now}");
    }
}

NestedGrandchild.razor：

<div class="border rounded m-1 p-1">
    <h3>Grandchild Component</h3>

    <p>Grandchild Message: <b>@GrandchildMessage</b></p>

    <p>
        <button @onclick="ChangeValue">Change from Grandchild</button>
    </p>
</div>

@code {
    [Parameter]
    public string? GrandchildMessage { get; set; }

    [Parameter]
    public EventCallback<string> GrandchildMessageChanged { get; set; }

    private async Task ChangeValue()
    {
        await GrandchildMessageChanged.InvokeAsync(
            $"Set in Grandchild {DateTime.Now}");
    }
}

从示例中可以看出，它遵循了两个原则：

（1）源数据是自顶向下流动，即parentMessage 和 BoundValue 两个值。

（2）事件通知是自底向上流动，即子组件的ChangeValue方法都会调用EventCallback来向上通知。

最终效果：

小结

本篇，我们了解了数据如何在Blazor中进行数据的绑定。

下一篇，我们学习一下在Blazor中数据绑定的各种花样。

参考资料

Microsoft Docs，《与Blazor Web应用中的数据交互》

Microsoft Docs，《Blazor数据绑定》

 

作者：周旭龙

出处：https://edisonchou.cnblogs.com

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

标签：set,string,之旅,get,绑定,private,组件,Blazor
From： https://www.cnblogs.com/edisonchou/p/edc_aspnet_blazor_learning_chap5.html

相关文章

  • 第六章 注解式控制器详解 SpringMVC强大的数据绑定（2）
    6.6.2、@RequestParam绑定单个请求参数值@RequestParam用于将请求参数区数据映射到功能处理方法的参数上。1.publicStringrequestparam1(@RequestParam请求中包含username参数（如/requestparam1?username=zhang），则自动传入。 此处要特别注意：右击项目，选择“属性”，打开“属性对......
  • LeetCode 周赛上分之旅 #35 两题坐牢，菜鸡现出原形
    ⭐️本文已收录到AndroidFamily，技术和职场问题，请关注公众号[彭旭锐]和[BaguTreePro]知识星球提问。学习数据结构与算法的关键在于掌握问题背后的算法思维框架，你的思考越抽象，它能覆盖的问题域就越广，理解难度也更复杂。在这个专栏里，小彭与你分享每场LeetCode周赛的解题报告......
  • Blazor前后端框架Known-V1.2.6
    V1.2.6Known是基于C#和Blazor开发的前后端分离快速开发框架，开箱即用，跨平台，一处代码，多处运行。Gitee：https://gitee.com/known/KnownGithub：https://github.com/known/Known概述基于C#和Blazor实现的快速开发框架，前后端分离，开箱即用。跨平台，单页应用，混合桌面应用，Web和桌面......
  • jquery双击事件绑定
    jQuery双击事件绑定jQuery是一种广泛使用的JavaScript库，它使开发者能够更方便地操作HTML文档、处理事件以及动态改变网页内容。在jQuery中，事件绑定是一种非常常见的操作，它允许开发者指定某个事件发生时应该执行的操作。其中，双击事件是一种特殊的事件，它在用户快速点击某个元素两次......
  • MAUI Blazor 显示本地图片的新思路
    前言好久没写文章了，水一篇关于MAUIBlazor显示本地图片这个问题，有大佬发过了。就是token大佬的那篇BlazorHybrid（Blazor混合开发）更好的读取本地图片主要思路就是读取本地图片，通过C#与JS互操作，将byte[]传给js，生成blob，图片的src中填写根据blob生成的url。我之前一直使用这......
  • 工作学习：简单双向绑定
    双向绑定语法在WXML中，普通的属性的绑定是单向的。例如：<inputvalue="{{value}}"/>如果使用 this.setData({value:'leaf'}) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value ......
  • jquery为多选框绑定事件
    jQuery为多选框绑定事件的实现步骤1.理解需求在开始编写代码之前，首先需要明确需求。根据题目要求，我们需要实现为多选框绑定事件，即当用户选择多选框时，触发相应的事件。2.引入jQuery库在使用jQuery之前，需要先引入jQuery库文件。可以通过在HTML文件中添加如下代码来引入jQuery库......
  • Vue3 响应式全局对象json 动态绑定界面三 （Div块样式 字符串叠加）
    效果 man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({missedCallData:"",currentUserTel:"",})app.provide('globalData',globalData);在main.js的函数中改变missedCallData 的值从而改变界面列表//改变全局变量gl......
  • Vue3 响应式全局对象json 动态绑定界面四 （Div块样式 Json数据绑定）
    效果man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({extTelTalkData:[{userExten:"1000",userName:"刘亦菲",callStatus:"通话"},{......
  • Vue3 响应式全局对象json 动态绑定界面二 （方块矩阵样式）
    效果main.js//全局对象constglobalData=reactive({extTelMonitorData:[{title:'用户组一',list:[{groupID:"0",groupName:"AllUsers",......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99