Question

我有一个模型字符串属性：SecurityGroupMapping，我希望能够使用两个字符串列表之一进行设置。列表是根据分配给布尔的无线电组中给出的选择显示的。

我看过这篇文章：MVC 3 Bind Model property to 2 fields (e.g. Other Title)，但我的情况略有不同，并希望有一种简单的方法可以禁用字段，如果它没有被使用的话。

<div class="editor-label">
    @Html.Label("Choose how to assign Users to a Security Group")
</div>
<div class="editor-field" style="width: 300px; display: inline;">
    @Html.RadioButtonFor(m => m.UseDefaultGroupSecurityGroup, false) Map Individual Security Group
    @Html.RadioButtonFor(m => m.UseDefaultGroupSecurityGroup, true) Use Default Security Group
</div>
<br/>
<div id="ShowUserSecurityGroup">
    <div class="editor-label">
        @Html.Label("Map the CSV field for User's Security Group")
    </div>
    <div style="width: 300px; display: inline;">
        @Html.DropDownListFor(m => m.SecurityGroupMapping, new SelectList(Model.CsvFields), "Please Select")
    </div>
</div>
<div id="ShowGroupSecurityGroup">
    <div class="editor-label">
        @Html.Label("Default Security Group for all Users")
    </div>
    <div style="width: 300px; display: inline;">
        @Html.DropDownListFor(m => m.SecurityGroupMapping, new SelectList(Model.SecurityGroups), "Please Select")
    </div>
</div>

<script>
$("input[name=\"UseDefaultGroupSecurityGroup\"]:radio").change(
    function () {
        var selectedValue = $("input:radio[name=UseDefaultGroupSecurityGroup]:checked").val();

        if (selectedValue === "True") {
            $("#ShowGroupSecurityGroup").show();
            $("#ShowUserSecurityGroup").hide();
        }
        else {
            $("#ShowGroupSecurityGroup").hide();
            $("#ShowUserSecurityGroup").show();
        }
    }
);
</script>

目前，如果我选择第一个单选按钮，并填充第一个字段，则会在回发中正确显示。如果我选择第二个单选按钮并填充第二个字段，则该属性将返回NULL。是否可以简单地禁用隐藏div中的字段？

编辑：最后禁用元素的建议隐藏了show hide - 我没想到只需将每个下拉列表分配给不同的ID，然后在JQuery中禁用它。

@Html.DropDownListFor(m => m.SecurityGroupMapping, new SelectList(Model.SecurityGroups), "Please Select", new { id = "GroupSecurityGroup" })

$("input[name=\"UseDefaultGroupSecurityGroup\"]:radio").change(
    function () {
        var selectedValue = $("input:radio[name=UseDefaultGroupSecurityGroup]:checked").val();

        if (selectedValue === "True") {
            $("#UserSecurityGroup").prop("disabled", true);
            $("#GroupSecurityGroup").prop("disabled", false);
            $("#ShowGroupSecurityGroup").show();
            $("#ShowUserSecurityGroup").hide();
        }
        else {
            $("#UserSecurityGroup").prop("disabled", false);
            $("#GroupSecurityGroup").prop("disabled", true);
            $("#ShowGroupSecurityGroup").hide();
            $("#ShowUserSecurityGroup").show();
        }
    }
);

Answer 1

选项1

根据您的单选按钮选择，您应该只使用不同的SelectList加载下拉列表，而不是隐藏/显示。

选项2 就像@Evan Mulawski建议你可以在视图和ViewModel上使用两个单独的字段。这可能是最简单易行的。

选项3

您可以将它们移动到表单标记的外部/内部，而不是隐藏/显示下拉列表。

    $("input[name=\"UseDefaultGroupSecurityGroup\"]:radio").change(
           function () 
           {
               var selectedValue = $("input:radio[name=UseDefaultGroupSecurityGroup]:checked").val();

               if (selectedValue === "True") {
                  $("#ShowUserSecurityGroup").detach().insertAfter($(this).closest("form"))
                  $("#ShowGroupSecurityGroup").detach().appendTo($(this).closest("form"))                            
               }
               else 
               {
                  $("#ShowUserSecurityGroup").detach().appendTo($(this).closest("form"))
                  $("#ShowGroupSecurityGroup").detach().insertAfter($(this).closest("form"))                                         
               }
           });

选项4 - 最简单的

正如@Stephen Muecke建议的那样，禁用/启用元素而不是隐藏/显示。

将Model属性绑定到多个字段

1 个答案: