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 Appllication we will perform
insert ,update, delete ,Search in Mvc WebApplication using
Json and Jquery with
TextBox,DropDownList and Radio Button and also we will discuss how to check email availability concept with
Emailid
Note: This is the Pictorial
Represention of my work 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 which name is 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;
}
}
}
Result:
nice concept kush sir
ReplyDeleteThanks for Comment.......................
DeleteHave You Uploaded code for Inline Editing in MVC?
ReplyDeleteplease send Link to My mail.
manishjadhav917@gmail.com