Как изменить html тип ввода на основе значения другого текстового поля MVC? - PullRequest
Новая
       4

Как изменить html тип ввода на основе значения другого текстового поля MVC?

0 голосов
/ 04 марта 2020

Я прошел через подобные вопросы, но все еще не мог понять.

У меня есть форма, показанная ниже. Один из типов ввода является скрытым. Значения для обоих текстовых полей определяются моделью, передаваемой из контроллера. 

 <form asp-action="Edit">
     //input one
     <div class="form-group" id="control1">
            <label asp-for="Value" class="control-label"></label>
            <input asp-for="Value" class="form-control" required="required" id="param2" />
            <span asp-validation-for="Value" class="text-danger"></span>
     </div>
     <input type="hidden" asp-for="Type" id="param1" />
 </form>

Тип ввода по умолчанию - текстовое поле, но предположим, что если значение asp -for = "Тип" равно "drop", я хочу изменить ввод введите раскрывающийся список с True или False Option. Я попробовал следующее. Я добавил новую группу форм и назначил id = control2. 

       <div class="form-group" id="control2">
            <select asp-for="Value">
                <option value="True">True</option>
                <option value="False">False</option>
            </select>
        </div>

Что я сделал, я выбрал значение param1 , используя jquery и, если оно равно " bool "тогда я скрываю control1 и показываю control2 (что неверно). Поэтому, даже если я выбрал значение с помощью раскрывающегося списка в элементе управления 2, значение текстового поля из элемента control1 (которое я скрываю) используется при возникновении процедуры POST.

Может кто-нибудь сообщить мне об этом? Либо альтернативный метод, либо продолжайте использовать мой метод, чтобы использовать значение control2

Большое спасибо заранее!

1 Ответ

0 голосов
/ 04 марта 2020

Вместо использования jQuery вы можете использовать синтаксис razor для добавления или удаления элемента из DOM. Обновите ваш код, как показано ниже. 

<form asp-action="Edit">
     //input one
	 
	 <input type="hidden" asp-for="Type" id="param1" />
	 @if(Model.Type.Equals("Drop"))
	 {
		 <div class="form-group" id="control2">
            <select asp-for="Value">
                <option value="True">True</option>
                <option value="False">False</option>
            </select>
		</div>
	 }
	 else
	 {
		<div class="form-group" id="control1">
            <label asp-for="Value" class="control-label"></label>
            <input asp-for="Value" class="form-control" required="required" id="param2" />
            <span asp-validation-for="Value" class="text-danger"></span>
		</div>
	 }
     
 </form>

Здесь, если условие истинно, оно добавит выпадающий список в DOM, иначе добавит texbox.

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

...