Blazor数据绑定用法

Blazor当中, 类似实现了WPF的基础绑定功能, 支持在HTML元素当中使用Razor语法进行绑定C#字段、属性或 Razor 表达式值。

绑定语法

在Html标签中,使用Razor的语法, 前缀使用@符号, 然后添加 @bind="xxxx" 即可实现最简单的绑定, 如下:

input @bind="Name" />

@code {
    private string Name{ get; set; }
}

通过上面的操作, Input中的值与属性Name则进行了一个双向绑定, 无论是Name主动发生变更, 还是Input的值发生变化, 两者都会同时更新。

通过@bind的声明与 value="@xxx"的区别:

@xxx/@bind区别

value="@xxx": 只能做到属性呈现到UI元素当中, 无法与UI元素建立关系, 即: 元素发生变化并不会影响到属性变更。

绑定对象

下面示例演示了一个如何在html元素中的值如何绑定到一个对象的属性上。

    <input @bind="Stu.Name"/>

@code{
    public Student Stu { get; set; } = new Student()
    {
        Name = "123"
    };

    public class Student
    {
        public string Name { get; set; }
    }
}

效果如下所示:

数据格式化

如果需要使用数据格式化显示, 可以通过Razor中的语法: @bind:format , 如下所示,展示了一个日期元素格式化样例:

    <input @bind="StartDate" @bind:format="yyyy-MM-dd" />

@code {
    [Parameter]
    public DateTime StartDate { get; set; } = new DateTime(2020, 1, 1);
}

绑定子组件属性

通常情况下, 对于父界面而言, 往往是由一个或者多个子组件组成 (用于提高程序的复用性)， 所以父组件而言, 往往需要将父组件的参数绑定到子组件当中。
下面的例子,演示了一个子组件当中的字符串, 如何绑定到父组件的属性上。

声明子组件参数与回调函数

声明了组件参数Year, 还需要声明一个组件回调函数, 该回调函数主要用于子组件的数据发生变更。
回调函数的声明规则为, 参数类型与对应的属性一直, 名称以属性名开头

    <p>Year: @Year</p>

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

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

父组件调用

<ChildComponent @bind-Year="ParentYear" />

@code {
    [Parameter]
    public int ParentYear { get; set; } = 1978;

}

无法预估的值

当元素与属性建立了绑定关系, 但是受限于属性的类型, 如果UI元素中发生了类型不一致的变更,则在触发绑定事件时，无法分析的值会自动还原为以前的值。

例: 当绑定的属性为Int类型时, UI元素将内容修改为string字符, 当UI元素发生事件变更时, 该值无法进行int类型的转换,则回自动还原。

