Today we discuss about the crud operation
in single page in mvc 4
First we create model using linq to entity (using edmx file).
List of Users
User Creation
User Deletion
User Modification
User Details
Code for Controller:-
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvcwithjson.Models;
namespace
mvcwithjson.Controllers
{
public class popupmodelController : Controller
{
dbMVCEntities en = new dbMVCEntities();
public ActionResult Index()
{
return View(en.student_info.ToList ());
}
public JsonResult display(string id)
{
int srno = Convert.ToInt32(id);
var v = en.student_info.Where(m => m.id
== srno).Select(m => new { ID = m.id, Name =
m.name, age = m.age }).FirstOrDefault();
return Json(v, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public string delete(string ID)
{
int id = int.Parse(ID);
var v = en.student_info.FirstOrDefault(m
=> m.id == id);
if (v != null)
{
en.student_info.Remove(v);
en.SaveChanges();
}
return "Record deleted successfully";
}
[HttpPost]
public string create( string name, int age)
{
try
{
student_info r = new student_info()
{
name = name,
age = age
};
en.student_info.Add(r);
en.SaveChanges();
return "Data saved
successfully";
}
catch
{
return "1";
}
}
[HttpPost]
public string update(int id, string name, int age)
{
try
{
student_info st =
en.student_info.FirstOrDefault(m => m.id == id);
if (st != null)
{
st.name = name;
st.age = age;
en.SaveChanges();
}
return "Data updated
successfully";
}
catch
{
return "1";
}
}
}
}
Code for View:-
@model IEnumerable<mvcwithjson.Models.student_info>
@{
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 src="~/Scripts/JavaScript1.js"></script>
<script type="text/javascript">
$(function () {
// code for
create start
//
**************************************************************
$("#create").live("click", function (e) {
e.preventDefault();
$("#mask").fadeIn("slow");
$("#c1").fadeIn("slow");
});
$("#close").hover(function () {
$(this).css("cursor", "pointer");
});
$("#close").click(function () {
$("#mask").fadeOut("slow");
$("#c1").fadeOut("slow");
});
$("#save").click(function () {
$.post("popupmodel/create", {
userid: $("#userid").val(),
name: $("#name").val(),
age: $("#age").val()
}, function (data) {
if (data == "1")
alert("Userid
alredy exsists");
else {
$("#b").load("popupmodel/display");
$("#mask").fadeOut("slow");
$("#c1").fadeOut("slow");
}
location.reload(true);
});
});
// code for
create end
//************************************************************
//*********************************************************** // Started code for details part
$("#detailclose").hover(function () {
$(this).css("cursor", "pointer");
});
$("#detailclose").click(function () {
$("#mask").fadeOut("slow");
$("#cdetails").fadeOut("slow");
});
$(".clsDetails").live("click", function (e) {
e.preventDefault();
$("#mask").fadeIn("slow");
$("#cdetails").fadeIn("slow");
var v = $(this).attr("id");
$.getJSON("popupmodel/display", { id: v }, function (data) {
if (data != null) {
$("#detailuserid").html(data.ID);
$("#detailname").html(data.Name);
$("#detailage").html(data.age);
}
});
});
// END code for details part
//***********************************************************
//
started code for edit
$("#editclose").hover(function () {
$(this).css("cursor", "pointer");
});
$("#editclose").click(function () {
$("#mask").fadeOut("slow");
$("#cedit").fadeOut("slow");
});
$(".clsedit").live("click", function (e) {
e.preventDefault();
$("#mask").fadeIn("slow");
$("#cedit").fadeIn("slow");
var v = $(this).attr("id");
var vid =
v.substring(4);
$.getJSON("popupmodel/display", { id: vid }, function (data) {
if (data != null) {
$("#hdn").val(data.ID);
$("#editname").val(data.Name);
$("#editage").val(data.age);
}
});
});
$("#Update").click(function () {
var id = $("#hdn").val();
var name = $("#editname").val();
var age = $("#editage").val();
$.post("popupmodel/update", { id: id, name:
name, age: age }, function (data) {
if (data != null) {
location.reload(true);
}
$("#mask").fadeOut("slow");
$("#cedit").fadeOut("slow");
});
});
// End
code for edit
//**********************************************************
// start code for delete
//*******************************************************
$(".clsdelete").live("click", function (p) {
p.preventDefault();
$("#mask").fadeIn("slow");
$("#cdelete").fadeIn("slow");
var v = $(this).attr("id");
var vid =
v.substring(3);
$.getJSON("popupmodel/display", { id: vid }, function (data) {
if (data != null) {
$("#hdndel").val(vid);
$("#delname").html(data.Name);
$("#delage").html(data.age);
}
});
});
$("#deleteclose").hover(function () {
$(this).css("cursor", "pointer");
});
$("#deleteclose").click(function () {
$("#mask").fadeOut("slow");
$("#cdelete").fadeOut("slow");
});
$("#btndel").click(function () {
var id = $("#hdndel").val();
$.post("popupmodel/delete", { id: id }, function (data) {
if (data != null) {
location.reload(true);
}
$("#mask").fadeOut("slow");
$("#cedit").fadeOut("slow");
});
});
// End code for
delete
//***********************************************************
});
</script>
</head>
<body>
<div id="mask" style="height: 100%; width: 100%; background-color: gray; opacity: 0.5; z-index: 1000; display: none; position: fixed; top: 0px; left: 0px;"></div>
@* Start Design
for Create Registration
********************************************************@
<div id="c1" style="height: 50%; width: 30%; display: none; background-color: white; border: 1px solid; z-index: 5000; position: fixed; top: 20%; left: 35%;">
<table style="width: 100%; margin-left: auto; margin-right: auto;">
<tr>
<td style="text-align: right;" colspan="2">
<span id="close" style="position: relative; top: 25%; text-align: right;">
@*Close*@
<img src="~/img/close.png" alt="" height="30" width="30" />
</span>
</td>
</tr>
</table>
<table style="width: 80%; margin-left: auto; margin-right: auto;">
<tr>
<td colspan="2" style="text-align: center">
<h3>Registration Form</h3>
</td>
</tr>
<tr>
<td>User id</td>
<td>@Html.TextBox("userid")</td>
</tr>
<tr>
<td>Name</td>
<td>@Html.TextBox("name")</td>
</tr>
<tr>
<td>Age</td>
<td>@Html.TextBox("age")</td>
</tr>
<tr>
<td></td>
<td>
<input id="save" type="button" value="Save" /></td>
</tr>
</table>
</div>
@* End Design for
Create Registration
*********************************************************@
@* Start Design for
View Registration Details
******************************************************@
<div id="cdetails" style="height: 28%; width: 30%; display: none; background-color: white; border: 1px solid; z-index: 8000; position: fixed; top: 20%; left:35%;">
<table style="width: 100%; margin-left: auto; margin-right: auto;">
<tr>
<td style="text-align: right;" colspan="2">
<span id="detailclose" style="position: relative; top: 25%; text-align: right;">
@*Close*@
<img src="~/img/close.png" alt="" height="30" width="30" />
</span>
</td>
</tr>
</table>
<table style="width: 70%; margin-left: auto; margin-right: auto;">
<tr>
<td colspan="2" style="text-align: center">
<h3>Registered User</h3>
</td>
</tr>
<tr>
<td>User id</td>
<td><span id="detailuserid"></span></td>
</tr>
<tr>
<td>Name</td>
<td><span id="detailname"></span></td>
</tr>
<tr>
<td>Age</td>
<td><span id="detailage"></span></td>
</tr>
<tr>
<td>@*<input
id="Save" type="button" value="Save" />*@</td>
<td></td>
</tr>
</table>
</div>
@* End Design for View
Registration Details
**********************************************************@
@* Start Design for
Edit Registration Details
********************************************************@
<div id="cedit" style="height: 30%; width: 40%; display: none; background-color: white; border: 1px solid; z-index: 85000; position: fixed; top: 20%; left: 35%;">
<table style="width: 100%; margin-left: auto; margin-right: auto; margin-top:0;">
<tr>
<td style="text-align:center;">
<h3>Registration Form</h3>
</td>
<td style="text-align:right;margin-top:0; ">
<span id="editclose" style="position: relative ; text-align:right;">
<img src="~/img/close.png" alt="" height="30" width="30" />
</span></td>
</tr>
</table>
<table style="width: 70%; margin-left:auto;margin-right:auto;">
<tr>
<td></td>
<td>@Html.Hidden("hdn")
</td>
</tr>
<tr>
<td>Name</td>
<td>@Html.TextBox("editname")</td>
</tr>
<tr>
<td>Age</td>
<td>@Html.TextBox("editage")</td>
</tr>
<tr>
<td>
</td>
<td><input id="Update" type="button" value="Save" /></td>
</tr>
</table>
</div>
@* End Design for
Edit Registration Details
*****************************************************@
@* Start Design for
Delete Registration Details
*******************************************************@
<div id="cdelete" style="height: 30%; width: 30%; display: none; background-color: white; border: 1px solid; z-index: 88000; position: fixed; top: 20%; left: 35%;">
<table style="width: 100%; margin-left: auto; margin-right: auto; margin-top:0;">
<tr>
<td style="text-align:center;">
<h3>Are you sure to
delete?</h3>
</td><td style="text-align: right;">
<span id="deleteclose" style="position: relative; right: 0; top: 0%;">
<img src="~/img/close.png" alt="" height="30" width="30" />
</span></td>
</tr>
</table>
<table style="width: 60%; margin-left:auto;margin-right:auto;">
<tr>
<td></td>
<td>@Html.Hidden("hdndel")
</td>
</tr>
<tr>
<td>Name</td>
<td><span id="delname"></span></td>
</tr>
<tr>
<td>Age</td>
<td><span id="delage"></span></td>
</tr>
<tr>
<td>
</td>
<td><input id="btndel" type="button" value="Delete" /></td>
</tr>
</table>
</div>
@* End Design for
Delete Registration Details
*******************************************************@
@* Start Design for
show the list of Registered Users
********************************************************@
<div style="width:400px; margin-left:auto; margin-right:auto;">
<p>
<a id="create" href="#">Create</a>
</p>
<div id="b">
<table style="width:100%; text-align:left;">
<tr>
<th>
@Html.DisplayNameFor(model
=> model.name)
</th>
<th>
@Html.DisplayNameFor(model
=> model.age)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem
=> item.name)
</td>
<td>
@Html.DisplayFor(modelItem
=> item.age)
</td>
<td>
@Html.ActionLink("Edit", "display", new { id = item.id }, new { id = "edit" + @item.id, @class
= "clsedit" }) |
@Html.ActionLink("Details", "display", new { id = item.id }, new { id = item.id,
@class = "clsDetails" }) |
@Html.ActionLink("Delete", "display", new { id = item.id }, new { id = "del" + @item.id, @class
= "clsdelete" })
</td>
</tr>
}
</table>
</div>
</div>
@* End Design for
show the list of Registered Users
************************************************************@
</body>
</html>
