using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcUpdate.EF;
namespace MvcUpdate.Controllers
{
public class EmpController : Controller
{
//
// GET: /Emp/
test_dbEntities db = new test_dbEntities();
[OutputCache(Duration = 0)]
public JsonResult ShowEmployee()
{
return Json(db.emps, JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateEmployee(int empId, string empName, int age)
{
emp Emp = db.emps.Single(em => em.id == empId);
Emp.name = empName;
Emp.age = age;
db.SaveChanges();
return Json("Record has Updated", JsonRequestBehavior.AllowGet);
}
public ActionResult Index()
{
int pageSize = 5;
int pageNo = 1;
int totalPage = db.emps.Count() / pageSize;
ViewData["tp"] = totalPage;
int skp = (pageNo - 1) * pageSize;
List<emp> Emp = db.emps.OrderBy(em => em.id)
.Skip(skp).Take(pageSize).ToList();
return View(Emp);
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcUpdate.EF;
namespace MvcUpdate.Controllers
{
public class EmpController : Controller
{
//
// GET: /Emp/
test_dbEntities db = new test_dbEntities();
[OutputCache(Duration = 0)]
public JsonResult ShowEmployee()
{
return Json(db.emps, JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateEmployee(int empId, string empName, int age)
{
emp Emp = db.emps.Single(em => em.id == empId);
Emp.name = empName;
Emp.age = age;
db.SaveChanges();
return Json("Record has Updated", JsonRequestBehavior.AllowGet);
}
public ActionResult Index()
{
int pageSize = 5;
int pageNo = 1;
int totalPage = db.emps.Count() / pageSize;
ViewData["tp"] = totalPage;
int skp = (pageNo - 1) * pageSize;
List<emp> Emp = db.emps.OrderBy(em => em.id)
.Skip(skp).Take(pageSize).ToList();
return View(Emp);
}
}
}
------------------------------------------------------------------------------------------------
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" ></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript" ></script>
<script type="text/javascript">
var EmpData = "";
$(document).ready(function () { show(-1); });
function show(empId) {
$.get("/Emp/ShowEmployee", null, function (data) { chkShow(data, empId); });
}
function chkShow(abc, empId) {
EmpData = abc;
BuildTable(abc, empId);
}
// function ShowDialog(empId, empName, empSalary) {
// var dialogDesign = "<table>";
// dialogDesign += "<tr><td style=width:100;font-size:small >Emp Id</td>";
// dialogDesign += "<td style=width:100;font-size:small ><input id=txtEmpId type=text value=" + empId + " /></td></tr>";
// dialogDesign += "<tr><td style=width:100;font-size:small >Emp Name</td>";
// dialogDesign += "<td style=width:100;font-size:small ><input id=txtEmpName type=text value=" + empName + " /></td></tr>";
// dialogDesign += "<tr><td style=width:100;font-size:small >Emp Salary</td>";
// dialogDesign += "<td style=width:100;font-size:small ><input id=txtEmpSalary type=text value=" + empSalary + " /></td></tr>";
// dialogDesign += "<tr><td style=width:100;font-size:small ></td>";
// dialogDesign += "<td style=width:100;font-size:small ><input id=btnUpdate type=button value=Update /></td></tr></table>";
// $('#dd').html(dialogDesign);
// $('#dd').dialog();
// }
function BuildTable(msg, empId) {
var table = '<table><thead><tr><th style=background-color:#FAEBD7;width:100px; >Emp Id</th><th style=background-color:#FAEBD7;width:100px; >Emp Name</th><th style=background-color:#FAEBD7;width:100px; >Emp Salary</th><th style=background-color:#FAEBD7;width:100px; >Operation</th></thead><tbody>';
for (var cd in msg) {
var row = "<tr onclick=ShowDialog(" + msg[cd].id + ",'" + msg[cd].name + "'," + msg[cd].age + ") >";
row += '<td style=background-color:Silver;width:100px; >' + msg[cd].id + '</td>';
if (empId == msg[cd].id) {
row += '<td style=background-color:Silver;width:100px; ><input id="txtEmpName" '
+ ' value=' + msg[cd].name + ' type="text" /></td>';
row += '<td style=background-color:Silver;width:100px; ><input id="txtEmpSalary" '
+ ' value=' + msg[cd].age + ' type="text" /></td>';
row += '<td style=background-color:Silver;width:100px; ><input onclick="updateRecord(' + msg[cd].id
+ ')" id="btnUpdate" type="button" value="Update" /><input onclick="cancelRecord()" id="btnCancel" type="button" value="Cancel" />'
+ '</td>';
}
else {
row += '<td style=background-color:Silver;width:100px; >' + msg[cd].name + '</td>';
row += '<td style=background-color:Silver;width:100px; >' + msg[cd].age + '</td>';
row += '<td style=background-color:Silver;width:100px; ><input onclick="editRecord(' + msg[cd].id
+ ')" id="btnEdit" type="button" value="Edit" />'
+ '</td>';
}
row += '</tr>';
table += row;
}
table += '</tbody></table>';
$('#d1').html(table);
}
function editRecord(empId) {
BuildTable(EmpData, empId);
}
function cancelRecord() {
BuildTable(EmpData, -1);
}
function updateRecord(empId) {
var EmpName = $('#txtEmpName').val();
var EmpSalary = $('#txtEmpSalary').val();
$.post('/Emp/UpdateEmployee', { empId: empId, empName: EmpName, age: EmpSalary }, function (data) { alert(data); show(-1); });
}
</script>
</head>
<body>
<div id="d1" >
</div>
</body>
</html>
--------------------------------------------------------------------------------------
output look like this:
Index
| Emp Id | Emp Name | Emp Salary | Operation |
|---|---|---|---|
| 23 | Update Cancel | ||
| 34 | vijay chauhan | 23 | Update Cancel |
| 35 | sonu trivedi | 67 | Update Cancel |
| 40 | sanjeev | 78 | Update Cancel |
| 46 | sanjeev kumar radnwa | 12 | Update Cancel |
| 48 | mukesh 123 | 4 | Update Cancel |
No comments:
Post a Comment