MVC DropDownListFor Null Values

Question

I am having problems using the dropdownlistfor htmlhelper in MVC. When post back occurs there is nothing selected and the values in the model for the list, and the selected item are null.

Here are my Models:

namespace MvcTestWebApp.Models
{
    public class Customer
    {
        public string name { get; set; }

        public List<SelectListItem> members { get; set; }

        public Member selected { get; set; }
    }

    public class Member
    {
        public string name { get; set; }

    }
}

Controller:

namespace MvcTestWebApp.Models
{
    public class CustomerController : Controller
    {
        //
        // GET: /Customer/
        public ActionResult Index()
        {
            Customer cust = new Customer() { name = "Cust1" };
            cust.members = new List<SelectListItem>();

            cust.members.Add(new SelectListItem(){Text = "Bob"} );
            cust.members.Add(new SelectListItem(){Text = "Dave"} );

            return View(cust);
        }

        [HttpPost]
        public ActionResult Index(Customer customer)
        {

           return View();
        }


    }
}

And View:

    @model MvcTestWebApp.Models.Customer

@{
    ViewBag.Title = "Customer";
    Layout = null;
}

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title> Index </title>
</head>

    <body>


@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Customer Data</legend>

          @Html.HiddenFor(model => model.name)

          @Html.DropDownListFor(model => model.selected, Model.members, "--Select--")

        <p>
            <input type="submit" value="Save" />
        </p>

        </fieldset> 
}

    </body>

</html>

When I select something from the select list and click the submit button nulls are returned:

nullselect

Can anyone shed some light on what I'm doing wrong?

Lesmana · Accepted Answer · 2013-05-04 20:34:54Z

22

The issue you are running into is that MVC does not know how to translate the selected value of the drop down list (which is a string) to the object Member.

What you should do is have a selectedValue property that is used to set the value in the dropdown and retrieve the returned value.

New Customer Class:

public class Customer
{
  public string name { get; set; }

  public List<SelectListItem> members { get; set; }

  public string selectedValue { get; set; }

  public Member selected { get; set; }
}

Updated Dropdown list control:

@Html.DropDownListFor(model => model.selectedValue, Model.members, "--Select--")

This will return the selected value from the dropdown list into the property selectedValue.

The reason that your List of members is returned null is because HTML does not return the options in a drop down list, it only returns the selected value. So when the information comes into the method, it is only given the values of the input forms.

If you want to see what information gets sent back to the server you can use the developer console and capture the return Http request

and/or

You can add FormCollection collection to the parameters of the controller action to see what information MVC is using to build the objects it passes to the methods.

[HttpPost]
public ActionResult Index(Customer customer, FormCollection collection)
{

  return View();
}

edited May 4, 2013 at 20:34

Lesmana

27.3k12 gold badges84 silver badges87 bronze badges

answered Apr 17, 2013 at 11:51

SBurris

7,4585 gold badges32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cadi2108 Over a year ago

+1 for "You can add FormCollection collection to the parameters of the controller action to see what information MVC is using to build the objects it passes to the methods." I accidently set atribute form for another form and I thought for few hours, that my DropDownListFor don't want to return Guid... FormCollection told me, that the problem is form not model

webdeveloper · Accepted Answer · 2013-04-17 11:32:24Z

0

cust.members.Add(new SelectListItem(){Text = "Bob"} );
cust.members.Add(new SelectListItem(){Text = "Dave"} );

Try to set value:

cust.members.Add(new SelectListItem(){Value = "Bob", Text = "Bob"} );
cust.members.Add(new SelectListItem(){Value = "Dave", Text = "Dave"} );

answered Apr 17, 2013 at 11:32

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

2 Comments

Christopher Townsend Over a year ago

Nope still doesn't work. Good try tho :) I thought that might have done it after a facepalm but no go, its still null. I also tried changing the cust.selected to a SelectListItem and this didnt work either.

webdeveloper Over a year ago

@ChristopherTownsend Change helper property @Html.DropDownListFor(model => model.selected.name, Model.members, "--Select--") and create object in GET action new Customer() { name = "Cust1", selected = new Member() }

Jerrime25 · Accepted Answer · 2015-07-03 07:56:56Z

-4

use jQuery prepend to fix the problem with ease.

$("#idOfSelectTag").prepend('
                              <option selected="selected" value="null">
                                -- Select School --
                              </option>
                            ');

answered Jul 3, 2015 at 7:56

Jerrime25

131 silver badge8 bronze badges

Collectives™ on Stack Overflow

MVC DropDownListFor Null Values

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related