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>

我想将JS客户端验证应用于FirstName和LastName。由于控件的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和名称

1 个答案: