Question

I have a “Create User” form where a user can have any number of roles. Hence I decided to add a dropdownlist which is populated by roles and add an “Add” link/button next:

<label for="Role">Roles</label>
@Html.DropDownList("Roles", new SelectList((IEnumerable<RoleSummaryView>)ViewData["Roles"], "Id", "Name")) 
<div>
    <a href="#" class="ym-gbox tbalign" style="padding-top:3px;">Add</a>
    <a href="#" class="ym-gbox tbalign" style="padding-top:3px;">Delete</a>
</div> 

In this scenario it is supposed that when “Add” is clicked another dropdownlist populated with the same roles data and another “Add” and “Delete” links/buttons next to the list should be added in a new line. Now if the user clicks to any “Add” the same process will be repeated. If the user clicks to “Delete” the dropdownlist next to the link/button should be gone.

I’ve tried to write the javascript code and the controller with no success. Any suggestions?

Answer 1

you should an list or array for binding selected values on server-side.

ActionResult MyActionName(List<int> SelectedRoles){

}

—————View—————-

<script>
     var index = 0;
     $("#addButton").click(function(){
            var newSelect = $("<select id='SelectedRoles["+ index +"]' name='SelectedRoles["+ index +"]'></select>");
            $('#SelectedRoles[0] option').each(function(){
                 var option = $("<option></option>").val($(this).val()).text($(this).text());
                 newSelect.append(option);
            });

            $("#newSelectContainer").append(newSelect);

            index++;
     });
     $("#removeButton").click(function(){
          $("SelectedRoles["+ --index +"]").remove();
     })
</script>


<label for="Role">Roles</label>
@Html.DropDownList("SelectedRoles[0]", new SelectList((IEnumerable<RoleSummaryView>)ViewData["Roles"], "Id", "Name")) 
<div>
    <a href="#" class="ym-gbox tbalign" style="padding-top:3px;" id="addButton">Add</a>
    <a href="#" class="ym-gbox tbalign" style="padding-top:3px;" id="removeButton">Delete</a>
</div>