Model View Controller : MVC3 TextBox and DropdownList Validation By Using jQuery UI Validation

In this article i will show you got to use jquery ui validation for validating mvc3 text box and dropdownlist.

So here we go first you needed to create a new mvc3 web application. In this add a model and a controller. In your model file add the below model code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JqueryValidation.Models
{
    public class StudentModel
    {
        public string Name { get; set; }
        public string Address { get; set; }
        public int Marks { get; set; }
        public List<Section> SectionModel { get; set; }
    }
    public class Section
    {
        public int SectionID { get; set; }
        public string SectionName { get; set; }
    }
}

Now in your controller add the below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JqueryValidation.Models;

namespace JqueryValidation.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            StudentModel objstudentmodel = new StudentModel();
            objstudentmodel.SectionModel = new List<Section>();
            objstudentmodel.SectionModel.Add(new Section { SectionName = "Section-A", SectionID = 1 });
            objstudentmodel.SectionModel.Add(new Section { SectionName = "Section-B", SectionID = 2 });
            objstudentmodel.SectionModel.Add(new Section { SectionName = "Section-C", SectionID = 3 });
            Section objSection = new Section();
           // objSection.SectionID = null;

            return View(objstudentmodel);
        }
        [HttpPost]
        public ActionResult Index(int id = 0)
        {
            StudentModel objstudentmodel = new StudentModel();
            objstudentmodel.SectionModel = new List<Section>();
            objstudentmodel.SectionModel.Add(new Section { SectionName = "Section-A", SectionID = 1 });
            objstudentmodel.SectionModel.Add(new Section { SectionName = "Section-B", SectionID = 2 });
            objstudentmodel.SectionModel.Add(new Section { SectionName = "Section-C", SectionID = 3 });
            ViewBag.Message = "You have successfully submitted the form.";
            return View(objstudentmodel);
        }

    }
}

In this i have defined the httpget and post method. in http get method i have preparred the list for binding to dropdownlist.
Now create a view for the index and add the below code.

@model JqueryValidation.Models.StudentModel
@{
    ViewBag.Title = "MVC3 TextBox and DropdownList Validation By Using jQuery UI Validation";
}
<link href="../../Styles/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.wrapper.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

    $(document).ready(function () {
        //prepare the validation rules and messages.
        var rules = {
            Name: {
                required: true,
                minlength: 3
            },
            Address: "required",
            Section: { required: true },
            Marks: "required"
        };
        var messages = {
            Name: {
                required: "Please enter name.",
                minlength: "Please enter attleast 3 character for name."
            },
            Address: "Please enter address",
            Section: "Please select student class section.",
            Marks: "Please enter marks"
        };

        // For the validator
        var validatordata
            = new jQueryValidatorWrapper("StudentForm", rules, messages);

        // click event to do the validation
        $("#btnsubmit").click(function () {
            if (!validatordata.validate()) {
                return false;
            } else {
                return true;
            }

        });
    });

</script>
<form name="StudentForm" id="StudentForm" action="/" method="post">
    <table>
    <tr>
    <td colspan="2"><h3></h3></td>
    </tr>
        <tr>
            <td align="right">
                Name:
            </td>
            <td>
                @Html.TextBoxFor(m => m.Name)
            </td>
        </tr>
        <tr>
            <td align="right">
                Address :
            </td>
            <td>
                @Html.TextBoxFor(m => m.Address)
            </td>
        </tr>
        <tr>
            <td align="right">
                Marks:
            </td>
            <td>
                @Html.TextBoxFor(m => m.Marks)
            </td>
        </tr>
        <tr>
            <td align="right">
                Class Section :
            </td>
            <td>
                <select id="ddlsection" name="Section">
                    <option value="" selected="selected">Select Section</option>
                    @foreach (var item in Model.SectionModel)
                    {
                        <option value="@item.SectionID">@item.SectionName</option>
                    }
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" id="btnsubmit" style="width: 100%" value="Submit" />
            </td>
        </tr>
    </table>
    <div style="color:Red;font-weight:bold;">@ViewBag.Message</div>
    </form>

In this i have appllieda trick for preparing the dropdownlist . In htis i have used select list and used or loop for binding the option of the list. For dropdownlist value for "Select Section" is blank. I have did this because when user will not select the section on that code will get blank and error will occur.

ViewBag.Message i have used so that after postback user will get verified that page have post.

Now we have done . run the application