CRUD Operations using jQuery, Entity Framework and ASP.NET MVC

  1. public class User
  2. {
  3. public int UserID { get; set; }
  4. [Required(ErrorMessage = "Please Enter Your Name")]
  5. public string Name { get; set; }
  6. [Required(ErrorMessage = "Please Enter Your Address")]
  7. public string Address { get; set; }
  8. [Required(ErrorMessage = "Please Enter Your Contact No")]
  9. public string ContactNo { get; set; }
  10. }
  11.  
  12. public class DataContext : DbContext
  13. {
  14. public DataContext()
  15. : base("DefaultConnection")
  16. {
  17.  
  18. }
  19.  
  20. public DbSet<User> Users { get; set; }
  21. }
Now migrate your data model class into SQL Server database by using EF code first database migration. For more help refer this link Understanding Entity Framework Code First Migrations

Making jQuery dialogs for CRUD Operations

  1. @model IEnumerable<jQuery_CRUD.DAL.User>
  2. @{
  3. ViewBag.Title = "Index";
  4. }
  5. <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  6. <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
  7. <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  8. <script>
  9. $(document).ready(function () {
  10. var url = "";
  11. $("#dialog-alert").dialog({
  12. autoOpen: false,
  13. resizable: false,
  14. height: 170,
  15. width: 350,
  16. show: { effect: 'drop', direction: "up" },
  17. modal: true,
  18. draggable: true,
  19. open: function (event, ui) {
  20. $(".ui-dialog-titlebar-close").hide();
  21. },
  22. buttons: {
  23. "OK": function () {
  24. $(this).dialog("close");
  25.  
  26. },
  27. "Cancel": function () {
  28. $(this).dialog("close");
  29. }
  30. }
  31. });
  32.  
  33. if ('@TempData["msg"]' != "") {
  34. $("#dialog-alert").dialog('open');
  35. }
  36.  
  37. $("#dialog-edit").dialog({
  38. title: 'Create User',
  39. autoOpen: false,
  40. resizable: false,
  41. width: 400,
  42. show: { effect: 'drop', direction: "up" },
  43. modal: true,
  44. draggable: true,
  45. open: function (event, ui) {
  46. $(".ui-dialog-titlebar-close").hide();
  47. $(this).load(url);
  48. }
  49. });
  50.  
  51. $("#dialog-confirm").dialog({
  52. autoOpen: false,
  53. resizable: false,
  54. height: 170,
  55. width: 350,
  56. show: { effect: 'drop', direction: "up" },
  57. modal: true,
  58. draggable: true,
  59. open: function (event, ui) {
  60. $(".ui-dialog-titlebar-close").hide();
  61.  
  62. },
  63. buttons: {
  64. "OK": function () {
  65. $(this).dialog("close");
  66. window.location.href = url;
  67. },
  68. "Cancel": function () {
  69. $(this).dialog("close");
  70. }
  71. }
  72. });
  73.  
  74. $("#dialog-detail").dialog({
  75. title: 'View User',
  76. autoOpen: false,
  77. resizable: false,
  78. width: 400,
  79. show: { effect: 'drop', direction: "up" },
  80. modal: true,
  81. draggable: true,
  82. open: function (event, ui) {
  83. $(".ui-dialog-titlebar-close").hide();
  84. $(this).load(url);
  85. },
  86. buttons: {
  87. "Close": function () {
  88. $(this).dialog("close");
  89. }
  90. }
  91. });
  92.  
  93. $("#lnkCreate").live("click", function (e) {
  94. //e.preventDefault(); //use this or return false
  95. url = $(this).attr('href');
  96. $("#dialog-edit").dialog('open');
  97.  
  98. return false;
  99. });
  100.  
  101. $(".lnkEdit").live("click", function (e) {
  102. // e.preventDefault(); use this or return false
  103. url = $(this).attr('href');
  104. $(".ui-dialog-title").html("Update User");
  105. $("#dialog-edit").dialog('open');
  106.  
  107. return false;
  108. });
  109.  
  110. $(".lnkDelete").live("click", function (e) {
  111. // e.preventDefault(); use this or return false
  112. url = $(this).attr('href');
  113. $("#dialog-confirm").dialog('open');
  114.  
  115. return false;
  116. });
  117.  
  118. $(".lnkDetail").live("click", function (e) {
  119. // e.preventDefault(); use this or return false
  120. url = $(this).attr('href');
  121. $("#dialog-detail").dialog('open');
  122.  
  123. return false;
  124. });
  125.  
  126. $("#btncancel").live("click", function (e) {
  127. $("#dialog-edit").dialog("close");
  128. return false;
  129. });
  130. });
  131. </script>
  132. <div id="dialog-alert" style="display: none">
  133. <p>
  134. @TempData["msg"]!
  135. </p>
  136. </div>
  137.  
  138. <div id="dialog-confirm" style="display: none">
  139. <p>
  140. <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
  141. Are you sure to delete?
  142. </p>
  143. </div>
  144.  
  145. <div id="dialog-edit" style="display: none">
  146. </div>
  147. <div id="dialog-detail" style="display: none">
  148. </div>
  149.  
  150. <h2>Users List</h2>
  151.  
  152. <p>
  153. @Html.ActionLink("Create New", "Create", null, new { id = "lnkCreate" })
  154. </p>
  155. <table>
  156. <tr>
  157. <th>
  158. @Html.DisplayNameFor(model => model.Name)
  159. </th>
  160. <th>
  161. @Html.DisplayNameFor(model => model.Address)
  162. </th>
  163. <th>
  164. @Html.DisplayNameFor(model => model.ContactNo)
  165. </th>
  166. <th></th>
  167. </tr>
  168.  
  169. @foreach (var item in Model)
  170. {
  171. <tr>
  172. <td>
  173. @Html.DisplayFor(modelItem => item.Name)
  174. </td>
  175. <td>
  176. @Html.DisplayFor(modelItem => item.Address)
  177. </td>
  178. <td>
  179. @Html.DisplayFor(modelItem => item.ContactNo)
  180. </td>
  181. <td>
  182. @Html.ActionLink("Edit", "Edit", new { id = item.UserID }, new { @class = "lnkEdit" }) |
  183. @Html.ActionLink("Details", "Details", new { id = item.UserID }, new { @class = "lnkDetail" }) |
  184. @Html.ActionLink("Delete", "Delete", new { id = item.UserID }, new { @class = "lnkDelete" })
  185. </td>
  186. </tr>
  187. }
  188.  
  189. </table>

