How to Implement Client side validation in MVC5 using Model class and Json Result

In this Article we will learn step-by-step:How to Implement Client side validation (MVC5) using Model class and Json Result.I have mention code below for Client side model class validation without Postback then how to pass Json Result controller to view using MVC5.


In this article we will learn step-by-step: How to Implement Client side validation (MVC5) using Model class and Passing Json Result. We will discuss Pass Controller to view using Json Result operations with usage of EDMX Concept.


In these days, MVC5 is most growing framework and as a developer I am curious to know and learn
about the new features of this framework.

From last couple of days I was wondering how can I perform Passing Json Result from Controller to View operations using EDMX Concept. For the same I have gone through various forums etc. Unfortunately, I did saw very few posts/articles for the same.

Finally, I tried and came with a solution to perform Client side validation (MVC5) using Model class and Passing Json Result. In this article, I am going to share my findings with all of you.

Why Step-by-Step

Ah! This question came to my mind while I was finding the solution of my problem, I jotted down few points and finally
called them as a steps to perform Client side validation (MVC5) using Model class and Passing Json Result.


To implement the solution and to feel the taste of code, you should:

  • Have Visual Studio 2013 or later with the support of MVC5

  • Have Basic Idea of SQL Server

  • Have Basic Idea of Sql queries

What we are waiting for?

So, what we are waiting for here, lets get started. Just following these step(s) and we will done!

How to Create Client side validation in MVC5

add New Project --> Select New Template -> Model class for Employee Information . Class code
with validation depends in the Datatype.

// public int EmpId { get; set; }
// [Required(ErrorMessage="The Employee is Empty")]
// public string EmpName { get; set; }
// [DataType(DataType.PhoneNumber)]
// [Phone]
// public int PhoneNo { get; set; }
// [DataType(DataType.EmailAddress)]
// [EmailAddress]
// public string EmailId { get; set; }



Add Controller and view for checking validation

<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.EmpId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.EmpId, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EmpId, "", new { @class = "text-danger" })

<div class="form-group">
@Html.LabelFor(model => model.EmpName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.EmpName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EmpName, "", new { @class = "text-danger" })

<div class="form-group">
@Html.LabelFor(model => model.PhoneNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.PhoneNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PhoneNo, "", new { @class = "text-danger" })

<div class="form-group">
@Html.LabelFor(model => model.EmailId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.EmailId, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EmailId, "", new { @class = "text-danger" })

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />


How to add Controller then pass value controller to view

public JsonResult display(string rollno)
int i = Convert.ToInt32(rollno);
var v = mm.StudentEnqs.Where(m=> m.StudId==i).Select(m=> new {StudId=m.StudId,StudName=m.StudName }).FirstOrDefault();
return Json(v, JsonRequestBehavior.AllowGet);



How to retrieve the value from the controller use this code.

$(document).ready(function () {
var path = "/Test/display";
$("#btnSearch").click(function () {
var n = $("#txtsearchstring").val();
$.getJSON(path, { RollNo: n }, function (data) {
if (data != null) {
var d = "Student ID=" + data.StudId + "
Name=" + data.StudName + "
else {
document.write("Not Found");

Search String : @Html.TextBox("txtsearchstring")

Json List Data


Hope it will be helpful to all



Json List Data





No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: