c# MVC Dropdownlist post selected value

Question

Let me start by saying this: I have looked at multiple answers, and I can't just seem to wrap my head around it - it may be that I'm just brainfarted. But here goes my question:

My question is specifically regarding the dropdownlist: With the hardcoded values: today, month, year.

Whenever I select something in the dropdownlist, I want to post/submit the value, for example "today" to the controller. How do I do this?

Thanks for your time.

@using (Html.BeginForm("DisplayDetails", "Client"))
{
    @*Start of searchBox*@
    <div id="searchBox">
        Enter client e-mail: <input id="txtUser" type="text" name="clientID" /> <input id="btnFind" type="submit" />
    </div>
    @*<--- End of searchBox --->*@

    if (Model != null)
    {
        @*Start of infobox and wrapper*@
        <div id="infoBoxWrapper">
            <div class="infoBox">
                <fieldset>
                    <legend style="padding: 0.2em 0.5em; border: 1px solid black; font-size: large;"> Client info </legend>

                    <table>
                        <tr>
                            <td> <b> First name: </b></td>
                            <td>
                                @Html.DisplayFor(m => m.FName)
                            </td>

                        </tr>
                        <tr>
                            <td> <b> Last name: </b></td>
                            <td> @Html.DisplayFor(m => m.LName) </td>
                        </tr>
                        <tr>
                            <td> <b> Phone: </b></td>
                            <td> @Html.DisplayFor(m => m.Phone)</td>
                        </tr>
                        <tr>
                            <td> <b> E-mail: </b></td>
                            <td> @Html.DisplayFor(m => m.UserID) </td>
                        </tr>
                    </table>

                </fieldset>
            </div>
            @*<--- End of infobox --->*@

            @*Start of recordsBox*@
            <div id="recordsBox">
                <fieldset>
                    <legend style="padding: 0.2em 0.5em; border: 1px solid black; font-size: large;"> Records </legend>
                    <table>
                        <tr>
                            <td> <b>Time</b></td>
                            <td> <b>Systolic</b> </td>
                            <td> <b>Diastolic</b> </td>
                            <td> <b>Pulse</b> </td>
                        </tr>
                        @for (int i = 0; i < Model.Records.Count; i++)
                        {
                            string style = null;
                            if (Model.Records[i].Score == 1) { style = "background-color:green"; }
                            else if (Model.Records[i].Score == 2) { style = "background-color:blue"; }
                            else if (Model.Records[i].Score == 3) { style = "background-color:yellow"; }
                            else if (Model.Records[i].Score == 4) { style = "background-color:orange"; }
                            else if (Model.Records[i].Score == 5) { style = "background-color:red"; }

                            <tr style="@style">
                                <td>
                                    @Model.Records[i].Time
                                </td>
                                <td>
                                    @Html.DisplayFor(m => m.Records[i].Systolic)
                                </td>
                                <td>
                                    @Html.DisplayFor(m => m.Records[i].Diastolic)
                                </td>
                                <td>
                                    @Html.DisplayFor(m => m.Records[i].Pulse)
                                </td>
                            </tr>
                        }
                    </table>
                </fieldset>
            </div>
        </div>
        @*<--- End of infobox wrapper --->*@

        @*Start of chartbox*@
        <div id="chartWrapper">
            <div id="comboBox">
                <select id="dpChoice">
                    <option value="today">Today</option>
                    <option value="month">This month</option>
                    <option value="year">This year</option>
                </select>
            </div>
            <div id="chartbox">
                @Model.Chart
            </div>
        </div>
        @*<--- End of chartbox --->*@
    }
    else
    {
        <label> Search for a client...</label>
    }
}

[This SO question might help](http://stackoverflow.com/questions/17148482/mvc-post-values-using-ajax-when-value-selected-in-dropdownlist) It shows how to make a POST to a controller when an item in a dropdown list is selected. Did you read this one during your research? — Jason Evans, Aug 13 '15 at 09:48

score 2 · Accepted Answer · answered Aug 13 '15 at 12:18

2

Your select does not have a name attribute so it is not sent in the form data. Change it to (say)

<select name="choice">
  ...
</select>

and depending if the first option is selected it will post back choice: today which you can access by adding the parameter string choice to your POST method. However I would strongly recommend you use a view model including

public class MyViewModel
{
  public int ClientEmail{ get; set; }
  public string Choice { get; set; }
  public IEnumerable<SelectListItem> ChoiceList { get; set; }
  ....
}

and populate the collection in the controller

model.ChoiceList = new List<SelectListItem>()
{
  new SelectListItem(){ Value = "today", Text = "Today" },
  new SelectListItem(){ Value = "month", Text = "This month" },
}

and then in the view

@Html.TextBoxFor(m => m.ClientEmail)
....
@Html.DropDownListFor(m => m.Choice, Model.ChoiceList)

and then post back the view model to the controller

answered Aug 13 '15 at 12:18

This helped me understand it a bit, though it is mostly posting that causes me the issues. I've worked with viewdata/viewbag/tempdata but it doesn't seem like what I'm looking for. The model includes a client with multiple records. The records are based on the dropdownlist (day, month and year). I want to update the records depending on the option chosen, but not client – Hans Frifelt Aug 13 '15 at 12:38
Then what is the textbox for if your not changing it? Are you wanting to filter your table of records based on the selected option? If so, your controller method should be `public ActionResult DisplayDetails(string choice) { ...}` as I noted in the answer. Then change the form to `BeginForm("DisplayDetails", "Client", FormMethod.Get)`. When you submit, the value of `choice` will be the value of the selected option so you can filter the data and return the view. But you will vastly improve performance if you use ajax to just update the current page rather that regenerating the whole view again. – Aug 13 '15 at 12:45
I use the textbox to find a specific client, it's merely a search field. The controller currently looks as you say, except it also takes a client ID. I do want to use Ajax, but I have no experience using, which is probably also cause of my confusion. Thanks for the help. – Hans Frifelt Aug 13 '15 at 13:01
Strongly suggest you start learning javascript/jquery/ajax (its absolutely fundamental to writing web apps these days) and the code to do this is only 4 lines of code in a script :) – Aug 13 '15 at 13:04
No doubt. I've mostly been used to working in asp.net, so getting the concepts of MVC has been a bit tricky, and without the knowledge how to use Ajax/jquery it's a bit tricky, especially when you just jump into a project :p – Hans Frifelt Aug 13 '15 at 13:07
If I remember tomorrow, I'll post a link to a previous answer or 2 showing how to do this using ajax :) – Aug 13 '15 at 13:10
Would be appreciated much – Hans Frifelt Aug 13 '15 at 13:12
Refer [this answer](http://stackoverflow.com/questions/31847228/model-collections-lost-when-form-submitted/31848684#31848684) for an example of using ajax to update the DOM and improve performance. – Aug 14 '15 at 01:24
Thanks a lot, it has really helped me. Just one question if you have time: In the ajax example you append the table, adding new items. What would be the correct way to simply replace the items by the ones from the partial view. – Hans Frifelt Aug 14 '15 at 08:45
It would just be `table.html(html);` - see [jquery.html](http://api.jquery.com/html/) vs [jquery.append](http://api.jquery.com/append/) – Aug 14 '15 at 08:48

c# MVC Dropdownlist post selected value

1 Answers1