Integration of jqGrid With MVC4 Application: Part 2

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.
- Enabling jqGrid add, edit, delete and refresh
- 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/'
41:
42: });
43:
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) {
58:
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>
72:
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;
8:
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: }
19:
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;
52:
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;
62:
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>();
79:
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();
87:
88: return Json(Questions,JsonRequestBehavior.AllowGet);
89: }
90: public ActionResult AddQuestion()
91: {
92:
93: return View(new UpdateCategory());
94: }
95: [HttpPost]
96: public void Savequestion(int dropdownid, string Ques,string Ans)
97: {
98: tblAddQuestion addobj = new tblAddQuestion();
99:
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.You can download code from the link shown below:
http://www.c-sharpcorner.com/UploadFile/97fc7a/integration-of-jqgrid-with-mvc4-application-part-2/
Thanks.
Stay happy and stay coding