How to create ASP.Net MVC DropDownList with required validation
I working with mvc 5. I am loading data from Database Using ORM and fill a drop down list from the controller, like this.
ViewBag.Country_id = new SelectList(_db.Countries, "Country_id", "Description");
As i wanted an empty field first I am doing this in my HTML.
<div class="form-group">
@Html.LabelFor(model => model.Countries, "Country", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Country_id", null, htmlAttributes: new { @class = "form-control" }, optionLabel: "Choose a Country")
@Html.ValidationMessageFor(model => model.Country_id, "", new { @class = "text-danger" })
</div>
</div>
The empty choice has a "0" value.
And i wanted to validate the user choose a Country so I add this Validation
[Required,Range(1, int.MaxValue, ErrorMessage = "Error: Must Choose a Country")]
public int Country_id { get; set; }
The Problem is that never get me a Error. Always is "0" and the validation did not occur.
What I a missing?
Answer
There are few ways to work with DropDownList. I personally like to use Strongly-Type ViewModel instead of ViewBag.
Screen Shot
Validation message displays when submit button is clicked without selecting Country.
Entity
public class Country
{
public int Country_id { get; set; }
public string Description { get; set; }
}
Model
public class CountryViewModel
{
[Display(Name = "Country")]
[Required(ErrorMessage = "{0} is required.")]
public int SelectedCountryId { get; set; }
public IList<SelectListItem> AvailableCountries { get; set; }
public CountryViewModel()
{
AvailableCountries = new List<SelectListItem>();
}
}
Controller
public class HomeController : Controller
{
public ActionResult Create()
{
var countries = GetCountries();
var model = new CountryViewModel {AvailableCountries = countries};
return View(model);
}
[HttpPost]
public async Task<ActionResult> Create(CountryViewModel countryViewModel)
{
if (ModelState.IsValid)
{
int countryId = countryViewModel.SelectedCountryId;
// Do something
}
// If we got this far, something failed. So, redisplay form
countryViewModel.AvailableCountries = GetCountries();
return View(countryViewModel);
}
public IList<SelectListItem> GetCountries()
{
// This comes from database.
var _dbCountries = new List<Country>
{
new Country {Country_id = 1, Description = "USA"},
new Country {Country_id = 2, Description = "UK"},
new Country {Country_id = 3, Description = "Canada"},
};
var countries = _dbCountries
.Select(x => new SelectListItem {Text = x.Description, Value = x.Country_id.ToString()})
.ToList();
countries.Insert(0, new SelectListItem {Text = "Choose a Country", Value = ""});
return countries;
}
}
View
@model DemoMvc.Models.CountryViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Create</title>
</head>
<body>
<h2>Create</h2>
@using (Html.BeginForm())
{
<div class="form-group">
@Html.LabelFor(model => model.SelectedCountryId,
new {@class = "control-label col-md-2"})
<div class="col-md-10">
@Html.DropDownListFor(model => model.SelectedCountryId,
Model.AvailableCountries, new {@class = "form-control"})
@Html.ValidationMessageFor(model => model.SelectedCountryId,
"", new {@class = "text-danger"})
</div>
</div>
<input type="submit" value="Submit"/>
}
</body>
</html>