Question

我需要根据下拉列表中选择的内容隐藏/显示cshtml中的一些控件。我希望能够在将下拉列表的值发送回模型并保存之前隐藏/显示这些部分。我该怎么做呢？我看了这些问题，但没有运气 question1 question2

@model Models.EmployerModel
@{ ViewBag.Title = "Index"; }
<div>
<p class="validateTips">
    Enter the new employment details.</p>
<fieldset>
    <table>
        <tr>
            <td>
                <label>
                    <b>Employment Type:</b></label>
            </td>
            <td>
                @Html.DropDownList("EmploymentTypeDrp")
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <b>Job Title:</b></label>
            </td>
            <td>
                @Html.TextBoxFor(m => m.JobTitle, new { Value = @Model.JobTitle })
            </td>
        </tr>
    </table>
</fieldset>
</div>

所以我需要的是根据EmploymentTypeDrp中选择的内容，作业标题是否可见。我有一个JQuery位来根据新信息更新模型。

Answer 1

你能试试吗

您的观点

@model Models.EmployerModel
@{ ViewBag.Title = "Index"; }
<div>
<p class="validateTips">
    Enter the new employment details.</p>
<fieldset>
    <table>
        <tr>
            <td>
                <label>
                    <b>Employment Type:</b></label>
            </td>
            <td>
                     @Html.DropDownList("EmploymentTypeDrp", new List<SelectListItem>

             {
                new SelectListItem{ Text="Admin", Value = "1" },
                new SelectListItem{ Text="HR", Value = "0" }
             }) // I just hard coded the departments here                
          </td>
        </tr>
        <tr>
            <td>
                <label>
                    <b>Job Title:</b></label>
            </td>
            <td>
                @Html.TextBoxFor(m => m.JobTitle, new { Value = @Model.JobTitle })
            </td>
        </tr>
    </table>
</fieldset>
</div>

在视图的脚本部分，您可以按照 @Stephen Muecke

的建议使用.change()事件

<script>
$(document).ready(function () {
  $('#EmploymentTypeDrp').on('change', function (e) {

        var selectValue = this.value;
        if (selectValue == "Admin") {
            $("#JobTitle").show();
        }
        else {
            $("#JobTitle").hide();
        }

    });
});
</script>

如何在剃刀视图中有条件地显示控件？

1 个答案: