CRUD Operations Using Dialogue and Jquery in MVC
Model for Properties declaration:
Model for Properties declaration:
public class Sample {
public string FirstName { get; set; }
public string LastName { get; set; }
public string Location { get; set; }
public int Id { get; set; }
}
Controller Operations:
public ActionResult Dialog()
{
Sample sm = null;
List<Sample> sp = new List<Sample>();
var data = context.UserInfoes.ToList();
for (int i = 0; i < data.Count; i++)
{
sm = new Sample();
sm.FirstName = data[i].FirstName;
sm.LastName = data[i].LastName;
sm.Location = data[i].Location;
sm.Id = data[i].Id;
sp.Add(sm);
}
return View(sp);
}
public JsonResult DialogUpdate(string Name, string Class, string Subject,int id)
{
var con = context.UserInfoes.Where(u => u.Id == id).FirstOrDefault();
con.FirstName = Name;
con.LastName = Class;
con.Location = Subject;
context.SaveChanges();
return Json(true,JsonRequestBehavior.AllowGet);
}
public JsonResult Dialogassign(int id)
{
Sample s=new Sample();
var con = context.UserInfoes.Where(u => u.Id == id).FirstOrDefault();
s.FirstName = con.FirstName;
s.LastName = con.LastName;
s.Location = con.Location;
s.Id = con.Id;
return Json(s,JsonRequestBehavior.AllowGet);
}
public JsonResult DialogInsert(string Name, string Class, string Subject)
{
UserInfo con = new UserInfo();
con.FirstName = Name;
con.LastName = Class;
con.Location = Subject;
context.AddToUserInfoes(con);
context.SaveChanges();
return Json(true, JsonRequestBehavior.AllowGet);
}
public JsonResult Dialogdelete(int id)
{
var con = context.UserInfoes.Where(u => u.Id == id).FirstOrDefault();
context.DeleteObject(con);
context.SaveChanges();
return Json(true, JsonRequestBehavior.AllowGet);
}
View :
@model
IEnumerable<JQGridExample.Models.Sample>
@{
ViewBag.Title = "Dialog";
}
<h2>Dialog</h2>
<!DOCTYPE html>
<html>
<head>
<link href="../assets/styles.min.css" rel="stylesheet">
<title>jQuery UI Dialog: Open Dialog on Click</title>
<link href="~/Content/css/jquery-ui.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="dialog" title="Dialog">
<table>
<tr>
<td style="color: white">Name:</td>
<td>
<input type="text" id="name" /></td>
</tr>
<tr>
<td style="color: white">Class:</td>
<td>
<input type="text" id="class" /></td>
</tr>
<tr>
<td style="color: white">Subject:</td>
<td>
<input type="text" id="Subject" />
<input type="hidden" id="id" />
</td>
</tr>
</table>
<input type="button" id="button1" value="Update">
</div>
<div id="dialog1" title="Dialog">
<table>
<tr>
<td style="color: white">Name:</td>
<td>
<input type="text" id="name1" /></td>
</tr>
<tr>
<td style="color: white">Class:</td>
<td>
<input type="text" id="class1" /></td>
</tr>
<tr>
<td style="color: white">Subject:</td>
<td>
<input type="text" id="Subject1" />
</td>
</tr>
</table>
<input type="button" id="button2" value="Create">
</div>
<table border="1">
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>Location</td>
<td></td>
<td></td>
</tr>
@foreach (var m in Model)
{
<tr>
<td>@m.FirstName</td>
<td>@m.LastName</td>
<td>@m.Location</td>
<td><a onclick='return Poup(@m.Id)' href="#">Edit</a></td>
<td><a onclick='return PoupD(@m.Id)' href="#">Delete</a></td>
</tr>
}
</table>
<input type="button" id="button" value="Click to create
New">
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false
});
});
function Poup(id) {
$.getJSON('@Url.Action("Dialogassign", "JQGrid")', { id: id },
function (data) {
$("#name").val(data.FirstName);
$("#class").val(data.LastName);
$("#Subject").val(data.Location);
$("#id").val(data.Id);
});
$("#dialog").dialog("open");
}
$(function () {
$("#button1").click(function () {
var name = $("#name").val();
var classs = $("#class").val();
var subject = $("#Subject").val();
var id = $("#id").val();
$.getJSON('@Url.Action("DialogUpdate", "JQGrid")',
{
Name: name,
Class: classs,
Subject: subject,
id: id
}
, function (result) {
alert("Updated");
$("#dialog").dialog("close");
location.reload();
});
});
});
$(function () {
$("#dialog1").dialog({
autoOpen: false,
//buttons:
{ 'add': function () { alert('ra'); } }
});
$("#button").click(function () {
$("#dialog1").dialog("open");
});
});
$(function () {
$("#button2").click(function () {
var name = $("#name1").val();
var classs = $("#class1").val();
var subject = $("#Subject1").val();
$.getJSON('@Url.Action("DialogInsert", "JQGrid")',
{
Name: name,
Class: classs,
Subject: subject,
}
, function (result) {
alert("Inserted");
$("#dialog1").dialog("close");
location.reload();
});
});
});
function PoupD(id) {
$.getJSON('@Url.Action("Dialogdelete", "JQGrid")', { id: id },
function (data) {
alert("Deleted");
})
location.reload();
}
</script>
</body>
</html>
