Remark :
ajax call json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
@using EmployeeMaintenance.Models; @model IEnumerable<Employee> @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section css { } <h2>Employee List</h2> <div> @Html.ActionLink("Index", "Index", "Home") </div> <div> <table class="table table-bordered table-condensed"> <tr> <th>Name</th> <th>Department</th> <th>jQuery AJAX</th> </tr> @foreach (Employee emp in Model) { <tr id="tr@(emp.EmployeeId)"> <td> @Html.ActionLink(String.Format("{0} {1}", emp.FirstName, emp.LastName), "Details", new { id = emp.EmployeeId }) </td> <td> @emp.Department.DepartmentName </td> <td> <a class="details" id="@emp.EmployeeId" href="#">Details</a> | <a class="delete" id="@emp.EmployeeId" href="#">Delete</a> </td> </tr> } </table> </div> <div id="details"> </div> @section scripts { <script type="text/javascript"> $(document).ready(function () { $('a.details').click(function () { var id = $(this).attr("id"); $.ajax({ url: '/employee/detailasjson', type: "GET", dataType: "json", data: {id:id}, success: function (data) { content = "<h3>Employee Detail</h3>"; content += "<dl class=\"dl-horizontal\">"; content += "<dt>First Name</dt><dd>" + data.FirstName + "</dd>"; content += "<dt>Last Name</dt><dd>" + data.LastName + "</dd>"; content += "<dt>Address1</dt><dd>" + data.Address1 + "</dd>"; content += "<dt>Address2</dt><dd>" + data.Address2 + "</dd>"; content += "<dt>City</dt><dd>" + data.City + "</dd>"; content += "<dt>State</dt><dd>" + data.State + "</dd>"; content += "<dt>Country </dt><dd>" + data.Country + "</dd>"; content += "<dt>PostalCode</dt><dd>" + data.PostalCode + "</dd>"; content += "<dt>Email </dt><dd>" + data.Email + "</dd>"; content += "<dt>DOB </dt><dd>" + data.DOB + "</dd>"; content += "<dt>Gender </dt><dd>" + data.Gender + "</dd>"; content += "<dt>IsPermanent </dt><dd>" + data.IsPermanent + "</dd>"; content += "<dt>Salary </dt><dd>" + data.Salary + "</dd>"; content += " </dl>"; $('#details').html(content); }, error: function (xhr, status, error) { alert(xhr.responseText); alert(status); alert(error); } }); }); $('a.delete').click(function () { var id = $(this).attr("id"); $.ajax({ url: '/employee/delete', type: "POST", dataType: "text", data: { id: id }, success: function (data) { $('#tr' + id).html(data); }, error: function (xhr, status, error) { alert(xhr.responseText); alert(status); alert(error); } }); }); }); </script> } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
using EmployeeMaintenance.Models; using EmployeeMaintenance.Models.DL; using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.Mvc; namespace EmployeeMaintenance.Controllers { public class EmployeeController : Controller { DBModel db = new DBModel(); public ActionResult Index() { return View(); } public ActionResult details(int id) { return View(db.Employees.Where(e => e.EmployeeId == id).FirstOrDefault()); } public ActionResult EmployeeSummary() { IList<Employee> empSummary = db.Employees.ToList(); return View(empSummary); } public JsonResult detailasjson(int id) { return Json(db.Employees.Where(e => e.EmployeeId == id).FirstOrDefault(), JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult delete(int id) { Employee emp = db.Employees.Where(e => e.EmployeeId == id).FirstOrDefault(); if(emp != null) { db.Employees.Remove(emp); db.SaveChanges(); return Content("Deleted Successfully!"); } return Content("Error!"); } } } |