到此这篇关于Blazor数据绑定用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Blazor组件事件处理功能

    Blazor组件事件处理功能

    Blazor的组件当中, 提供了事件处理功能, 这点类似于使用客户端(Winform/Wpf)开发, 经常用到的一些类似: 按钮(Button), 输入框(TextBox) 用到的一些事件, 例如Click.DoubleClick.TextChanged 等等事件允许我们在后台代码当中进行处理相应的逻辑. 介绍事件 在Razor组件中, 同样提供了事件处理功能.对于具有委托类型值且名为 @on {EVENT}(例如 @onclick)的 HTML 元素特性,Razor 组件将该特性的值视为事件处

  • Blazor框架简介

    Blazor框架简介

    Blaozr 是由微软2019推出得一种使用.NET 生成交互式客户端得Web UI框架. 该框架利用C#代替JavaScript进行创建UI , 并且可以共享.NET编写的服务端和客户端业务代码. 优势: 1 使用C#代替JavaScript编写代码, 意味着, 如果你使用的是.Net进行编写服务端(例:ASP.NET Core WebApi) 或者是 客户端(WPF/Winform),那么可以共享应用之前的逻辑, 无需针对Web再编写其他的业务代码. 2 始终高效支持 Windows.Lin

  • Blazor页面组件用法介绍

    Blazor页面组件用法介绍

    Blazor应用中, 是使用组件来构建用户界面, 例如页面.窗口.对话框等. 组件 使用C#和HTML标记的组合, Blazor组件称之为Razor组件, 文件名以 (.razor)结尾的文件. 1.如下所示, 在VisualStudio创建Blazor应用模板后的截图, 展示了Page文件夹中定义的razor文件. 注意:所有的Blazor组件, 都必须大写字符开头, 否则无效.如上图所示 ↑ 2.关于.razor 页面 对于每个 .razor页面来说, 包含了两个部分: 1. Html标记的

  • [Asp.Net Core]用Blazor Server Side实现图片验证码

    关于Blazor 由于在国内, Blazor一点都不普及, 在阅读此文前, 建议读者先翻看我之前写的随笔, 了解Blazor Server Side的特点. 在一段时间内, 我会写一些解说分析型的 "为什么选择 Blazor Server Side" , 在适当的时候再写快速入门系列.(无论是针对编程新学者还是多年经验人士) 验证码 我们很多场合都实现过图片验证码. 图片验证码的主要关键是呈现图片, 需要一个URL, 而这个URL需要传递参数以确定显示什么东西. 这个验证码如何在服务器

  • Ant Design Blazor 组件库的路由复用多标签页功能

    Ant Design Blazor 组件库的路由复用多标签页功能

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 `Tabs` 组件的 `ReuseTabs` 组件. 最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前言 Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 Sign

  • [Asp.Net Core] 浅谈Blazor Server Side

    在2016年, 本人就开始了一个内部项目, 其特点就是用C#构建DOM树, 然后把DOM同步到浏览器中显示. 并且在一些小工程中使用. 3年下来, 效果很不错, 但因为是使用C#来构建控件树, 在没有特定语法的情况下, 代码风格不是那么好. 典型的风格大概是这样的: 这个模式挺好的, 有点嫌弃C#代码占比太高, HTML代码靠字符串来完成, 在界面的设计上, 比较吃力. 在2019年秋, Asp.Net 3.0出来了, Blazor Server Side 也正式公布, 可以在VS2019中使用

  • Blazor Server 应用程序中进行 HTTP 请求

    Blazor Server 应用程序中进行 HTTP 请求

    目录 Blazor Server 应用程序中进行 HTTP 请求 一.第三方 Web API 概览 二.从 Blazor Sever 应用程序开始 三.在 Blazor Server 应用程序中使用 IHttpClientFactory 创建 HttpClient 四.在 Blazor Server 应用程序中创建命名 HttpClient 对象 五.在 Blazor Server 应用程序中创建类型化 HttpClient 对象 Blazor Server 应用程序中进行 HTTP 请求 翻译

  • Blazor数据绑定用法

    Blazor数据绑定用法

    Blazor当中, 类似实现了WPF的基础绑定功能, 支持在HTML元素当中使用Razor语法进行绑定C#字段.属性或 Razor 表达式值. 绑定语法 在Html标签中,使用Razor的语法, 前缀使用@符号, 然后添加 @bind="xxxx" 即可实现最简单的绑定, 如下: input @bind="Name" /> @code { private string Name{ get; set; } } 通过上面的操作, Input中的值与属性Name则进

  • AngularJS入门教程之数据绑定用法示例

    AngularJS入门教程之数据绑定用法示例

    本文实例讲述了AngularJS数据绑定用法.分享给大家供大家参考,具体如下: 数据绑定是AngularJS中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.

  • AngularJS入门教程之MVC架构实例分析

    AngularJS入门教程之MVC架构实例分析

    本文实例讲述了AngularJS的MVC架构.分享给大家供大家参考,具体如下: MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Controller)和数据的展示(View)分离开来,使程序的逻辑性和可维护性更强. 对于AngularJS应用来说,视图(View)是DOM(文档对象模型),你可以理解为就是HTML页面.控制器(Controller)是一个

  • 详解ASP.NET数据绑定操作中Repeater控件的用法

    详解ASP.NET数据绑定操作中Repeater控件的用法

    一.绑定控件之Repeater .NET封装了多种数据绑定控件,诸如GridView.DataList等但该篇文章将会从Repeater入手,因为Repeater只提供了基本的数据绑定模板,没有内置其它分页等功能,所以它是最原始的数据绑定控件,只要能够熟练运用Repeater控件其它的绑定控件也就很简单了. 1.Repeater简介 Repeater 控件是基本模板化数据列表. 它不像GridView控件一样能够可视化的设计格式或样式,因此开发时在控件模板中必须显式声明所有格式.格式和样式标记.

  • WPF数据绑定Binding的用法

    WPF数据绑定Binding的用法

    一.简介 WPF的核心理念是变传统的UI驱动数据变成数据驱动UI,支撑这个理念的基础就是本章讲的Data Binding和与之相关的数据校验和数据转换.在使用Binding的时候,最重要的就是设置它的源和路径.Bingding的源:有三个属性用来设置源:ElementName(string).Source(Object) 和 RelativeSource(RelativeSource).注:这三个只能指定一个,否则异常.ElementName:源为一个元素(Element),这里用的是此元素中设

  • vue双向数据绑定指令v-model的用法

    vue双向数据绑定指令v-model的用法

    目录 基本使用 响应式 v-model数据双向绑定步骤 响应式 v-model简易实现原理 v-model,被称为双向数据绑定指令,就是Vue实例对数据进行修改,页面会立即感知,相反页面对数据进行修改,Vue内部也会立即感知. v-model 是vue中唯一实现双向数据绑定的指令. v-bind(单向)数据绑定,Vue实例修改数据,页面会感知到,相反页面修改数据Vue实例不能感知. v-model(双向)数据绑定,页面修改数据,Vue实例会感知到,Vue实例修改数据,页面也会感知到. 基本使用

  • 学习AngularJs:Directive指令用法（完整版）

    学习AngularJs:Directive指令用法（完整版）

    本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope.绑定事件.更改样式等.通过这个Directiv

  • AngularJS实践之使用NgModelController进行数据绑定

    AngularJS实践之使用NgModelController进行数据绑定

    前言 在Angular应用中,ng-model指令时不可缺少的一个部分,它用来将视图绑定到数据,是双向绑定魔法中重要的一环.ngModelController则是ng-model指令中所定义的controller.这个controller包含了一些用于数据绑定,验证,CSS更新,以及数值格式化和解析的服务.它不用来进行DOM渲染或者监听DOM事件.与DOM相关的逻辑都应该包含在其他的指令中,然后让这些指令来试用ngModelController中的数据绑定功能. 注意:本篇文章不是对NgMode

  • Angular2中select用法之设置默认值与事件详解

    本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.设置默认值: 现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值就可以在下拉框默认选中 code1: 设置"请选择"为默认项,只需要把变量student设置为'',即可默认到"请选择",需要注意的是 <option value="">请选择</option>

随机推荐