ASP.NET MVC 2 и jqGrid

Введение
При работе с данными часто возникает необходимость отображения их в виде таблицы, и кроме этого еще иметь возможности удобной манипуляции с данными: сортировка, фильтрация, редактирование и тд.

После непродолжительных поисков наткнулся на плагин jqGrid к jQuery.
Возможности плагина:

  • Постраничная загрузка данных (Paging)
  • Inline редактирование данных
  • Сортировка и фильтрация
  • Режим отображения — SubGrid. По сути это разновидность Master — Detail
  • Режим отображения древовидных списков — TreeGrid


Подготовка

Чтобы начать использовать jqGrid необходимо скачать:
1. Плагин jqGrid
2. jQuery UI

Запускаем Microsoft Visual Studio 2010 и создаем проект ASP NET MVC 2 Application. После создания проекта необходимо добавить в
Далее добавляем в проект плагин jqGrid и jQuery UI, для этого из архива jqGrid копируем каталоги css и js в каталог Script\jquery.jqGrid проект. Из архива jQuery UI нужны каталоги css, js копируем их в Scripts\jquery.ui.
Получаем следующую структуру проекта

Итак, кроме добавления файлов в проект необходимо добавить следующие строки в \Views\Shared\Site.Master

    <link href="../../Scripts/jquery.UI/css/redmond/jquery-ui-1.8.1.custom.css" rel="Stylesheet" type="text/css" />
    <link href="../../Scripts/jquery.jqGrid/css/ui.jqgrid.css" rel="Stylesheet" type="text/css" />
    
    <script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/i18n/grid.locale-ru.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery.jqGrid.min.js"></script>

Вот теперь у нас все готово для использования jqGrid.


Задача:
Отобразить список сотрудников в таблице.

В итоге должно получится следующее:

Controller

Начнем с создания контроллера. Для этого правой кнопкой мыши щелкаем на Controllers в проекте и выбираем Add -> Controller
В появившемся диалоге вводим имя контроллера EmployeeController и убираем галочку «Add action methods for Create, Update, Delete and Details scenarios»

В результате получаем класс EmployeeController наследник Controller с одним единственным методом Index.
Добавим в каталог Models проекта класс Employee

public class Employee
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
    }

Возвращаемся в контроллер и добавляем следующий код:

public JsonResult EmployeeData()
        {
            var list = new List<Employee>
                           {
                               new Employee {Id = 1, FirstName = "Александр", LastName = "Македонский", Email = "alex.mak@test.com"},
                               new Employee {Id = 2, FirstName = "Иван", LastName = "Петров", Email = "ivan@test.com"},
                               new Employee {Id = 3, FirstName = "Сергей", LastName = "Сидоров", Email = "sarg@test.com"},
                           };

            var result = new  JsonResult()
                             {
                                 Data = new { page = 0, total = 1, records = list.Count, rows = list }
                             };
            
            return result;           
        }

Он будет возвращать данные для таблицы в виде Json структуры.
Далее нужно открыть Site.Master и добавить в меню пункт Сотрудники, для нужно после строк

<div id="menucontainer">
                <ul id="menu">

добавить:

<li><%: Html.ActionLink("Сотрудники", "Index", "Employee")%></li>

View

Теперь для метода Index контроллера EmployeeConroller создадим View в которой и будет отображаться таблица с данными. Правой клавишей мыши на название метода Index и выбираем пункт «Add View».

В появившемся диалоге ничего не меняем, нажимаем кнопку Add, после чего получаем файл Index.aspx. Далее в блок

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

добавляем следующий код

   <table id="EmployeeTable">
    </table>
    <div id="EmployeeTablePager">
    </div>

Эти элементы будут использоваться плагином для создания jqGrid таблицы и навигатора по страницам. Если указать div вместо table то получим ошибку «a.rows is undefined» при получении данных.
Далее вставляем скрипт, содержащий настройки таблицы и колонок.

    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('#EmployeeTable').jqGrid({
                url: '/Employee/EmployeeData',
                datatype: "json",
                mtype: 'POST',
                jsonReader: {
                    page: "page",
                    total: "total",
                    records: "records",
                    root: "rows",
                    repeatitems: false,
                    id: ""
                },
                colNames: ['Id', 'Имя', 'Фамилия', 'Email'],
                colModel: [
                { name: 'Id',  width: 55 },
                { name: 'FirstName',  width: 155 },
                { name: 'LastName', width: 150 },
                { name: 'Email',  width: 150 }
                ],
                pager: '#EmployeeTablePager',
                width: 600,
                viewrecords: true
            });
        });
        
    </script>

Небольшой комментарий к этому скрипту не помешает, но чтение документации это не отменяет.

jQuery('#EmployeeTable')

— используя jQuery выбираем по ID контейнер в котором будет создана jqGrid таблица. Таблица должна иметь уникальный ID в пределах документа.

url: '/Employee/EmployeeData'

— указываем источник получения данных, в нашем случае это метод EmployeeData контроллера EmployeeController.

datatype: "json"

— тип данных получаемых с сервера, так же доступны форматы: xml, local, javascript, function подробнее об этом можно прочитать в разделе Retrieving Data.

mtype: 'POST'

, — тип запроса отправляемого серверу, если явно не указывать то по умолчанию будет отправлен GET запрос, что приведет к ошибке:
«This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.»
Это можно обойти если в методе EmployeeData добавить

result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

, но это небезопасно. Phil Haack написал хорошую статью об этом JSON Hijacking.
colNames — массив с заголовками колонок таблицы
colModel — модель колонок, детально параметры описаны в разделе ColModel API

В общем то для простой демонстрации этого достаточно. Запускаем проект.

В следующей статье опишу как создавать, удалять и редактировать записи в таблице.
Исходники проекта можно скачать тут

  • Pingback: Tweets that mention ASP.NET MVC 2 и jqGrid « с .NET по жизни -- Topsy.com()

  • Maxim

    P.S. кстати на каком движке работает блог?

  • Maxim

    Здравствуйте! Спасибо за отличный пост, но все-таки есть вопрос по поводу типа данных, получаемых с сервера. У меня почему-то данные в гриде появляются только если mtype=’GET’ и в контроллере обязательно указано JsonRequestBehavior.AllowGet. Подскажите плз в чем может быть причина?
    P.S. в firefox-е коммент не сохранился почему-то :(

  • Аноним

    На WordPress