jQuery Ajax Duplicate Email Validation In Asp.Net MVC , Entity Framework

This article will show you how you can validate the duplicate email id using jquery in asp.net mvc using linq by entity framework. In this we will use ajax jquery function to validate the email.

So for this article first we will create a table and add some data in it. This will contain email id field.

Now we will create a new asp.net application and add entity file(.edm) and add the below table in it.

After this we will add a controller class file and add the below code.

using MVC_Demos.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVC_Demos.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         [HttpGet]         public ActionResult Index()         {             Student _studentModel = new Student();             return View(_studentModel);         }         public string ValidateEmailId(string emailId)         {             DemoEntities _demoEntities = new DemoEntities();             var emailStatus = _demoEntities.StudentDetails.Where(m => m.EmailId == emailId).FirstOrDefault();             if (emailStatus != null)             {                 return "1";             }             else             {                 return "0";             }         }     } }

In above code check the highlighted part of the code. This code will validate the duplicate email id and the return status as per the data in table.

Now create the view and add jQuery library reference into it.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Now we will have a look of the below complete code.

@model MVC_Demos.Models.Student @{     ViewBag.Title = "jQuery Ajax Duplicate UserId Validation In Asp.Net MVC ";     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>     <script>         function ValidateEmailId() {             var email = $("#txtEmailId").val();             $("#btnValidate").val("Please wait....");             $.ajax({                 method: "POST",                 url: "/Home/ValidateEmailId/",                 data: { emailId: email }             })              .done(function (msg) {                  if (msg == 1) {                      $("#divMessage").html("Error : Duplicate Email Id Found.");                  } else {                      $("#divMessage").html("No Duplicate Email Id Found.");                  }                  $("#btnValidate").val("Validate");              });         }     </script> } @using (Html.BeginForm("Index", "Home")) {     <table width="100%" cellpadding="5" cellspacing="2" border="0">         <tr>             <td colspan="2">                 <div id="divMessage" style="color:red; font-weight:bold;"></div>             </td>         </tr>         <tr>             <td>Email Id : </td>             <td>@Html.TextBox("emailId", "", new { @Id = "txtEmailId" })</td>         </tr>         <tr>             <td colspan="2">                 <input type="button" value="Validate" id="btnValidate" onclick="javascript: ValidateEmailId();" />             </td>         </tr>     </table> }

In above code I have created a function of javascript. This function I have called on button click event of the button. In this function I have provided the url of the controller validate function. User added email id added as a parameter.

Now if you check parameter in the controller function and the parameter name passed in the jQuery function are same. You have to keep both the name same. If both are not same then we will not get the value added by user ad controller end.

Now we have done run the application and check the output. If we add duplicate email id we will get below output.

If we add new email id we will get the below result.