JqGrid в ASP.NET MVC

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Для создания простых таблиц, которые просто выводят данные, на стороне клиента достаточно использовать стандартный элемент html <table>. Однако создание более сложных по функционалу таблиц данного элемента уже недостаточно, и приходится прибегать к более комплексным решениям.

В ASP.NET MVC, как и для других серверных технологий, имеется множество решений гридов, которые реализуют сложные таблицы. И одним из таких решений является грид JQGrid.

Итак, используем JQGrid в проекте ASP.NET MVC. Для этого создадим новый проект ASP.NET MVC 5. Я назвал свой проект JQGridApp. И сразу добавим в него все необходимые библиотеки. Все нужные файлы можно найти на сайте непосредственного разработчика: http://www.trirand.com/blog/?page_id=6. Либо можно выполнить установку через NuGet:

JqGrid в ASP.NET MVC

Как видно на скриншоте, пакет JqGrid имеет зависимость от библиотек jQuery и jQuery-UI, поэтому при установке пакета эти библиотеки в случае отсутствия также будут установлены.

JqGrid

Теперь в папку Models добавим модель, объекты которой будут выводиться в грид. Это будет модель Book:

public class Book
{
    public int Id { get;set;}
    public string Name { get; set; }
    public string Author { get; set; }
    public int Year { get; set; }
    public int Price { get; set; }
}

И изменим стандартный контроллер HomeController следующим образом:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JQGridApp.Models;
using Newtonsoft.Json;

namespace JQGridApp.Controllers
{
    public class HomeController : Controller
    {
        static List<Book> books = new List<Book>();
        static HomeController()
        {
            books.Add(new Book { Id = 1, Name = "Война и мир", Author = "Л. Толстой", Year = 1863, Price = 220 });
            books.Add(new Book { Id = 2, Name = "Отцы и дети", Author = "И. Тургенев", Year = 1862, Price = 195 });
            books.Add(new Book { Id = 3, Name = "Чайка", Author = "А. Чехов", Year = 1895, Price = 158 });
            books.Add(new Book { Id = 4, Name = "Подросток", Author = "Ф. Достоевский", Year = 1875, Price = 210 });
        }

        public ActionResult Index()
        {
            return View();
        }

        public string GetData()
        {
            return JsonConvert.SerializeObject(books);
        }
    }
}

Для упрощения примера база данных не используется, а список объектов создается напрямую в контроллере. В методе GetData этот список сериализуется в формат json.

Теперь изменим представление Index.chtml:

@{
    Layout = null;
}

<html>
<head>
    <title>jqGrid</title>
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<h2>jQGrid</h2>
<table id="jqg"></table>
<script type="text/javascript">
$(document).ready(function () {
    $("#jqg").jqGrid({
        url: '@Url.Action("GetData")',
        datatype: "json",
        colNames: ['Id', 'Название', 'Автор', 'Год', 'Цена'],
        colModel: [
        { name: 'Id', index: 'Id', width: 30, stype: 'text' },
        { name: 'Name', index: 'Name', width: 150, sortable: true},
        { name: 'Author', index: 'Author', width: 150, sortable: true },
        { name: 'Year', index: 'Year', width: 100, sortable:false },
        { name: 'Price', index: 'Price', width: 80, align: "right", sortable: true }
        ],
        rowNum: 5, // число отображаемых строк
        loadonce:true, // загрузка только один раз
        sortname: 'Id', // сортировка по умолчанию по столбцу Id
        sortorder: "desc", // порядок сортировки
        caption: "Список Книг"
    });
});
</script> 
</body>
</html>

Разберем код. Сначала идет подключение ранее установленных скриптов и файлов css. Далее в функции jQuery создается грид на базе элемента <table id="jqg"></table>. При загрузке страницы грид будет загружать данные, обращаясь к методу GetData и получая от него данные в формате json.

Параметр colNames устанавливает заголовки столбцов, а параметр colModel модель столбцов. Каждый столбец определяется в таком виде { name: 'Id', index: 'Id', width: 30}, где опции name и index соответствуют названиям свойств модели, к которым будут привязаны данные столбцы. И также можно определить дополнительные опции, как width - ширину, sortable - включает сортировку по столбцу, align - выравнивание текста и ряд других. Полный набор параметров, как для грида в целом, так и для отдельных столбцов, можно найти в документации.

В итоге все выглядит примерно так:

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850