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

Question

我有一个由名为 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 相同的页面？

Answer 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="" />

希望对您有所帮助。

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

How to change the form controls id and name in Razor Pages

asp.net

razorengine

.net-core

razor-pages