Getting options FROM html select TO MVC c# Controller

Question

I have no idea how to go about this, but I need to get each <option> from an html select multiple list, as an array, and send it back to a C# controller as such. Need to pull the text of each option for the purposes of my application.

Anybody have any idea how to go about this? I need the select so that users can choose to remove options, but once done I need to collect the options that are still in the list. Maybe via jQuery or javascript?

This is my code so far:

    @using (Html.BeginForm("NewTable", "Table", FormMethod.Post))
    {
        <div class="form-group">
            <label for="fieldList">Field List</label>
            <select multiple class="form-control" id="fieldList" style="height: 300px">
                <option>Example 1</option>
                <option>Example 2</option>
            </select>
        </div>
        <button class="btn btn-default" type="submit">Create Table</button>
    }

Answer 1

Use jQuery to append to/remove from a list of hidden fields as options are added and removed, e.g.:

<input type="hidden" name="SelectedOptions" value="EnteredValueGoesHere" />

Then, create a model property to match the name:

public class MyModel
{
    public List<string> SelectedOptions { get; set; }
}

Then make sure your controller action has the following signature:

public ActionResult SomeAction(MyModel model)

The default model binder binds form fields to model properties where the name of the property matches the name of the field so, assuming your hidden fields are correctly populated and maintained by your Javascript, this will bind the hidden fields to the list when the form is submitted.

Then, your select list becomes superficial - just used for the users' convenience, but never actually bound to a model object.

Answer 2

Use the following code:

<% using (Html.BeginForm("About", "Home", FormMethod.Post))
   {%>

    <div class="form-group">
        <label for="fieldList">Field List</label>
        <select multiple class="form-control" id="fieldList" name="sl" style="height: 300px">
            <option name="op1">Example 1</option>
            <option name="op2">Example 2</option>
        </select>
        <input type="hidden" name="optionValues" id="optionValues" value="1" />
    </div>
    <button class="btn btn-default" type="submit">Create Table</button>
<%} %>
<script type="text/jscript">
    $("form").submit(function () {

        var optionsValues = "";
        $("#fieldList option").each(function () {
            optionsValues = $(this).attr("name") + "=" + $(this).attr("selected") + ",";
            alert("1");
        });
        $("#optionValues").attr("value", optionsValues);
        alert("2");
    });
</script>

I add hidden input field and when submitting set options value into it. At server side read value of hidden input with Request.Form("optionValues") and etc.

Answer 3

Just assign a name attribute to each option:

<option name="op1">Example1</option>
...

On server side access to options with:

Request.Form["op1"]
...