Controller for handling CRUD Operations

  1. public class UserController : Controller
  2. {
  3. private DataContext db = new DataContext();
  4.  
  5. // GET: /User/
  6. public ActionResult Index()
  7. {
  8. return View(db.Users.ToList());
  9. }
  10.  
  11. // GET: /User/Details/5
  12. public ActionResult Details(int id = 0)
  13. {
  14. User user = db.Users.Find(id);
  15. if (user == null)
  16. {
  17. return HttpNotFound();
  18. }
  19. return View(user);
  20. }
  21.  
  22. // GET: /User/Create
  23. public ActionResult Create()
  24. {
  25. return PartialView();
  26. }
  27.  
  28. // POST: /User/Create
  29. [HttpPost]
  30. [ValidateAntiForgeryToken]
  31. public ActionResult Create(User user, string Command)
  32. {
  33. if (ModelState.IsValid)
  34. {
  35. db.Users.Add(user);
  36. db.SaveChanges();
  37. TempData["Msg"] = "Data has been saved succeessfully";
  38. return RedirectToAction("Index");
  39. }
  40.  
  41. return View(user);
  42. }
  43.  
  44. // GET: /User/Edit/5
  45. public ActionResult Edit(int id = 0)
  46. {
  47. User user = db.Users.Find(id);
  48. if (user == null)
  49. {
  50. return HttpNotFound();
  51. }
  52. return View(user);
  53. }
  54.  
  55. // POST: /User/Edit/5
  56. [HttpPost]
  57. [ValidateAntiForgeryToken]
  58. public ActionResult Edit(User user)
  59. {
  60. if (ModelState.IsValid)
  61. {
  62. db.Entry(user).State = EntityState.Modified;
  63. db.SaveChanges();
  64. TempData["Msg"] = "Data has been updated succeessfully";
  65. return RedirectToAction("Index");
  66. }
  67. return View(user);
  68. }
  69.  
  70. // GET: /User/Delete/5
  71. public ActionResult Delete(int id)
  72. {
  73. User user = db.Users.Find(id);
  74. db.Users.Remove(user);
  75. db.SaveChanges();
  76. TempData["Msg"] = "Data has been deleted succeessfully";
  77. return RedirectToAction("Index");
  78. }
  79.  
  80. protected override void Dispose(bool disposing)
  81. {
  82. db.Dispose();
  83. base.Dispose(disposing);
  84. }
  85. }

  1. Really nice blog post.provided a helpful information.I hope that you will post more updates like this
    DotNET Online Training

    ReplyDelete

Search This Blog

Arsip Blog

Powered by Blogger.

Recent

Comment

Author Info

Like This Theme

Popular Posts

Video Of Day

Sponsor

Most Popular