如何更改 Razor Pages 中的表单控件 ID 和名称答案

【问题标题】：How to change the form controls id and name in Razor Pages如何更改 Razor Pages 中的表单控件 ID 和名称
【发布时间】：2018-10-22 18:30:15
【问题描述】：

我有一个名为 ContactViewModel 的 ViewModel 支持的联系 Razor 页面。生成的html如下。

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

我有另一个 Razor 页面，其表单由 ShippingAddressViewModel 支持。

<form method="post">
    <div class="form-group">
        <input placeholder="First Name" class="form-control" type="text" id="ShippingAddressViewModel_FirstName" name="ShippingAddressViewModel.FirstName" value="" />
    </div>
    <div class="form-group">
        <input placeholder="Last Name" class="form-control" type="text" id="ShippingAddressViewModel_LastName" name="ShippingAddressViewModel.LastName" value="" />
    </div>
    <div class="form-group">
        <input placeholder="Zip Code" class="form-control" type="text" id="ShippingAddressViewModel_ZipCode" name="ShippingAddressViewModel.ZipCode" value="" />
    </div>
    <input type="submit" value="SUBMIT" class="btn btn-default" />
</form>

我想对FirstName 和LastName 应用JS 客户端验证。由于控件的name 和id 不同，我必须创建两个JavaScript 方法来定位控件。

Razor Pages 中是否有办法支持具有不同视图模型但 id 和 name 相同的页面？

【问题讨论】：

标签： asp.net .net-core razorengine razor-pages

【解决方案1】：

这个问题是因为你有一个对象。您可以在 PageModel 中创建两个不同的变量。

[BindProperty]
public string FirstName { get; set; }
[BindProperty]
public string LastName { get; set; }

现在你的视图可以有以下代码：

<input asp-for="FirstName" />
<input asp-for="LastName" />

这将具有以下html：

<input type="text" id="FirstName" name="FirstName" value="" />
<input type="text" id="LastName" name="LastName" value="" />

希望对你有帮助。

【讨论】：