Why is the DropDown values Null in the POST action? - asp.net-mvc

Question

Below is the View:
<%# Page Title="" Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Index>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Contact
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% using (Html.BeginForm())
{%>
<%=Html.DropDownListFor(x => x.SelectedFavColor, Model.DropDownItems)%>
<%= Html.ValidationMessageFor(x=> x.SelectedFavColor) %>
<input type="submit" value="submit" />
<%} %>
</asp:Content>
Below mentioned is the Model:
namespace MvcApplication1.Models
{
public class Index
{
[Range(0, 1000, ErrorMessage = "hello")]
public int SelectedFavColor { get; set; }
public IEnumerable<SelectListItem> DropDownItems { get; set; }
}
public class Colors
{
public int ColorID { get; set; }
public string ColorName { get; set; }
}
}
I am passing some Dropdown values in the View.
Below is the Controller action:
public ActionResult Contact()
{
List<MvcApplication1.Models.Colors> l = new List<Models.Colors>();
l.Add(new Models.Colors { ColorName = "-1", ColorID = -1 });
l.Add(new Models.Colors { ColorName = "a", ColorID = 0 });
l.Add(new Models.Colors { ColorName = "b", ColorID = 2 });
l.Add(new Models.Colors { ColorName = "c", ColorID = 3 });
l.Add(new Models.Colors { ColorName = "d", ColorID = 4 });
l.Add(new Models.Colors { ColorName = "e", ColorID = 4 });
l.Add(new Models.Colors { ColorName = "f", ColorID = 4 });
var model = new MvcApplication1.Models.Index
{
DropDownItems = l.Select(i => new SelectListItem
{
Text = i.ColorName,
Value = i.ColorID.ToString()
})
};
ViewData["records"] = model.DropDownItems;
return View(model);
}
[HttpPost]
public ActionResult Contact(Index posted, FormCollection collection)
{
posted.SelectedFavColor = Convert.ToInt16(collection["SelectedFavColor"]);
return View(posted);
}
Why is the DropDown values Null in the POST action?

Answer 1

The DropDownItems is null because it is not being POSTed in your form. You are only creating a drop down menu with this: Html.DropDownListFor(x => x.SelectedFavColor, Model.DropDownItems), which is not enough to post the collection.
Posting a collection, however, is rather tricky; but you can look into this.
One last thing: you already have the collection (since you are passing it to the View), so technically, you don't even need to POST it back to the server.

Answer 2

The simple reason why the values of DropDown are null is because they are not sent (POSTed) with the form (You can easily check it with Firebug Firefox extension). You will need to collect (repopulate) the values of dropdown list again to see those values in view.
Suggestion:
Do not return the view immediately after the POST. Typical pattern in ASP-MVC apps is Post-Redirect-Get. It will help you to avoid unnecesary re-POSTs of the form (e.g. on browser refresh button) - Why should I use PRG.