Blazor是否支持按属性/控件名双向同步Model与页面控件值？

问题描述 #

我还没见过这类功能，但觉得它应该可行——Blazor Server端的实用功能总能给我惊喜，所以来咨询：如果我有一个Entity Framework的Model（比如User.cs），还有对应的signup.razor页面，有没有办法遍历页面所有输入控件，把控件名和Model属性名匹配的控件值同步到Model属性里，或者反过来把Model属性值写入对应的控件？

示例代码 #

User.cs

public class User
{
    public string Name { get; set; }
    public string Email { get; } // 注意：只读属性无法双向绑定，需改为get;set;
    // ...
}

signup.razor（原始写法）

<form action="/action_page.php">
  <label for="username">Name: </label>
  <input type="text" id="Name" name="Name"><br>
  <label for="username">Email: </label>
  <input type="text" id="Email" name="Email"><br>
  <!-- ... -->
  <input type="submit" value="Submit">
</form>

解决方案 #

Blazor原生提供了数据绑定机制，这是最推荐的实现方式，完全不需要手动遍历控件。如果特殊场景下需要手动操作，也可以通过JS互操作实现，但不推荐。

1. 原生双向绑定（最佳实践） #

这是Blazor的核心特性之一，自动实现控件与Model的双向同步：

修改signup.razor

@code {
    // 实例化Model对象，可结合依赖注入获取EF上下文
    private User user = new User();

    private void HandleSubmit()
    {
        // 此时user已自动同步输入框的值，直接用EF保存即可
        // _dbContext.Users.Add(user);
        // await _dbContext.SaveChangesAsync();
    }
}

<form>
  <label>Name: </label>
  <!-- 用@bind指令绑定Model属性 -->
  <input type="text" @bind="user.Name"><br>
  
  <label>Email: </label>
  <!-- 注意：需先将User类的Email改为可写属性：public string Email { get; set; } -->
  <input type="text" @bind="user.Email"><br>
  
  <!-- ... -->
  <button type="submit" @onclick="HandleSubmit">Submit</button>
</form>

2. 单向绑定（按需使用） #

如果只需要单一方向的同步：

• 从Model到控件：直接给控件赋值

  <input type="text" value="@user.Name" />
  

• 从控件到Model：通过输入事件手动更新

  <input type="text" value="@user.Name" @oninput="(e) => user.Name = e.Value.ToString()" />
  

3. 手动遍历控件（不推荐，仅特殊场景使用） #

如果必须手动遍历控件，可通过JS互操作结合反射实现，但会绕过Blazor的组件生命周期，容易引发问题：

步骤1：添加JS函数（wwwroot/js/formUtils.js）

// 获取所有输入控件的值，返回键值对（控件name为键）
function getFormValues() {
    const inputs = document.querySelectorAll('form input');
    const values = {};
    inputs.forEach(input => {
        if (input.name) values[input.name] = input.value;
    });
    return values;
}

// 将Model的值写入对应控件
function setFormValues(model) {
    const inputs = document.querySelectorAll('form input');
    inputs.forEach(input => {
        if (input.name in model) input.value = model[input.name];
    });
}

步骤2：Blazor页面调用

@inject IJSRuntime JSRuntime
@code {
    private User user = new User();

    // 控件值同步到Model
    private async Task SyncToModel()
    {
        var formValues = await JSRuntime.InvokeAsync<Dictionary<string, string>>("getFormValues");
        // 反射赋值
        foreach (var kvp in formValues)
        {
            var prop = typeof(User).GetProperty(kvp.Key);
            if (prop != null && prop.CanWrite)
            {
                prop.SetValue(user, kvp.Value);
            }
        }
    }

    // Model值同步到控件
    private async Task SyncToControls()
    {
        await JSRuntime.InvokeVoidAsync("setFormValues", user);
    }
}

关键注意事项 #

• 你的User类中Email是只读属性（仅get），无论是绑定还是手动赋值都无法写入，必须修改为public string Email { get; set; }
• 优先使用Blazor原生数据绑定，手动操作DOM属于非常规用法，会增加维护成本和潜在bug

内容的提问来源于stack exchange，提问作者David Thielen