ASP.NET Core Blazor简介和快速入门二（组件基础之数据绑定）

举报
码农刚子 发表于 2025/11/15 23:40:52 2025/11/15
【摘要】 大家好，我是码农刚子。上一章介绍了Blazor组件的生命周期。接下来我们继续了解Blazor 组件相关的基础知识，希望对你有所帮助。1、数据绑定Blazor提供了强大的数据绑定机制，主要包括单向绑定和双向绑定两种模式。1. 单向数据绑定单向绑定是指数据从组件流向UI，但UI的变化不会自动更新数据源。基本语法<!-- 使用 @ 符号进行单向绑定 --><p>当前值: @currentValue...

大家好，我是码农刚子。上一章介绍了Blazor组件的生命周期。接下来我们继续了解Blazor 组件相关的基础知识，希望对你有所帮助。

1、数据绑定

Blazor提供了强大的数据绑定机制，主要包括单向绑定和双向绑定两种模式。

1. 单向数据绑定

单向绑定是指数据从组件流向UI，但UI的变化不会自动更新数据源。

基本语法

<!-- 使用 @ 符号进行单向绑定 -->
<p>当前值: @currentValue</p>
<span>用户名: @UserName</span>
<div>创建时间: @CreateTime.ToString("yyyy-MM-dd")</div>

完整示例

<!-- OneWayBinding.razor -->
<div class="one-way-demo">
    <h3>单向绑定示例</h3>
    
    <!-- 显示数据，但不允许编辑 -->
    <div class="display-area">
        <p>计数器: <strong>@count</strong></p>
        <p>消息: <strong>@message</strong></p>
        <p>用户信息: <strong>@user.Name</strong> - <strong>@user.Age</strong>岁</p>
    </div>
    <!-- 控制按钮 -->
    <div class="control-area">
        <button @onclick="Increment" class="btn btn-primary">增加计数</button>
        <button @onclick="ChangeMessage" class="btn btn-secondary">更改消息</button>
        <button @onclick="UpdateUser" class="btn btn-info">更新用户</button>
    </div>
</div>
@code {
    private int count = 0;
    private string message = "初始消息";
    private User user = new User { Name = "张三", Age = 25 };
    private void Increment()
    {
        count++;
        // StateHasChanged(); // 通常不需要手动调用，事件处理会自动触发重新渲染
    }
    private void ChangeMessage()
    {
        message = $"消息已更新: {DateTime.Now:HH:mm:ss}";
    }
    private void UpdateUser()
    {
        user = new User { Name = "李四", Age = 30 };
    }
    class User
    {
        public string Name { get; set; } = string.Empty;
        public int Age { get; set; }
    }
}

2. 双向数据绑定

双向绑定允许数据在组件和UI之间双向流动：UI变化自动更新数据源，数据源变化自动更新UI。

基本语法

<!-- 使用 @bind 指令进行双向绑定 -->
<input @bind="propertyName" />
<input @bind="fieldName" />
<select @bind="selectedValue">...</select>

完整示例

<!-- TwoWayBinding.razor -->
<div class="two-way-demo">
    <h3>双向绑定示例</h3>
    
    <div class="form-group">
        <label>用户名:</label>
        <input @bind="userName" class="form-control" />
        <small>显示: @userName</small>
    </div>
    <div class="form-group">
        <label>邮箱:</label>
        <input @bind="email" class="form-control" />
        <small>显示: @email</small>
    </div>
    <div class="form-group">
        <label>年龄:</label>
        <input @bind="age" type="number" class="form-control" />
        <small>显示: @age</small>
    </div>
    <div class="form-group">
        <label>城市:</label>
        <select @bind="selectedCity" class="form-control">
            <option value="">请选择</option>
            <option value="Beijing">北京</option>
            <option value="Shanghai">上海</option>
            <option value="Guangzhou">广州</option>
            <option value="Shenzhen">深圳</option>
        </select>
        <small>选择: @selectedCity</small>
    </div>
    <div class="form-group">
        <label>是否同意协议:</label>
        <input type="checkbox" @bind="isAgreed" />
        <span>@(isAgreed ? "已同意" : "未同意")</span>
    </div>
    <!-- 显示汇总信息 -->
    <div class="summary">
        <h4>汇总信息:</h4>
        <p>用户名: @userName</p>
        <p>邮箱: @email</p>
        <p>年龄: @age</p>
        <p>城市: @selectedCity</p>
        <p>同意协议: @isAgreed</p>
    </div>
</div>
@code {
    private string userName = string.Empty;
    private string email = string.Empty;
    private int age = 0;
    private string selectedCity = string.Empty;
    private bool isAgreed = false;
}

3. 绑定事件控制

3.1 绑定特定事件

默认情况下，@bind 在失去焦点时更新。可以使用 @bind:event 指定触发事件：

<!-- 实时绑定（输入时立即更新） -->
<div class="real-time-demo">
    <h4>实时绑定示例</h4>
    
    <input @bind="searchText" @bind:event="oninput" 
           placeholder="输入搜索内容..." />
    <p>实时搜索: @searchText</p>
    <!-- 对比默认行为 -->
    <input @bind="normalText" placeholder="默认绑定（失去焦点更新）" />
    <p>默认绑定: @normalText</p>
</div>
@code {
    private string searchText = string.Empty;
    private string normalText = string.Empty;
}

3.2 绑定格式化

<div class="format-demo">
    <h4>格式化绑定示例</h4>
    
    <!-- 日期格式化 -->
    <input @bind="startDate" @bind:format="yyyy-MM-dd" type="date" />
    <p>选择的日期: @startDate.ToString("yyyy年MM月dd日")</p>
    <!-- 数字格式化 -->
    <input @bind="price" @bind:format="F2" type="number" step="0.01" />
    <p>价格: @price.ToString("C")</p>
</div>
@code {
    private DateTime startDate = DateTime.Today;
    private decimal price = 0.00m;
}

4. 自定义组件双向绑定

在自定义组件中实现双向绑定：

子组件

<!-- CustomInput.razor -->
<div class="custom-input">
    <label>@Label</label>
    <input 
        value="@Value" 
        @oninput="HandleInput"
        class="form-control @AdditionalClass"
        placeholder="@Placeholder" />
    @if (!string.IsNullOrEmpty(ValidationMessage))
    {
        <div class="text-danger">@ValidationMessage</div>
    }
</div>
@code {
    [Parameter]
    public string Value { get; set; } = string.Empty;
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    [Parameter]
    public string Label { get; set; } = string.Empty;
    [Parameter]
    public string Placeholder { get; set; } = string.Empty;
    [Parameter]
    public string AdditionalClass { get; set; } = string.Empty;
    [Parameter]
    public string ValidationMessage { get; set; } = string.Empty;
    private async Task HandleInput(ChangeEventArgs e)
    {
        Value = e.Value?.ToString() ?? string.Empty;
        await ValueChanged.InvokeAsync(Value);
    }
}

父组件使用

<!-- ParentComponent.razor -->
<div class="parent-demo">
    <h3>自定义组件双向绑定</h3>
    
    <CustomInput 
        @bind-Value="userName" 
        Label="用户名" 
        Placeholder="请输入用户名" />
    <CustomInput 
        @bind-Value="email" 
        Label="邮箱" 
        Placeholder="请输入邮箱地址"
        ValidationMessage="@(IsValidEmail ? "" : "邮箱格式不正确")" />
    <div class="result">
        <p>用户名: @userName</p>
        <p>邮箱: @email</p>
    </div>
</div>
@code {
    private string userName = string.Empty;
    private string email = string.Empty;
    private bool IsValidEmail => email.Contains("@") && email.Contains(".");
}

5.复杂对象绑定

<!-- ComplexObjectBinding.razor -->
<div class="complex-binding">
    <h3>复杂对象绑定</h3>
    
    <div class="form-section">
        <h4>用户信息</h4>
        
        <div class="form-group">
            <label>姓名:</label>
            <input @bind="currentUser.Name" class="form-control" />
        </div>
        <div class="form-group">
            <label>年龄:</label>
            <input @bind="currentUser.Age" type="number" class="form-control" />
        </div>
        <div class="form-group">
            <label>地址:</label>
            <input @bind="currentUser.Address.Street" class="form-control" placeholder="街道" />
            <input @bind="currentUser.Address.City" class="form-control" placeholder="城市" />
        </div>
    </div>
    <div class="display-section">
        <h4>当前用户信息:</h4>
        <pre>@userInfoJson</pre>
    </div>
    <button @onclick="ResetUser" class="btn btn-warning">重置用户</button>
    <button @onclick="CreateNewUser" class="btn btn-success">创建新用户</button>
</div>
@code {
    private User currentUser = new User();
    private string userInfoJson => 
        System.Text.Json.JsonSerializer.Serialize(currentUser, new System.Text.Json.JsonSerializerOptions 
        { 
            WriteIndented = true 
        });
    private void ResetUser()
    {
        currentUser = new User();
    }
    private void CreateNewUser()
    {
        currentUser = new User
        {
            Name = "新用户",
            Age = 18,
            Address = new Address { Street = "新建街道", City = "新建城市" }
        };
    }
    class User
    {
        public string Name { get; set; } = string.Empty;
        public int Age { get; set; }
        public Address Address { get; set; } = new Address();
    }
    class Address
    {
        public string Street { get; set; } = string.Empty;
        public string City { get; set; } = string.Empty;
    }
}

6.绑定模式对比

绑定类型

语法

更新时机

适用场景

单向绑定

@property

数据源变化时

显示数据、计算属性

双向绑定

@bind="property"

失去焦点时

表单输入、用户交互

实时双向

@bind="property" @bind:event="oninput"

输入时实时更新

搜索框、实时验证

自定义绑定

@bind-Value="property"

自定义事件触发

自定义表单组件

以上就是关于《ASP.NET Core Blazor简介和快速入门二（组件基础之数据绑定）》的全部内容，希望你有所收获。关注我，持续分享。

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
ASP ASP.NET
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入