Thursday, July 31, 2014

Integration of jqGrid With MVC4 Application: Part 2

Posted on 10:16 PM by Sachin Kalia

Integration of jqGrid With MVC4 Application: Part 2

 

jqGrid

 

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 codingSmile

Categories: ,

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )