Question

我有两种客户类型我在WCF中使用服务已知类型，客户类型是主要客户和子客户。我有下拉列表选择客户类型当我选择主要客户时我需要隐藏子客户部分视图反之亦然

    @model SoqiaRazorProject.CustomerService.CustomerData

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@{
    ViewBag.Title = "Customer Data";
}

<h2>CustomerData</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Customer Data</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.CustomerID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CustomerID)
            @Html.ValidationMessageFor(model => model.CustomerID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CardID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CardID)
            @Html.ValidationMessageFor(model => model.CardID)
        </div>

           <div class="editor-label">
            @Html.LabelFor(model => model.Type)
        </div>
        <div class="editor-field">

            @Html.DropDownList("ddlCustomerType",(SelectList)ViewBag.ddlCustomerType,new{@id="ddlCustomerType"})

            @Html.ValidationMessageFor(model => model.Type)

        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NationalityID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("ddlNationality")
            @Html.ValidationMessageFor(model => model.NationalityID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FamilyName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FamilyName)
            @Html.ValidationMessageFor(model => model.FamilyName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FatherName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FatherName)
            @Html.ValidationMessageFor(model => model.FatherName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.GrandFatherName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.GrandFatherName)
            @Html.ValidationMessageFor(model => model.GrandFatherName)
        </div>

我将此J-Query代码编写为隐藏/显示部分视图

     @Scripts.Render("~/bundles/jquery")
         <script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
             $(document).ready(function () {
                 $("ddlCustomerType").change(function HideControls() {
                     var val = $("ddlCustomerType").val();
                     if (val == 2) {
                         $("MainCustomerDiv").hide();
                         $("SubCustomerDiv").show();
                     }
                     else if (val == 3) {
                         $("SubCustomerDiv").hide();
                         $("MainCustomerDiv").show();
                     }

                 })
             });
             </script>

        <div id="MainCustomerDiv">
            @Html.Partial("MainCustomerData")
        </div>
         <div id="SubCustomerDiv">
            @Html.Partial("SubCustomerData")
        </div>

          <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

当我运行应用程序时“我尝试更改下拉列表值，但部分视图未隐藏”

Answer 1

将#char添加到元素选择器中：）

$("#ddlCustomerType").change(function HideControls() {
var val = $("#ddlCustomerType").val();
if (val == 2) {
    $("#MainCustomerDiv").hide();
    $("#SubCustomerDiv").show();
}
else if (val == 3) {
    $("#SubCustomerDiv").hide();
    $("#MainCustomerDiv").show();
}
});

我有两个部分视图，我想隐藏它们取决于dropdownList值的变化

1 个答案: