Insert Delete Update Read (Crud Operation) in MVC 4.0 using jquery json
--Execute in SQL Server………………………………………………
create database MvcwithJquery
use MvcwithJquery
create table UserRegistration
(
SrNo int primary key,
Name varchar(50),Gender varchar(50),
EmailId varchar(50)unique,
Password varchar(50),
City varchar(50)
)
Note - In this application, we will perform the insert, update, delete and search in the MVC WebApplication using json and jquery with TextBox, DropDownList, and Radio Button; along with this we will also discuss how to check the email availability concept with the Email id.
Note - This is the Pictorial Represention of my work showing what is table name and which concepts are working in this WebApplication.
Code for Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var path = "/Registration/ck_Emailid";
//code for Check Availablity with EmailId.....................
$("#txtEmailId").blur(function () {
//document.write("Kush");
var v = $(this).val();
$.get("Registration/ck_Emailid", { EmailId: v }, function (data)
{
debugger;
if (data == "Available")
{
$("#myimage").css("display", "inline");
$("#myimage").attr("src", "Images/available.jpg");
}
else
{
$("#myimage").css("display", "inline");
$("#myimage").attr("src", "Images/notavailable.jpg")
}
// $("#s1").html(data);
});
});
// code for insert data in Table *****************************
$("#btnSave").click(function (w) {
var srno = $("#txtSrNo").val();
var name = $("#txtName").val();
// var gender = $("input.rb:checked").val();
var gender = $('input[type="radio"]').val();
var emailid = $("#txtEmailId").val();
var password = $("#txtPassword").val();
var city = $("#DdlCity").val();
// convert your from in Json......................
console.log($('form').serialize());
$.post("Registration/Save_Data", { SrNo: srno, Name: name, Gender: gender, EmailId: emailid, Password: password, City: city }, function (data) { $("#result").html(data) });
w.preventDefault();
});
//******Code for Search data with SrNo *****************************
var pathsearch = "Registration/display";
$("#btnSearch").click(function () {
var n = $("#txtSrNo").val();
$.getJSON(pathsearch, { SrNo: n }, function (data) {
if (data != null) {
var $this = $('input.rb');
$("#txtName").val(data.Name);
$("#txtEmailId").val(data.EmailId);
$("txtPassword").val(data.Password);
//console.log(data);
data.Gender == 'Male' ? $this[0].checked = true : $this[1].checked = true;
$('#DdlCity').select().val(data.City);
}
else
{
$("#result").html("SrNo is not exist");
}
});
});
//******Code for Update data with SrNo *****************************
$("#btnUpdate").click(function (w) {
var srno = $("#txtSrNo").val();
var name = $("#txtName").val();
var gender = $("input.rb:checked").val();
var emailid = $("#txtEmailId").val();
var password = $("#txtPassword").val();
var city = $("#DdlCity").val();
$.post("Registration/Update", { SrNo: srno, Name: name, Gender: gender, EmailId: emailid, Password: password, City: city }, function (data) { $("#result").html(data) });
w.preventDefault();
});
//******Code for Delete data with SrNo ************************
$("#btnDelete").click(function (w) {
debugger;
var srno = $("#txtSrNo").val();
$.post("Registration/Delete", { SrNo: srno }, function (data) { $("#result").html(data) });
w.preventDefault();
});
});
</script>
</head>
<body>
<div id="main">
<form method="post" enctype="multipart/form-data">
<div class="signup" id="d1">
@using (Html.BeginForm())
{
<table width="100%">
<tr>
<td>SrNo</td>
<td>@Html.TextBox("txtSrNo")</td>
</tr>
<tr>
<td>Name:</td>
<td>@Html.TextBox("txtName")</td>
</tr>
<tr>
<td>Gender:</td>
<td>
@Html.RadioButton("RbGender", "Male", new { @class = "rb" }) Male
@Html.RadioButton("RbGender", "Female", new { @class = "rb" }) FeMale
</td>
</tr>
<tr>
<td>Emailid :</td>
<td>@Html.TextBox("txtEmailId") <span id="s1"><img id="myimage" style="display:none" width="20" height="20"></span></td>
</tr>
@*Code for create TextBox with Password Field in Mvc*@
<tr>
<td>Password :</td>
<td>@Html. Password ("txtPassword")</td>
</tr>
@*How to create DropDownList in Mvc *@
<tr>
<td>Current City</td>
<td>@Html.DropDownList("DdlCity", new[]
{
new SelectListItem { Text="--Select--", Value="0" },
new SelectListItem { Text="Noida", Value="Noida"},
new SelectListItem { Text="New Delhi", Value="New Delhi" },
new SelectListItem { Text="Ghaziabad", Value="Ghaziabad"},
new SelectListItem { Text="Varanasi", Value="Varanasi"}
}
)
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" id="btnSave" value="Save" />
<input type="submit" name="submit" id="btnUpdate" value="Update" />
<input type="submit" name="submit" id="btnDelete" value="Delete" />
<input type="button" name="submit" id="btnSearch" value="Search" /></td>
</tr>
<tr>
<td colspan="2">
<div id="result" style="color: red;">
</div>
</td>
</tr>
</table>
}
</div></form>
</div>
</body>
</html>
Code for Controller named as RegistrationController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
// using this namespace for Models
using MvcApplicationwithJquery.Models;
namespace MvcApplicationwithJquery.Controllers
{
public class RegistrationController : Controller
{
//
// GET: /Registration/
public ActionResult Index()
{
return View();
}
MvcJqueryEntities mm = new MvcJqueryEntities();
//Code for check availability concept with EmailId
public string ck_Emailid(string emailid)
{
var v = mm.UserRegistrations.Where(m => m.EmailId == emailid).FirstOrDefault();
if (v != null)
return "Not available";
else
return "Available";
}
//Code for insert data in table(Registration Concept)
[HttpPost]
public JsonResult Save_Data(int srno, string name, string gender, string emailid, string password, string city)
{
try
{
UserRegistration us = new UserRegistration
{
SrNo = Convert.ToInt32(srno),
Name = name,
Gender = gender,
EmailId = emailid,
Password = password,
City = city
};
mm.UserRegistrations.Add(us);
mm.SaveChanges();
return Json("Regitration Successfully with SrNo" + srno, JsonRequestBehavior.AllowGet);
}
catch
{
return Json("Some problem occur...try again", JsonRequestBehavior.AllowGet);
}
}
//Code for display data from table...................................
public JsonResult display(string SrNo)
{
int srno = Convert.ToInt32(SrNo);
var v = mm.UserRegistrations.Where(m => m.SrNo == srno).Select(m => new { SrNo = m.SrNo, Name = m.Name, Gender = m.Gender, EmailId = m.EmailId, Password = m.Password, City = m.City }).FirstOrDefault();
return Json(v, JsonRequestBehavior.AllowGet);
}
//Code for update data from table...................................
int srno;
[HttpPost]
public string Update(string SrNo, string name, string gender, string emailid, string password, string city)
{
srno = Convert.ToInt32(SrNo);
var v = (from m in mm.UserRegistrations where m.SrNo == srno select m).FirstOrDefault();
if (v != null)
{
v.Name = name;
v.Gender = gender;
v.EmailId = emailid;
v.Password = password;
v.City = city;
}
mm.SaveChanges();
return "Update with SrNo" + SrNo;
}
//Code for Delete data from table....
[HttpPost]
public string Delete(string SrNo)
{
srno = Convert.ToInt32(SrNo);
var v = (from m in mm.UserRegistrations where m.SrNo == srno select m).FirstOrDefault();
if(v!=null)
{
mm.UserRegistrations.Remove(v);
mm.SaveChanges();
}
return "Delete successfully with SrNo"+SrNo;
}
}
}