Tuesday 30 June 2015

How to implement Remote Validation in ASP.NET MVC


Remote validation is concepts to create server calls to validate information while not posting the whole form to the server once server facet validation is desirable to user facet.  It is all done got wind of model and controller that is pretty neat.  
---Sql Server Query
create  database test
use test

create table StudentInfo
(
SrNo int,
Name varchar(50),
UserName varchar(50) primary key,
Password varchar(50),
EmailId varchar(50) unique,
Course varchar(50)
)

Step -1

First  we will  take  MvcApplication and take class which  name  is Student  in Model Folder to apply Remote Validation in our Application
*******************************************************************
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcRemoteValidation.Models
{
 
    public class Student
    {
        public int SrNo { get; set; }
        public string  Name { get; set; }
        [Remote("CheckUserName", "Home")]
        public string UserName { get; set; }
        public string EmailId { get; set; }
        public string  Password { get; set; }
        public string Course { get; set; }
    }
}
************************************************************
then  we will work  on Home Contrller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
// using this name space..............
using MvcRemoteValidation.Models;

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

public ActionResult Index()
{
return View();
}

testEntities tt = new testEntities();

[HttpPost]
public ActionResult Index(StudentInfo s1)
{
tt.StudentInfoes.Add(s1);
tt.SaveChanges();
ViewBag.msg = "Data Saved Successfully";
return View();
}

//public bool CheckUserName(string UserName)
//{
//    return !tt.StudentInfoes.Any(obj => obj.UserName == UserName);
//}

public JsonResult CheckUserName(string UserName)
{
var v = tt.StudentInfoes.Where(obj => obj.UserName == UserName).Select(obj => obj).FirstOrDefault();
if (v != null)
{
return Json("UserName already exit", JsonRequestBehavior.AllowGet);
}
else
{
return Json(true, JsonRequestBehavior.AllowGet);
}
}

}
}

Then we will right click on Index and add view with strongly type,such as given the below picture



Then you can see auto generated code of Index.cshml
@model MvcRemoteValidation.Models.Student

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" />

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
<legend>Student</legend>

<div class="editor-label">
@Html.LabelFor(model => model.SrNo)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.SrNo)
@Html.ValidationMessageFor(model => model.SrNo)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.EmailId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EmailId)
@Html.ValidationMessageFor(model => model.EmailId)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
@* @Html.EditorFor(model => model.Password)*@
@Html.PasswordFor(model=>model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Course)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Course)
@Html.ValidationMessageFor(model => model.Course)
</div>

<p>
<input type="submit" value="Create" />
@ViewBag.msg
</p>
</fieldset>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>
</body>
</html>

Result


Topic -2 here we will discuss how to create check the availability with username and emailid with Remote attribute concept in Mvc 
We will do shown some modifications in class ‘Student’ as given below <highlighted in yellow>:

public class Student
    {
        public int SrNo { get; set; }
        public string  Name { get; set; }
        [Remote("CheckUserNameandEmailId", "Home", AdditionalFields = "EmailId")]
        public string UserName { get; set; }
        public string EmailId { get; set; }
        public string  Password { get; set; }
        public string Course { get; set; }
    }
We will do other modifications in controller Home as given below <highlighted in yellow>:
public JsonResult CheckUserNameandEmailId(string EmailId,string UserName)
{

var v = tt.StudentInfoes.Where(obj => obj.UserName == UserName && obj.EmailId == EmailId).Select(obj => obj).FirstOrDefault();
if (v != null)
{
return Json("UserName and EmailId  already match", JsonRequestBehavior.AllowGet);
}
else
{
return Json(true, JsonRequestBehavior.AllowGet);
}
}
Result


Note:  We will also use some another overload of Remote attribute in class ‘Student as given below <highlighted in yellow>:
Code for Student.cs......................
[Remote("CheckUserName", "Home", ErrorMessage="User Name alreay is use")]
 public string UserName { get; set; }
Code for in HomeController.cs......................
public JsonResult CheckUserName(string UserName)
{
return Json(!tt.StudentInfoes.Any(obj => obj.UserName == UserName),JsonRequestBehavior.AllowGet);
}




1 comments:

  1. I gone through your article, its really interesting. Dot net is most used programming language for creating highly dynamic desktop and web application. Dot net programming language has created massive revolution in software development industry. Dot net training in Chennai

    ReplyDelete