Actually I needed to implement it in my project and I encountered many difficulties in getting this feature because I hardly found any help for it and if I found something then it was just halfway useful.

I recommend you to visit this before proceeding with this article.

This is a second part of Integration of jqGrid with MVC4 application. This part is more about enabling add, edit, delete and refresh as well as a little validation using builtin validation keywords.

To learn more about MVC kindly go to C# Corner MVC Section or My Blog.

I've developed this sample application using Visual Studio 2012 and used Entity Framework to retrieve information from the database.

Step 1 : Enabling jqGrid add, edit, delete and refresh



After enabling values we should run the application and press F5. Kindly see the following image.




I have pasted this URL into a browser http://localhost:26158/Admin to get the above result.

Here is the complete code of AddTopic.cshtml, though I will share the AdminController class file and AddTopic.cshtml file with you as a sample so that you could add it into your solution.

Note: the code segment of jqGrid in the AddTopic.cshtml view is as shown below:

  1. @{
  2. ViewBag.Title = "ADDTOPICS";
  3. Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta name="viewport" content="width=device-width" />
  9. <title>AddTopics</title>
  10. <script src="~/Scripts/jquery.jqGrid.js"></script>
  11. <script src="~/Scripts/jquery.jqGrid.min.js"></script>
  12. <script src="~/Scripts/i18n/grid.locale-en.js"></script>
  13. <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
  14. <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  15. <!-- The jqGrid client-side javascript -->
  16. @* <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js"></script>*@
  17. <script type="text/javascript">
  18. var ClickEventId;
  19. $(document).ready(function myfunction() {
  20. $('#list').jqGrid({
  21. caption: "Add Topics",
  22. url: '/Admin/GetTopics/',
  23. datatype: "json",
  24. contentType: "application/json; charset-utf-8",
  25. mtype: 'GET',
  26. colNames: ['ID', 'Name', 'Created_by', 'Created_On'],
  27. colModel: [
  28. { name: 'ID', index: 'ID', width: 150, editable: true, editoptions: { readonly: 'readonly' }, editrules: { readonly: true } },
  29. {
  30. name: 'topic_name', index: 'topic_name', width: 150, editable: true, editrules: { required: true }
  31. },
  32. {
  33. name: 'Created_by', index: 'Created_by', width: 150, editable: true, editrules: { required: true }
  34. },
  35. { name: 'Created_On', index: 'Created_On', width: 150, editable: true, editrules: { required: true } }
  36. ],
  37. rowNum: 10,
  38. loadonce: true,
  39. pager: '#pager',
  40. editurl: '/Admin/EditTopics/'
  42. });
  44. jQuery("#list").jqGrid('navGrid', '#pager', {
  45. edit: true,
  46. add: true,
  47. del: true,
  48. search: true,
  49. refresh: true,
  50. searchtext: "Search",
  51. addtext: "Add",
  52. edittext: "Edit",
  53. deltext: "Delete",
  54. refreshtext:"Refresh"
  55. }
  56. );
  57. $('.ui-pg-button').on('click', function (ev) {
  59. ClickEventId = this.id;
  60. });
  61. });
  62. </script>
  63. </head>
  64. <body>
  65. <table id="list"></table>
  66. <div id="pager"></div>
  67. @*<div>
  68. <%= Html.Trirand().JQGrid("", "EditDialogGrid") %>
  69. </div>*@
  70. </body>
  71. </html>
Code for AdminController: After putting this URL http://localhost:26158/Admin into a browser, it calls the Index Action that returns the AddTopics View and does other operations.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Collections.Specialized;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  7. using QuickBook.Models;
  9. namespace QuickBook.Controllers
  10. {
  11. public class AdminController : Controller
  12. {
  13. // GET: /Admin/
  14. EmployeeEntities edb = new EmployeeEntities();
  15. public ActionResult Index()
  16. {
  17. return View("AddTopics");
  18. }
  20. [HttpGet]
  21. public JsonResult GetTopics()
  22. {
  23. EmployeeEntities edb = new EmployeeEntities();
  24. var jsonData = new
  25. {
  26. total = 1,
  27. page = 1,
  28. records = edb.tblAddTopics.ToList().Count,
  29. rows = (
  30. from emp in edb.tblAddTopics.ToList()
  31. select new
  32. {
  33. id = emp.id,
  34. cell = new string[] {
  35. emp.id.ToString(), emp.topic_name.ToString(), emp.created_by.ToString(),emp.created_on.ToString()
  36. }
  37. }).ToArray()
  38. };
  39. return Json(jsonData, JsonRequestBehavior.AllowGet);
  40. }
  41. [HttpPost]
  42. public void EditTopics(tblAddTopic postData, string ClickEventId)
  43. {
  44. // EmployeeEntities edb = new EmployeeEntities();
  45. if (ClickEventId == "edit_list")
  46. {
  47. var editRecord =
  48. edb.tblAddTopics.Where(x => x.id == postData.id).SingleOrDefault();
  49. editRecord.topic_name = postData.topic_name;
  50. editRecord.created_by = postData.created_by;
  51. editRecord.created_on = postData.created_on;
  53. edb.SaveChanges();
  54. }
  55. else if (ClickEventId == null && postData.topic_name!=null)
  56. {
  57. //var editRecord =
  58. // edb.tblAddTopics.Where(x => x.id == postData.id).SingleOrDefault();
  59. //editRecord.topic_name = postData.topic_name;
  60. //editRecord.created_by = postData.created_by;
  61. //editRecord.created_on = postData.created_on;
  63. edb.tblAddTopics.Add(postData);
  64. edb.SaveChanges();
  65. }
  66. else if (postData.topic_name==null)
  67. {
  68. var DeleteRecord =
  69. edb.tblAddTopics.Where(x => x.id == postData.id).SingleOrDefault();
  70. edb.tblAddTopics.Remove(DeleteRecord);
  71. edb.SaveChanges();
  72. }
  73. }
  74. [HttpGet]
  75. public JsonResult GetQuestionNo()
  76. {
  77. EmployeeEntities objEmpRegistration = new EmployeeEntities();
  78. List<Question> Questions = new List<Question>();
  80. Questions = (from p in objEmpRegistration.tblAddQuestions.ToList()
  81. group p by p.category_id into g
  82. select new Question
  83. {
  84. QuestionNO = g.Count() + 1,
  85. categoryID = g.Key
  86. }).ToList();
  88. return Json(Questions,JsonRequestBehavior.AllowGet);
  89. }
  90. public ActionResult AddQuestion()
  91. {
  93. return View(new UpdateCategory());
  94. }
  95. [HttpPost]
  96. public void Savequestion(int dropdownid, string Ques,string Ans)
  97. {
  98. tblAddQuestion addobj = new tblAddQuestion();
  100. addobj.category_id = dropdownid;
  101. addobj.question = Ques;
  102. addobj.answer = Ans;
  103. addobj.created_by = 100;
  104. addobj.created_on = System.DateTime.Now;
  105. edb.tblAddQuestions.Add(addobj);
  106. edb.SaveChanges();
  107. // return ("successfully");
  108. }
  109. }
  110. }
Validation keywords

Kindly refer to the following image to understand grid-level validation.



Note: You can control more textual information at the grid.locale-en.js level, like caption, Add caption, the Submit button text and much more as shown in the image below.



I have added AddTopics.cshtml and Admincontroller.cs as a sample though I have already shared a database backup file in Part 1.

Integration of jqGrid With MVC4 Application: Part 1

Thanks.

Stay happy and stay coding.