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.

Abstract

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.

Introduction

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.

Pre-requisite

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

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


 //[Required]
 //       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; }

Step2

Add Controller and view for checking validation



<div class="form-horizontal">
        <h4>EmployeeClass</h4>
        <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>
        </div>

        <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>
        </div>

        <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>
        </div>

        <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>
        </div>

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

Step3

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);

        }

Step4

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


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