view code:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication46.Models.EMP>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<style type="text/css">
#popupBoxClose
{
font-size: 10px;
line-height: 15px;
right: 5px;
top: 5px;
position: absolute;
color: #6fa5e2;
font-weight: 500;
}
#popup_box
{
display: none; /* Hide the DIV */
position: fixed;
_position: absolute; /* hack for internet explorer 6 */
height: 300px;
width: 600px;
background: #FFFFFF;
left: 300px;
top: 150px;
z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px; /* additional features, can be omitted */
border: 2px solid #999999;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
}
</style>
<script src="../../Scripts/JScript.js" type="text/javascript"></script>
<script src="../../Scripts/JScript2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function y(s) {
$.getJSON('/Home/m', { a: s }, function (data) {
$("#gv").html("");
$("#gv").append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th></tr>");
for (var i = 0; i < data.length; i++) {
$("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data[i].EID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data[i].EID + ")'>Edit</a></td><td>" + data[i].EID + "</td><td>" + data[i].NAME + "</td></tr>");
}
});
}
function x(s) {
$.getJSON('/Home/y', { a: s }, function (data)
{
$('#tb').attr("value", data[0].EID);
$('#tb1').attr("value", data[0].NAME);
});
$('#popup_box').slideDown("slow");
}
$(document).ready(
function () {
$.getJSON('/Home/n', '', function (data) {
$("#gv").html("");
$("#gv").append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th></tr>");
for (var i = 0; i < data.length; i++) {
$("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data[i].EID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data[i].EID + ")'>Edit</a></td><td>" + data[i].EID + "</td><td>" + data[i].NAME + "</td></tr>");
}
});
$('#btn1').click(
function () {
$.getJSON('/Home/z', { a: $('#tb').val(), b: $('#tb1').val() }, function (data) {
$("#gv").html("");
$("#gv").append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th></tr>");
for (var i = 0; i < data.length; i++) {
$("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data[i].EID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data[i].EID + ")'>Edit</a></td><td>" + data[i].EID + "</td><td>" + data[i].NAME + "</td></tr>");
}
});
$('#popup_box').slideUp("slow");
}
)
JqueryAction();
function ShowPopUp() {
$('#popup_box').slideDown("slow");
}
function JqueryAction() {
$('#popupBoxClose').click(
function () {
$('#popup_box').slideUp("slow");
}
);
}
$('#btn').click
(
function () {
$.getJSON('/Home/x', { a: $('#EID').val(), b: $('#NAME').val() }, function (data) {
$("#gv").html("");
$("#gv").append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th></tr>");
for (var i = 0; i < data.length; i++) {
$("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data[i].EID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data[i].EID + ")'>Edit</a></td><td>" + data[i].EID + "</td><td>" + data[i].NAME + "</td></tr>");
}
});
}
)
}
)
</script>
<%using (Html.BeginForm())
{ %>
<form id="f">
<table align="center">
<tr><td>EID</td><td><%=Html.TextBoxFor(Model=>Model.EID) %></td></tr>
<tr><td>NAME</td><td><%=Html.TextBoxFor(Model=>Model.NAME) %></td></tr>
<tr><td> </td><td><input type="button" value="Save" id="btn" name="btn" /></td></tr>
<tr><td colspan="2">
<table id="gv" width="100%" border="1" cellpadding="0" cellspacing="0">
</table>
</td></tr>
</table>
<div id="popup_box">
<table align="center">
<tr>
<td>
</td>
<td>
<div id="popupBoxClose">
<a href="#" style="text-decoration: none">Close</a></div>
</td>
</tr>
<tr>
<td>
EID
</td>
<td>
<input type="text" id="tb" name="tb" />
</td>
</tr>
<tr>
<td>
NAME
</td>
<td>
<input type="text" id="tb1" name="tb1" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="btn1" name="btn1" value="Update" />
</td>
</tr>
</table>
</div>
</form>
<%} %>
</asp:Content>
Page looks like:
Controller code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication46.Models;
namespace MvcApplication46.Controllers
{
[HandleError]
public class HomeController : Controller
{
DataClasses1DataContext o = new DataClasses1DataContext();
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
public JsonResult x(int a, string b)
{
EMP p = new EMP();
p.EID = a;
p.NAME = b;
o.EMPs.InsertOnSubmit(p);
o.SubmitChanges();
return Json(o.EMPs.ToList(), JsonRequestBehavior.AllowGet);
}
public JsonResult z(int a, string b)
{
var m = (from x in o.EMPs where x.EID == a select x).First();
m.NAME = b;
o.SubmitChanges();
return Json(o.EMPs.ToList(), JsonRequestBehavior.AllowGet);
}
public JsonResult m(int a)
{
var m = (from x in o.EMPs where x.EID == a select x).First();
o.EMPs.DeleteOnSubmit(m);
o.SubmitChanges();
return Json(o.EMPs.ToList(), JsonRequestBehavior.AllowGet);
}
public JsonResult y(int a)
{
var m=(from x in o.EMPs where x.EID==a select x).ToList();
return Json(m, JsonRequestBehavior.AllowGet);
}
public JsonResult n()
{
return Json(o.EMPs.ToList(), JsonRequestBehavior.AllowGet);
}
}
}
