MVC DropDownListFor Null Values

2019-04-05 00:17发布

问题:

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:

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

回答1:

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();
}


回答2:

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"} );


回答3:

use jQuery prepend to fix the problem with ease.

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