The last couple of days we have been trying to get JQGrid working with ASP.NET MVC. It turns out it is not that hard to do. You just have to be cery careful with the javascript you put in the page, because if you don't do that nothing will happen.
What are the steps involved:
- Download the JqGrid javascript files.
- Create a new ASP.NET MVC application.
- Include the JS files in your master page. I only include the ones I need. My master page looks like this now.
1: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="JqGridTest.Views.Shared.Site" %>
2:
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml">
5: <head runat="server">
6: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
7: <title>
8: <%= Html.Encode(ViewData["Title"]) %></title>
9: <!-- In head section we should include the style sheet for the grid -->
10: <link rel="stylesheet" type="text/css" media="screen" href="~/themes/sand/grid.css" />
11:
12: <script type="text/javascript" src="<%= this.ResolveClientUrl("~/js/jquery-1.2.6.js") %>"></script>
13: <script type="text/javascript" src="<%= this.ResolveClientUrl("~/js/grid.base.js") %>"></script>
14:
15:
16: </head>
17: <body>
18: <div class="page">
19: <div id="header">
20: <p id="logo">
21: <a href="">My Sample MVC Application</a>
22: </p>
23: <ul id="menu">
24: <li>
25: <%= Html.ActionLink("Home", "Index", "Home")%>
26: </li>
27: <li>
28: <%= Html.ActionLink("About Us", "About", "Home")%>
29: </li>
30: </ul>
31: </div>
32: <div id="main">
33: <div id="content">
34: <asp:ContentPlaceHolder ID="MainContent" runat="server" />
35: </div>
36: <div id="footer">
37: <p>
38: My Sample MVC Application © Copyright 2008
39: </p>
40: </div>
41: </div>
42: </div>
43: </body>
44: </html>
- For this test I also included all themes including images in the root of web project.
- Then we can start adding the grid to our content page.
1: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true"
2: CodeBehind="Index.aspx.cs" Inherits="JqGridTest.Views.Home.Index" %>
3:
4: <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
5:
6: <script type="text/javascript">
7: $(document).ready(function() {
8: $("#list").jqGrid({
9: url:'../../Home/Example',
10: datatype:'json',
11: myType:'GET',
12: colNames:['Id','Name','Description'],
13: colModel:[
14: {name:'id',index:'id',width:55,resizable:true},
15: {name:'name',index:'name',width:90,resizable:true},
16: {name:'description',index:'description',width:120,resizable:true}],
17: pager:$('#pager'),
18: rowNum:10,
19: rowList:[10,20,30],
20: sortname:'id',
21: sortorder:'desc',
22: viewrecords:true,
23: multiselect: true,
24: multikey: "ctrlKey",
25: imgpath:'../../img/basic/images',
26: caption: 'My first grid'
27: });
28: });
29: </script>
30:
31: <!-- the grid definition in html is a table tag with class 'scroll' -->
32: <table id="list" class="scroll" cellpadding="0" cellspacing="0">
33: </table>
34: <!-- pager definition. class scroll tels that we want to use the same theme as grid -->
35: <div id="pager" class="scroll" style="text-align: center;">
36: </div>
37: </asp:Content>
- For now the most important thing is the URL, this will point to a action in our controller. This action is responsible for delivering the data to the grid. The controller action should return JSON data to the grid.
- Then we created a very simple controller action that returns some JSON data:
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.Mvc;
6:
7: namespace JqGridTest.Controllers
8: {
9: public class HomeController : Controller
10: {
11: public ActionResult Index()
12: {
13: ViewData["Title"] = "Home Page";
14: ViewData["Message"] = "Welcome to ASP.NET MVC!";
15:
16: return View();
17: }
18:
19: public ActionResult About()
20: {
21: ViewData["Title"] = "About Page";
22:
23: return View();
24: }
25: public ActionResult example()
26: {
27: var page = new { page = 1 };
28:
29: var rows = new object[2];
30: rows[0] = new { id = 222, cell = new[] { "222", "Blue", "This is blue" } };
31: rows[1] = new { id = 2, cell = new[] { "2", "Red", "This is red" } };
32:
33: //var endarray = new[] {page, rows};
34:
35:
36: var result = new JsonResult();
37: result.Data = new { page = 1, records = 2, rows, total = 1 };
38:
39: return result;
40: }
41: }
42: }
Now when you run the application you should see the grid on the screen! In next couple of days I'm going to integrate this further and check out the sorting, filtering and paging capabilities of the grid.
10 comments:
Hi Bart
Thanks for posting this, just what I was looking for. I was wondering if you had looked at interpereting a JSON result from a LINQ to SQL result set instead of an array.
Also, I managed to get this to work in FireFox but not in IE - received a few errors such as '$.jgrid.defaults' is null or not an object in grid.base.js. Did you have the same issues ?
We recently switched to the ExtJS grid on my project but of course we still need to give it JSON.
We are currently constructing the JSON string starting from a LINQ result set and we use the splendid Newtonsoft Json library for that.
Nigel
I had exactly that problem. I resolved it by linking to jquery.jqGrid.js in my master page instead of grid.base.js. I then set all includes in jquery.jqGrid.js to be false EXCEPT grid.base.js and it resolved the IE problem.
HTH
Nigel
I had exactly that problem. I resolved it by linking to jquery.jqGrid.js in my master page instead of grid.base.js. I then set all includes in jquery.jqGrid.js to be false EXCEPT grid.base.js and it resolved the IE problem.
HTH
Hi Nigel,
I created a sample app that uses a ExtJS grid and shows how to construct JSON from a LINQ query. You can read more about it here:
http://bartreyserhove.blogspot.com/2008/11/using-extjs-grid-in-your-aspnet-mvc.html
This is a very difficult grid to get working. My code has resulted in a blank screen without any javascript errors in FireFox 3.0.4. After copying your code, I still receive a blank page with no errors. Here's my code, if anyone wants a stab at it, though, I feel this is a configuration problem of some sort and not a problem with the javascript I've written to populate the grid.
<-- begin js -->
$(document).ready(function() {
$("#list").jqGrid({
url: "../../Manage/GetFarms",
datatype: 'json',
myType: 'GET',
colNames: ['Farm', 'Field', 'CropZone', 'Area'],
colModel: [
{ name: 'FarmName', index: 'FarmName', width: 55 },
{ name: 'FieldName', index: 'FieldName', width: 55 },
{ name: 'CropZoneName', index: 'CropZoneName', width: 55 },
{ name: 'Area', index: 'Area', width: 55}],
pager: $("#pager"),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'FarmName',
sortorder: "desc",
viewrecords: true,
imgpath: '../../Content/themes/basic/images',
caption: 'Farms'
});
});
<-- end js -->
Hi Corey,
Did you check the return value of the request using the console tab of firebug. Does your request return as expected?
Bart,
Thank you for your speedy reply. During a meeting a few moments ago I stumbled across my problem. In the jquery.jqGrid.js file the 'pathtojsfiles' variable was set to 'js/'. I thought this would be okay until I found out that the path needed to be based on the location of the page that contains the grid and not the location of the jquery.jqGrid.js file. This seems a little haphazard because I might wish to put the grid in several different places in my application and this path might need to changed based on the location of each given page. Anyhow, it's working and I appreciate the feedback!
Thanks,
Corey
live119|live119論壇|
角色扮演|跳蛋|情趣跳蛋|煙火批發|煙火|情趣用品|SM|
按摩棒|電動按摩棒|飛機杯|自慰套|自慰套|情趣內衣|
潤滑液|內衣|性感內衣|自慰器|
充氣娃娃|AV|情趣|衣蝶|
G點|性感丁字褲|吊帶襪|丁字褲|無線跳蛋|性感睡衣|
very good post, help me lot
Post a Comment