DropDownList in ASP.NET MVC #dropdownlist #selectlist
@model Dropdowns.Models.SignUpModel
@{ ViewBag.Title = "Sign up"; }
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<h1>Sign up</h1>
<div class="panel panel-default">
<div class="panel-body">
@using (Html.BeginForm("SignUp", "SignUp", FormMethod.Post, new { role = "form" })) {
@* Name textbox *@
<div class="form-group">
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>
@* State selection dropdown *@
<div class="form-group">
@Html.LabelFor(m => m.State)
@Html.DropDownListFor(m => m.State, // 1. Store selected value in Model.State;
// when page is rendered after postback,
// take selected value from Model.State.
// 2. Take list of values from Model.States
Model.States,
// 3. Text for the first 'default' option
"- Please select a state -",
//4. A class name to assign to <select> tag
new { @class = "form-control" })
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
}
</div>
</div>
</div>
</div>
public class SignUpController : Controller
{
//
// 1. Action method for displaying 'Sign Up' page
//
public ActionResult SignUp()
{
// Let's get all states that we need for a DropDownList
var states = GetAllStates();
var model = new SignUpModel();
// Create a list of SelectListItems so these can be rendered on the page
model.States = GetSelectListItems(states);
return View(model);
}
//
// 2. Action method for handling user-entered data when 'Sign Up' button is pressed.
//
[HttpPost]
public ActionResult SignUp(SignUpModel model)
{
// Get all states again
var states = GetAllStates();
// Set these states on the model. We need to do this because
// only the selected value from the DropDownList is posted back, not the whole
// list of states.
model.States = GetSelectListItems(states);
// In case everything is fine - i.e. both "Name" and "State" are entered/selected,
// redirect user to the "Done" page, and pass the user object along via Session
if (ModelState.IsValid)
{
Session["SignUpModel"] = model;
return RedirectToAction("Done");
}
// Something is not right - so render the registration page again,
// keeping the data user has entered by supplying the model.
return View("SignUp", model);
}
//
// 3. Action method for displaying 'Done' page
//
public ActionResult Done()
{
// Get Sign Up information from the session
var model = Session["SignUpModel"] as SignUpModel;
// Display Done.html page that shows Name and selected state.
return View(model);
}
// Just return a list of states - in a real-world application this would call
// into data access layer to retrieve states from a database.
private IEnumerable<string> GetAllStates()
{
return new List<string>
{
"ACT",
"New South Wales",
"Northern Territories",
"Queensland",
"South Australia",
"Victoria",
"Western Australia",
};
}
// This is one of the most important parts in the whole example.
// This function takes a list of strings and returns a list of SelectListItem objects.
// These objects are going to be used later in the SignUp.html template to render the
// DropDownList.
private IEnumerable<SelectListItem> GetSelectListItems(IEnumerable<string> elements)
{
// Create an empty list to hold result of the operation
var selectList = new List<SelectListItem>();
// For each string in the 'elements' variable, create a new SelectListItem object
// that has both its Value and Text properties set to a particular value.
// This will result in MVC rendering each item as:
// <option value="State Name">State Name</option>
foreach (var element in elements)
{
selectList.Add(new SelectListItem
{
Value = element,
Text = element
});
}
return selectList;
}
}
public class SignUpModel
{
[Required]
[Display(Name="Name")]
public string Name { get; set; }
// This property will hold a state, selected by user
[Required]
[Display(Name="State")]
public string State { get; set; }
// This property will hold all available states for selection
public IEnumerable<SelectListItem> States { get; set; }
}