Validation in MVC

Question

I am using MVC 3 asp.net and Razor, how to validate these drop down boxes on client side? Like if no value is selected that pass error to user that please select value. I have added linq to sql classes which automatically generate things

@using (Html.BeginForm("Generated_PaySlip", "Home", FormMethod.Get))
{
    <fieldset>
         Months
         @Html.DropDownList("Month", "Select Date")
         &nbsp &nbsp

         Employee Name
         @Html.DropDownList("EmplID", "Select Name")
         &nbsp &nbsp
         <input type="submit" value="Submit" />
   </fieldset> 
}

Controller:

public ActionResult InfoFor_PaySlip() 
{
    var dates = (from ps in DataContext.MonthlyRecords select new {ps.Month }).Distinct();
    ViewData["Month"] = new SelectList(dates, "Month", "Month");

    var names = (from n in DataContext.HrEmployees select new { n.EmplID, n.EmplName }).Distinct();
    ViewData["EmplID"] = new SelectList(names, "EmplID", "EmplName");

    return View();
 }

Answer 1

You can use javascript to get the selected value:

var dropdown = document.getElementById("YourDropdown");
var selectedValue = dropdown.options[dropdown.selectedIndex].value;

After this, you can use the selectedValue to check if the value the user selected is valid.

But, I do not recommend doing this way. It's better to use the tools that the Asp.net MVC provides. First, you should create a model to host the atributes you need to display a dropdown for and, in this model, use the Data Anotations (a simple guide for beginners can be found here: http://msdn.microsoft.com/en-us/library/ee256141(v=vs.100).aspx ) to validate its values. For instance:

public class YouModel{

  [Display(Name = "Month")]
  [Required(ErrorMessage = "This field is required")]
  public String SelectedMonth {get; set;}
  public List<SelectListItem> Months {get; set;}

  [Display(Name = "Employee Name")]
  [Required(ErrorMessage = "This field is required")]
  public int SelectedEmployee {get; set;}
  public List<SelectListItem> EmployeeList {get; set;}
}

In your View, you would have:

@using location.of.YouModel

@using (Html.BeginForm("Generated_PaySlip", "Home", FormMethod.Get))
{
  <fieldset>
      @Html.LabelFor(m => m.SelectedMonth)
      @Html.DropDownListFor(m => m.SelectedMonth, Model.Months)
      @Html.ValidationMessageFor(m => m.SelectedMonth)

      @Html.LabelFor(m => m.SelectedEmployee)
      @Html.DropDownListFor(m => m.SelectedEmployee, Model.EmployeeList)
      @Html.ValidationMessageFor(m => m.SelectedEmployee)

      <input type="submit" value="Submit" />
  </fieldset>
}

And, finnaly, in your controller, your action would look like this:

public ActionResult Generated_PaySlip(YourModel model){

// The ModelState.isValid will verify if your model is validated based on the data Anotations you used in the model. If not, will return false and you just have to return the model to the view you want and the framework will do the job of displaying the validation messages.
  if (ModelState.isValid){
    // do something
  }
  return View(model);
}

UPDATE

public ActionResult InfoFor_PaySlip() 
{
    YourModel model = new YourModel();

    var dates = (from ps in DataContext.MonthlyRecords select new {ps.Month }).Distinct();
    model.Months = new SelectList(dates, "Month", "Month");

    var names = (from n in DataContext.HrEmployees select new { n.EmplID, n.EmplName }).Distinct();
    model.EmployeeList = new SelectList(names, "EmplID", "EmplName");

    return View(model);
}