CODEWITHSUNDEEP
c#asp.net-mvcmodel-binding
Mark
Mark

Reputation: 315

Bind Model property to multiple fields

I have a model string property: SecurityGroupMapping, which I want to be able to set using one of two lists of strings. The lists are shown based on the selection given in a radio group assigned to a bool.

I've looked at this post: MVC 3 Bind Model property to 2 fields (e.g. Other Title), but I have a slightly different scenario, and was hoping there was an easy way to disable a field if it's not in use...

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

Currently, if I select the first radio button, and populate the first field, then this comes through in the Postback correctly. If I select the second radio button and populate the second field, then the property comes back as NULL. Is it possible to simply disable a field within a hidden div?

EDIT: The suggestion to disable the element worked with the show hide in the end - I didn't think it would be as simple as just assigning each drop down a different ID, and then disabling it in the 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();
        }
    }
);

Upvotes: 0

Views: 1982

Answers (1)

pjobs
pjobs

Reputation: 1247

Option 1

Based on your radio button selection you should just load the dropdown with different SelectList, instead of hiding/showing.

Option 2 Like @Evan Mulawski suggested you can use two separate fields on view and ViewModel. This might be the easiest and simple to do it.

Option 3

Instead of hiding/showing dropdowns you can just move them outside/inside of form tag.

    $("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"))                                         
               }
           });

Option 4 - The easiest of all

As @Stephen Muecke suggested , disabling/enabling the elements instead of hide/show.

Upvotes: 1

Related Questions