将模型属性绑定到多个字段

Question

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

我看过这个 post：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>

目前，如果我 select 第一个单选按钮，并填充第一个字段，那么这会在回传中正确完成。如果我 select 第二个单选按钮并填充第二个字段，则属性返回为 NULL。是否可以简单地禁用隐藏 div 中的字段？

编辑：禁用该元素的建议最终与显示隐藏一起工作 - 我认为这不会像为每个下拉列表分配不同的 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 加载下拉列表，而不是 hiding/showing。

选项 2 就像@Evan Mulawski 建议的那样，您可以在视图和 ViewModel 上使用两个单独的字段。这可能是最简单的方法。

选项 3

您可以将 hiding/showing 下拉菜单移动到表单标签的 outside/inside 之外。

    $("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 所建议的，disabling/enabling 元素而不是 hide/show。

将模型属性绑定到多个字段

Bind Model property to multiple fields

c#

asp.net-mvc

model-binding

将模型 属性 绑定到多个字段

Bind Model property to multiple fields

c#

asp.net-mvc

model-binding

将模型属性绑定到多个字段