Crud operation in single page in mvc using Json ~ Dotnet in simpleway

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>

<title>Index</title>

$(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>

@* Start Design for Create Registration

********************************************************@

<tr>

@*Close*@

</span>

</td>

</tr>

</table>

<tr>

<h3>Registration Form</h3>

</td>

</tr>

<tr>

<td>@Html.TextBox("userid")</td>

</tr>

<tr>

<td>@Html.TextBox("name")</td>

</tr>

<tr>

<td>@Html.TextBox("age")</td>

</tr>

<tr>

<td>

</tr>

</table>

</div>

@* End Design for Create Registration

*********************************************************@

@* Start Design for View Registration Details

******************************************************@

<tr>

@*Close*@

</span>

</td>

</tr>

</table>

<tr>

<h3>Registered User</h3>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

@* End Design for View Registration Details

**********************************************************@

@* Start Design for Edit Registration Details

********************************************************@

<tr>

<h3>Registration Form</h3>

</td>

</span></td>

</tr>

</table>

<tr>

<td>@Html.Hidden("hdn")

</td>

</tr>

<tr>

<td>@Html.TextBox("editname")</td>

</tr>

<tr>

<td>@Html.TextBox("editage")</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

@* End Design for Edit Registration Details

*****************************************************@

@* Start Design for Delete Registration Details

*******************************************************@

<tr>

<h3>Are you sure to delete?</h3>

</td><td style="text-align: right;">

</span></td>

</tr>

</table>

<tr>

<td>@Html.Hidden("hdndel")

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

@* End Design for Delete Registration Details

*******************************************************@

@* Start Design for show the list of Registered Users

********************************************************@

<p>

<a id="create" href="#">Create</a>

</p>

<tr>

<th>

@Html.DisplayNameFor(model => model.name)

</th>

<th>

@Html.DisplayNameFor(model => model.age)

</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>

@* End Design for show the list of Registered Users

************************************************************@

</body>

</html>

Dotnet in simpleway

About Me

Monday 24 February 2014