Post
Ask Question

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>  
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.

Integration of jqGrid With MVC4 Application: Part 1

Thanks.

Stay happy and stay coding.

 


Similar Articles