Динамическое отображение элементов формы

Question

Я работаю над веб-формой, где пользователю нужно ввести количество часов, потраченных на выполнение задачи. Если они войдут в 0 часов, мне нужно показать еще TextBox (без необходимости публикации) в соседней колонке, которая должна быть обязательной, если поле часов остается на 0.

Вот моя наценка сейчас:

<table> 
    <tr> 
     <th /> 
     <th class="column-header">Time Spent</th> 
     <th class="column-header">Reason for Cancellation</th> 
    </tr> 
    <tr> 
     <th class="row-header">Week 1</th> 
     <td>@Html.NumericTextBoxFor(x => x.Week1.TimeSpent)</td> 
     <td>@Html.TextBoxFor(x => x.Week1.ReasonForCancellation)</td> 
    </tr> 
    <tr> 
     <th class="row-header">Week 2</th> 
     <td>@Html.NumericTextBoxFor(x => x.Week2.TimeSpent)</td> 
     <td>@Html.TextBoxFor(x => x.Week2.ReasonForCancellation)</td> 
    </tr> 
    ... 
</table> 

Как я могу сделать динамик TextBox без публикации? Я предполагаю, что для этого потребуется некоторый JavaScript или Ajax, но я немного не знаком с обоими (это мой первый набег на веб-формы).

Answer 1

Вы можете попробовать somethig как этот

<tr> 
     <th class="row-header">Week 1</th> 
     <td>@Html.NumericTextBoxFor(x => x.Week1.TimeSpent)</td> 
     <td>@Html.TextBoxFor(x => x.Week1.ReasonForCancellation,new { @style="display:none;"})</td> 
    </tr> 
    <tr> 
     <th class="row-header">Week 2</th> 
     <td>@Html.NumericTextBoxFor(x => x.Week2.TimeSpent)</td> 
     <td>@Html.TextBoxFor(x => x.Week2.ReasonForCancellation,new { @style="display:none;"})</td> 
    </tr> 

Затем вы можете написать скрипт, чтобы ощутить значение текстового поля в час на foucusout

<script type="text/javascript"> 
$('#@Html.FieldIdFor(x => x.Week1.TimeSpent)') .focusout(function() { 
    if($(this).val()==0) 
{ 
    $('#@Html.FieldIdFor(x => x.Week1.ThirdProperty)').show(); 
} 

}) 
</script> 

же функция может быть записана на week2 часов и показать его ThirdPropery textbox

Если все NumericTextBoxFor будут иметь input-time класс

вы можете написать одну функцию из всех элементов, имеющих input-time класса как

$('.input-time').focusout(function(){ 

    if($(this).val()==0) 
    { 
      $(this).next().show(); 
    } 
else 
    $(this).next().hide(); 

}); 

Пожалуйста, обратите внимание, что я предположу, что элемент, который вы хотите показать и скрыть это прямо рядом с `NumericTextBox

Надеется, что это помогает