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.

Integration of jqGrid With MVC4 Application: Part 1

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:

@{
ViewBag.Title = "ADDTOPICS";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AddTopics</title>
<script src="~/Scripts/jquery.jqGrid.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
@* <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js"></script>*@
<script type="text/javascript">
var ClickEventId;
$(document).ready(function myfunction() {
$('#list').jqGrid({
caption: "Add Topics",
url: '/Admin/GetTopics/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['ID', 'Name', 'Created_by', 'Created_On'],
colModel: [
{ name: 'ID', index: 'ID', width: 150, editable: true, editoptions: { readonly: 'readonly' }, editrules: { readonly: true } },
{
name: 'topic_name', index: 'topic_name', width: 150, editable: true, editrules: { required: true }
},
{
name: 'Created_by', index: 'Created_by', width: 150, editable: true, editrules: { required: true }
},
{ name: 'Created_On', index: 'Created_On', width: 150, editable: true, editrules: { required: true } }
],
rowNum: 10,
loadonce: true,
pager: '#pager',
editurl: '/Admin/EditTopics/'
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: true,
search: true,
refresh: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
refreshtext:"Refresh"
}
);
$('.ui-pg-button').on('click', function (ev) {
ClickEventId = this.id;
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
@*<div>
<%= Html.Trirand().JQGrid("", "EditDialogGrid") %>
</div>*@
</body>
</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.

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using QuickBook.Models;
namespace QuickBook.Controllers
{
public class AdminController : Controller
{
// GET: /Admin/
EmployeeEntities edb = new EmployeeEntities();
public ActionResult Index()
{
return View("AddTopics");
}
[HttpGet]
public JsonResult GetTopics()
{
EmployeeEntities edb = new EmployeeEntities();
var jsonData = new
{
total = 1,
page = 1,
records = edb.tblAddTopics.ToList().Count,
rows = (
from emp in edb.tblAddTopics.ToList()
select new
{
id = emp.id,
cell = new string[] {
emp.id.ToString(), emp.topic_name.ToString(), emp.created_by.ToString(),emp.created_on.ToString()
}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public void EditTopics(tblAddTopic postData, string ClickEventId)
{
// EmployeeEntities edb = new EmployeeEntities();
if (ClickEventId == "edit_list")
{
var editRecord =
edb.tblAddTopics.Where(x => x.id == postData.id).SingleOrDefault();
editRecord.topic_name = postData.topic_name;
editRecord.created_by = postData.created_by;
editRecord.created_on = postData.created_on;
edb.SaveChanges();
}
else if (ClickEventId == null && postData.topic_name!=null)
{
//var editRecord =
// edb.tblAddTopics.Where(x => x.id == postData.id).SingleOrDefault();
//editRecord.topic_name = postData.topic_name;
//editRecord.created_by = postData.created_by;
//editRecord.created_on = postData.created_on;
edb.tblAddTopics.Add(postData);
edb.SaveChanges();
}
else if (postData.topic_name==null)
{
var DeleteRecord =
edb.tblAddTopics.Where(x => x.id == postData.id).SingleOrDefault();
edb.tblAddTopics.Remove(DeleteRecord);
edb.SaveChanges();
}
}
[HttpGet]
public JsonResult GetQuestionNo()
{
EmployeeEntities objEmpRegistration = new EmployeeEntities();
List<Question> Questions = new List<Question>();
Questions = (from p in objEmpRegistration.tblAddQuestions.ToList()
group p by p.category_id into g
select new Question
{
QuestionNO = g.Count() + 1,
categoryID = g.Key
}).ToList();
return Json(Questions,JsonRequestBehavior.AllowGet);
}
public ActionResult AddQuestion()
{
return View(new UpdateCategory());
}
[HttpPost]
public void Savequestion(int dropdownid, string Ques,string Ans)
{
tblAddQuestion addobj = new tblAddQuestion();
addobj.category_id = dropdownid;
addobj.question = Ques;
addobj.answer = Ans;
addobj.created_by = 100;
addobj.created_on = System.DateTime.Now;
edb.tblAddQuestions.Add(addobj);
edb.SaveChanges();
// return ("successfully");
}
}
}

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.