返回顶部
首页 > 资讯 > 精选 >Blazor数据绑定的方法是什么
  • 848
分享到

Blazor数据绑定的方法是什么

2023-06-29 01:06:32 848人浏览 安东尼
摘要

本篇内容介绍了“blazor数据绑定的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Blazor当中, 类似实现了WPF的基础绑定

本篇内容介绍了“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; }    }}

效果如下所示:

Blazor数据绑定的方法是什么

数据格式化

如果需要使用数据格式化显示, 可以通过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数据绑定的方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: Blazor数据绑定的方法是什么

本文链接: https://www.lsjlt.com/news/321782.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Blazor数据绑定的方法是什么
    本篇内容介绍了“Blazor数据绑定的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Blazor当中, 类似实现了WPF的基础绑定...
    99+
    2023-06-29
  • Blazor数据绑定用法
    Blazor当中, 类似实现了WPF的基础绑定功能, 支持在HTML元素当中使用Razor语法进行绑定C#字段、属性或 Razor 表达式值。 绑定语法 在Html标签中,使用Raz...
    99+
    2024-04-02
  • dropdownlist绑定数据的方法是什么
    可以使用以下方法绑定数据到一个下拉列表(dropdownlist)中:1. 使用数据绑定表达式(Data Binding Expre...
    99+
    2023-09-20
    dropdownlist
  • winform数据绑定的方法是什么
    在WinForms中,数据绑定可以通过以下几种方法来实现:1. 使用DataBindings属性:可以将控件的属性与数据源的属性进行...
    99+
    2023-10-10
    winform
  • gridview绑定数据库的方法是什么
    GridView 绑定数据库的方法主要有以下几种:1. 使用数据源控件:可以使用 SqlDataSource、ObjectDataS...
    99+
    2023-08-31
    gridview 数据库
  • WPF TreeView绑定数据的方法是什么
    WPF TreeView 绑定数据的方法有多种,可以使用以下几种方法: 使用 ItemsSource 属性:可以将一个集合作为 T...
    99+
    2023-10-23
    WPF TreeView
  • listview绑定数据库的方法是什么
    要将ListView控件绑定到数据库,可以使用Adapter来管理数据源和显示数据。以下是一个简单的步骤来实现ListView绑定数...
    99+
    2024-04-02
  • C#中DataGridView数据绑定的方法是什么
    在C#中,可以使用以下方法将数据绑定到DataGridView控件上:1. 使用DataBinding绑定数据源:可以通过设置Dat...
    99+
    2023-09-26
    C#
  • vue2.0双向数据绑定的方法是什么
    这篇文章主要介绍“vue2.0双向数据绑定的方法是什么”,在日常操作中,相信很多人在vue2.0双向数据绑定的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue2.0双向数据绑定的方法是什么”的疑...
    99+
    2023-06-27
  • MyBatis中参数绑定的方法是什么
    MyBatis中参数绑定的方法有两种:基于位置的参数绑定和基于名称的参数绑定。 基于位置的参数绑定:在SQL语句中使用问号()指代...
    99+
    2024-04-08
    MyBatis
  • C# WPF数据绑定模板化操作的方法是什么
    今天小编给大家分享一下C# WPF数据绑定模板化操作的方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。具体...
    99+
    2023-06-26
  • react数据绑定的原理是什么
    React数据绑定的原理是通过使用虚拟DOM(Virtual DOM)和组件的状态(state)来实现的。虚拟DOM是React中的...
    99+
    2023-09-13
    react
  • javascript绑定事件的方法是什么
    本篇内容介绍了“javascript绑定事件的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!绑定...
    99+
    2024-04-02
  • python中的非绑定方法是什么
    本篇内容介绍了“python中的非绑定方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!说明给类中的一个函数加上装饰器@staticm...
    99+
    2023-06-20
  • redis绑定域名的方法是什么
    Redis不能直接绑定域名,因为Redis是一个基于网络协议的内存数据库。Redis可以通过IP地址和端口进行访问。如果想要通过域名...
    99+
    2023-09-04
    redis
  • 域名绑定ip的方法是什么
    域名绑定ip的方法:1、进入域名代理商网站,登录到域名管理控制台;2、点击域名管理选项;3、选择管理需要绑定ip的域名;4、点击域名...
    99+
    2023-02-08
    域名绑定ip 域名
  • wpf双向绑定的方法是什么
    WPF(Windows Presentation Foundation)中的双向绑定是一种机制,可以在界面控件和数据对象之间实现双向...
    99+
    2023-08-08
    wpf
  • tomcat绑定域名的方法是什么
    要将Tomcat绑定到特定的域名,可以通过以下步骤操作: 打开Tomcat的配置文件server.xml,通常位于Tomcat安...
    99+
    2024-04-09
    tomcat
  • C/C++ Qt数据库与TreeView组件绑定的方法是什么
    本篇内容主要讲解“C/C++ Qt数据库与TreeView组件绑定的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“C/C++ Qt数据库与TreeView组件绑定的...
    99+
    2023-06-21
  • winform数据绑定控件是什么
    WinForm数据绑定控件是一组用于将数据与Windows Forms应用程序中的控件进行绑定的工具和组件。这些控件包括数据源控件、...
    99+
    2023-10-12
    winform
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作