Как изменить идентификатор элемента управления формы и имя в Razor Pages - PullRequest
Новая
       45

Как изменить идентификатор элемента управления формы и имя в Razor Pages

0 голосов
/ 12 мая 2018

У меня есть страница контактной бритвы, поддерживаемая моделью представления под названием ContactViewModel. Сгенерированный 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 одинаковы?

1 Ответ

0 голосов
/ 14 мая 2018

Эта проблема вызвана тем, что у вас есть объект. Вы можете создать две разные переменные в вашей 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="" />

Надеюсь, это поможет.

...