Server Side Validation On ASP.NET MVC Kendo UI

In this blog you will learn Server Side Validation on ASP.NET MVC Kendo UI.

Add a Class to the Model Folder named “ClsSample”.



Class for Validation Attributes

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

namespace TelerikMvcApp1.Models
{
    public class ClsSample
    {
        public int RowId
        {
            set;
            get;
        }

        [Required(ErrorMessage="* Name")]
        [Display(Name="Name")]
        [DataType(DataType.Text)]
        public string Name
        {
            set;
            get;
        }

        [Required(ErrorMessage="* Age")]
        [Display(Name="Age")]
        [DataType(DataType.PhoneNumber)]
        [StringLength(3)]
        public int? Age
        {
            set;
            get;
        }

        [Required(ErrorMessage="* Mobile")]
        [Display(Name="Mobile")]
        [DataType(DataType.PhoneNumber)]
        [StringLength(10)]
        public long? Mobile
        {
            set;
            get;
        }

        [Required(ErrorMessage="* EmailID")]
        [Display(Name="EmailID")]
        [DataType(DataType.EmailAddress)]
        [RegularExpression(".+@.+\\..+", ErrorMessage = "Please Enter Correct Email Address")]
        public string EmailId
        {
            set;
            get;
        }

        [Required(ErrorMessage="* Select Gender")]
        [Display(Name="Gender")]
        public string Gender
        {
            set;
            get;
        }

        public string MaritalStatus
        {
            set;
            get;
        }

        [Required(ErrorMessage="* Father Name")]
        [Display(Name="FatherName")]
        [DataType(DataType.Text)]
        public string FatherName
        {
            set;
            get;
        }

        [Required(ErrorMessage = "* Mother Name")]
        [Display(Name="Mother Name")]
        [DataType(DataType.Text)]
        public string MotherName
        {
            set;
            get;
        }

        [Required(ErrorMessage = "* Address")]
        [Display(Name="Address")]
        [DataType(DataType.Text)]
        public string Address
        {
            set;
            get;
        }

        [Required(ErrorMessage = "* PinCode")]
        [Display(Name="Pin Code")]
        [DataType(DataType.PostalCode)]
        [Range(0,6)]
        public long? PinCode
        {
            set;
            get;
        }

        public string NearByLegend
        {
            set;
            get;
        }

        [Required(ErrorMessage="Select Country")]
        public int CountryId
        {
            set;
            get;
        }

        public string CountryName
        {
            set;
            get;
        }

        public int? StateId
        {
            set;
            get;
        }

        public string StateName
        {
            set;
            get;
        }

        public int? CityId
        {
            set;
            get;
        }

        public string CityName
        {
            set;
            get;
        }
    }
}

Add Controller and Action Name to The Application.



Create an ActionResult and Add View...





At the View Bind the Model Class To The View.



Add your other code to populate The View With Data(Optional).

public ActionResult Validate()
{
    #region -- Creating a Form For Server side Data Validation --

    var CountryTemp = (from x in objContext.TblCountries
                       select new ClsSample
                       {
                           CountryId = x.CountryId,
                           CountryName = x.CountryName
                       }).ToList();

    ViewData["customers"] = CountryTemp;

    ViewBag.CName2 = new SelectList(CountryTemp, "CountryId", "CountryName");

    return View();

    #endregion
}

[HttpPost]
public ActionResult Validate(ClsSample obj)
{
    return View();
}

At the View write the following:

@Html.Kendo().TextBoxFor(model=>model.Name).Name (Bind The Model Property To The TextBox)
@Html.ValidationMessageFor(X=>X.Name) (Bind the Model Property to the Validation Message For)

View Part

@model TelerikMvcApp1.Models.ClsSample

@{
    ViewBag.Title = "Server Side Validate";
}

@section featured {
    <div class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                This Is Form To Register New Employee
            </p>
        </div>
    </div>
}

@using (@Html.BeginForm())
{
    <table>
        <tr>
            <td>Enter Name</td>
            <td>:</td>
            <td>@Html.Kendo().TextBoxFor(model=>model.Name).Name("txtName")</td>
            <td>@Html.ValidationMessageFor(X=>X.Name)</td>
        </tr>
        <tr>
            <td>Enter Age</td>
            <td>:</td>
            <td>@Html.Kendo().TextBoxFor(model=>model.Age).Name("txtAge")</td>
            <td>@Html.ValidationMessageFor(X=>X.Age)</td>
        </tr>
        <tr>
            <td>Enter Mobile</td>
            <td>:</td>
            <td>@Html.Kendo().TextBoxFor(model=>model.Mobile).Name("txtMobile")</td>
            <td>@Html.ValidationMessageFor(model=>model.Mobile)</td>
        </tr>
        <tr>
            <td>Enter EmailID</td>
            <td>:</td>
            <td>@Html.Kendo().TextBoxFor(model=>model.EmailId).Name("txtEmailID")</td>
            <td>@Html.ValidationMessageFor(model=>model.EmailId)</td>
        </tr>
        <tr>
            <td>Select Gender</td>
            <td>:</td>
            <td>@Html.Kendo().RadioButton().Name("Male").Label("Male").HtmlAttributes(new { name = "a", value = "M" })</td>
            <td>@Html.Kendo().RadioButton().Name("FeMale").Label("FeMale").HtmlAttributes(new { name = "a", value = "F" })</td>
            <td></td>
        </tr>
        <tr>
            <td>Check Marital Status</td>
            <td>:</td>
            <td>@Html.Kendo().CheckBox().Name("chkMarried").Label("Married").HtmlAttributes(new { name = "A", value = "Yes" })</td>
            <td></td>
        </tr>
        <tr>
            <td>Select Country</td>
            <td>:</td>
            <td>@Html.Kendo().DropDownList().Name("ddlCountry").BindTo(ViewBag.CName2)</td>
            <td></td>
        </tr>
        <tr>
            <td>Enter Pin Code</td>
            <td>:</td>
            <td>@Html.Kendo().TextBoxFor(X=>X.PinCode).Name("txtPinCode")</td>
            <td></td>
        </tr>
        <tr>
            <td>Test Data</td>
            <td>:</td>
            <td><input type="submit" value="Save" class="k-primary" width="200" /></td>
        </tr>
    </table>
}

<script>
   $(function () {
      $("form").kendoValidator();
   });
</script>

And finally write this script at the View Page:

<script>
   $(function () {
      $("form").kendoValidator();
   });
</script>

Run and see the output.