Question

我正在处理一个Web表单，用户需要输入他们在任务上花费的小时数。如果他们输入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

你可以试试像这样的事情

<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>

然后你可以编写脚本来感知小偷的小时文本框的价值

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

})
</script>

相同的功能可以写入第2周，并显示其ThirdPropery文本框

如果所有NumericTextBoxFor都有input-time类

您可以从input-time类为

的所有元素编写单个函数

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

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

});

请考虑我假设你要显示和隐藏的元素就在你的`NumericTextBox

旁边

希望它有助于

动态显示表单元素

1 个答案: