Question

I am currently working on a C# project using ASP.NET. And I’d like to implement a list of dropboxes. So a User starts with a dropbox and can select a method and next to the dropbox is a + and – button, which enables a user to add more dropboxes. So I am wondering how can I implement that is it possible to build a List of dropboxes in ASP.NET?

Answer 1

You don’t need any server side code for this, client side scripting is ideal solution for your needs.

Having such HTML:

<div id="MainPlaceholder">
    <div id="DropDownPlaceholder">
        <select name="myDropDown">
            <option value="1">First</option>
            <option value="2">Second</option>
            <option value="3">Third</option>
        </select>
        <button type="button" onclick="AddDropDown(this);">+</button>
        <button type="button" onclick="RemoveDropDown(this);">-</button>
    </div>
</div>

You need the following pure JavaScript to make it work:

<script type="text/javascript">
var added_counter = 0;

function AddDropDown(sender) {
    var parent = sender.parentNode;

    //make fresh clone:
    var oClone = parent.cloneNode(true);

    //append to main placeholder:
    parent.parentNode.appendChild(oClone);

    //store change in global variable:
    added_counter++;
}

function RemoveDropDown(sender) {
    //don't allow to remove when there is only one left
    if (added_counter <= 0) {
        alert("One drop down must exist");
        return;
    }

    var parent = sender.parentNode;

    //disable so value won't be passed when form submitted:
    parent.getElementsByTagName("select")[0].disabled = true;

    //hide:
    parent.style.display = "none";

    //store change in global variable:
    added_counter--;    
}
</script>

The code has comments, but if you need any further explanation please feel free to ask.

Live test case.

Edit: As you need to read the selected values on the server side code, better approach would be to change the name of each cloned drop down:

var totalAddedCounter = 0;

function AddDropDown(sender) {
    var parent = sender.parentNode;

    //make fresh clone:
    var oClone = parent.cloneNode(true);

    //assign unique name:
    oClone.getElementsByTagName("select")[0].name += "_" + totalAddedCounter;

    //append to main placeholder:
    parent.parentNode.appendChild(oClone);

    //store change in global variable:
    added_counter++;
    totalAddedCounter++;
}

Now the tricky part is reading those values. Instead of plain dropboxlistID.Text you will have to iterate over all posted values looking for what you need:

foreach (string key in Request.Form.Keys)
{
    if (key.StartsWith("dropboxlistID"))
    {
        string text = Request.Form[key];
        //.....
    }