如何在Razor Pages中统一不同ViewModel对应表单控件的id与name

当然可以！你完全可以让基于不同ViewModel的Razor页面表单控件，拥有一致的id和name属性，这样就能复用同一段JS客户端验证逻辑，不用为每个ViewModel单独编写方法。下面分享几个实用的实现方案：

1. 通过[BindProperty]特性指定绑定名称 #

这是最推荐的后端配置方式，直接在ViewModel的属性上指定绑定的名称，这样Razor生成的表单控件会自动使用你指定的名称，而不是默认的ViewModel.Property格式。

比如修改你的ContactViewModel：

public class ContactViewModel
{
    [BindProperty(Name = "FirstName")]
    public string FirstName { get; set; }

    [BindProperty(Name = "LastName")]
    public string LastName { get; set; }
}

再修改ShippingAddressViewModel：

public class ShippingAddressViewModel
{
    [BindProperty(Name = "FirstName")]
    public string FirstName { get; set; }

    [BindProperty(Name = "LastName")]
    public string LastName { get; set; }

    public string ZipCode { get; set; }
}

这样生成的HTML控件，不管是哪个ViewModel的页面，FirstName和LastName的id都会是FirstName/LastName，name也会是FirstName/LastName，完全一致。后端ModelBinding也能正常识别这些参数，因为BindProperty已经指定了绑定名称。

2. 手动在TagHelper中指定ID和Name属性 #

如果你不想修改ViewModel，也可以在Razor页面的控件上直接手动覆盖id和name属性：

比如在Contact页面的表单里：

<form method="post">
    <div class="form-group">
        <input asp-for="FirstName" id="FirstName" name="FirstName" class="form-control" placeholder="First Name" />
    </div>
    <div class="form-group">
        <input asp-for="LastName" id="LastName" name="LastName" class="form-control" placeholder="Last Name" />
    </div>
    <input type="submit" value="SUBMIT" class="btn btn-default" />
</form>

ShippingAddress页面同理，手动设置id和name为统一值。这种方式比较灵活，但需要每个控件都手动配置，适合小范围的修改。

3. 使用EditorTemplate复用表单控件 #

如果这两个ViewModel的姓名字段需要复用相同的布局和验证逻辑，还可以创建共享的EditorTemplate，从根源上统一控件的属性：

1. 在项目中创建Pages/Shared/EditorTemplates文件夹（如果不存在的话）
2. 创建NameFields.cshtml文件，内容如下：

@model object
<div class="form-group">
    <input asp-for="FirstName" id="FirstName" name="FirstName" class="form-control" placeholder="First Name" />
</div>
<div class="form-group">
    <input asp-for="LastName" id="LastName" name="LastName" class="form-control" placeholder="Last Name" />
</div>

3. 在Contact页面中调用这个模板：

<form method="post">
    @Html.EditorFor(model => model, "NameFields")
    <input type="submit" value="SUBMIT" class="btn btn-default" />
</form>

4. 在ShippingAddress页面中调用模板，再加上ZipCode字段：

<form method="post">
    @Html.EditorFor(model => model, "NameFields")
    <div class="form-group">
        <input asp-for="ZipCode" class="form-control" type="text" placeholder="Zip Code" />
    </div>
    <input type="submit" value="SUBMIT" class="btn btn-default" />
</form>

这种方式不仅统一了控件的id和name，还实现了代码复用，后续要修改姓名字段的布局或验证，只需要修改EditorTemplate即可。

最终效果 #

完成以上任意一种配置后，你就可以编写一段通用的JS验证逻辑，比如：

function validateNameInputs() {
    const firstNameInput = document.getElementById('FirstName');
    const lastNameInput = document.getElementById('LastName');
    let isValid = true;

    // 验证FirstName
    if (!firstNameInput.value.trim()) {
        firstNameInput.classList.add('is-invalid');
        isValid = false;
    } else {
        firstNameInput.classList.remove('is-invalid');
    }

    // 验证LastName
    if (!lastNameInput.value.trim()) {
        lastNameInput.classList.add('is-invalid');
        isValid = false;
    } else {
        lastNameInput.classList.remove('is-invalid');
    }

    return isValid;
}

这段JS可以直接在两个页面中复用，不用再为不同的控件ID编写重复代码。

内容的提问来源于stack exchange，提问作者wonderful world