Nesse exemplo vou mostra como criar uma Grid utilizando JQuery Grid Plugin.Esse plugin é super completo você pode utilizá-lo para exibir e editar dados, nesse exemplo que formatei vou somente exibir dados .
Você pode baixar o JQuery Grid Plugin no endereço http://www.secondpersonplural.ca/jqgriddocs/_2eb0enwgd.htm, no mesmo endereço você encontra todos os detalhes referente aos arquivos JavaScript , e a documentação do plugin pode ser acessada no endereço http://www.secondpersonplural.ca/jqgriddocs/index.htm.
Configurando JQuery Grid Plugin
Para organizar os arquivos JavaScript eu adicionei as pastas js e themes dentro do diretório Scripts e alterei os nomes para jqGridScript e jqGridThemes.
Note que o arquivo jquery.jqGrid.js ficou na raiz da pasta Scripts, ele é o responsável por carregar todos os arquivos necessários para o funcionamento da Grid.A imagem abaixo mostra como ficou a estrutura do diretório Scripts.
1.Organização do diretório Scripts.
JQueryGridHelper
Para encapsular as configurações do plugin criei algumas classes dentro do diretório JQueryGridHelper.
ColumnModel - Essa classe representa uma coluna na Grid e possui quatro propriedades Nome, Index,Width,Aling.Todas as propriedades são auto explicativas com exceção da propriedade Index , ela guarda o valor que será enviado para o servidor quando usuário ordena a Grid por uma coluna.
public class ColumnModel
{
[System.Web.Script.Serialization.ScriptIgnore()]
public string Nome { get { return nome; } set { nome = value; } }
public string nome;
[System.Web.Script.Serialization.ScriptIgnore()]
public string Index { get { return index; } set { index = value; } }
public string index;
[System.Web.Script.Serialization.ScriptIgnore()]
public int Width { get { return width; } set { width = value; } }
public int width;
[System.Web.Script.Serialization.ScriptIgnore()]
public string Align { get { return align; } set { align = value; } }
public string align;
}
JQueryGrid – Essa classe é responsável pela criação da Grid .
public class JQueryGrid
{
public JQueryGrid()
{
this.serializer = new JavaScriptSerializer();
this.jquery = new StringBuilder();
this.RowNumber = 10;
this.RowList = new List<int> {
5,10,20,40
};
this.ColumnSortName = String.Empty;
this.HeightGrid = 198;
}
private StringBuilder jquery;
private JavaScriptSerializer serializer;
public IEnumerable<columnmodel> ColumnsModel { get; set; }
public List<string> ColumnsName { get; set; }
public List<int> RowList { get; set; }
public string Caption { get; set; }
public string Url { get; set; }
public string ColumnSortName { get; set; }
public string ThemesPath { get; set; }
public int RowNumber { get; set; }
public int HeightGrid { get; set; }
public string RenderJQueryGrid()
{
TagBuilder builderJS = new TagBuilder("script");
builderJS.MergeAttribute("type", "text/javascript");
builderJS.InnerHtml = this.JQueryBuilder();
jquery.Append(CreateHtmlResourcesJQueryGrid());
jquery.Append(builderJS.ToString());
return jquery.ToString();
}
private string CreateHtmlResourcesJQueryGrid()
{
StringBuilder html = new StringBuilder();
TagBuilder builderTable = new TagBuilder("table");
builderTable.MergeAttribute("id", "list");
builderTable.MergeAttribute("cellpadding", "0");
builderTable.MergeAttribute("cellspacing", "0");
builderTable.AddCssClass("scroll");
TagBuilder builderDivPager = new TagBuilder("div");
builderDivPager.MergeAttribute("id", "pager");
builderDivPager.MergeAttribute("style", "text-align:center;");
builderDivPager.AddCssClass("scroll");
TagBuilder builderCss = new TagBuilder("link");
builderCss.MergeAttribute("rel", "stylesheet");
builderCss.MergeAttribute("type", "text/css");
builderCss.MergeAttribute("href", String.Format("{0}/grid.css", this.ThemesPath));
builderCss.MergeAttribute("title", this.ThemesPath.Substring(this.ThemesPath.LastIndexOf('/') + 1));
builderCss.MergeAttribute("media", "screen");
html.Append(builderCss.ToString(TagRenderMode.SelfClosing));
html.Append(builderTable.ToString(TagRenderMode.Normal));
html.Append(builderDivPager.ToString(TagRenderMode.Normal));
return html.ToString();
}
private string JQueryBuilder()
{
StringBuilder jQueryBuilder = new StringBuilder();
jQueryBuilder.Append("jQuery(document).ready(function() {jQuery('#list').jqGrid({prmNames: {sort: \"columnOrder\"},");
jQueryBuilder.AppendFormat(@"
url: '{0}',
datatype: 'json',
mtype: 'GET',
colNames: {1},
colModel: {2},
pager: jQuery('#pager'),
rowNum: {3},
rowList: {4},
sortname: '{5}',
viewrecords: true,
imgpath: '{6}/images',
caption:'{7}',
height: {8}",
this.Url,//{0}
this.GetJsonColumnsName(),//{1}
this.GetJsonColumnsModel(),//{2}
this.RowNumber,//{3}
this.GetJsonRowList(),//{4}
this.ColumnSortName,//{5}
this.ThemesPath,//{6}
this.Caption,//{7}
this.HeightGrid);//{8}
jQueryBuilder.Append("});});");
return jQueryBuilder.ToString();
}
private string GetParamName()
{
return serializer.Serialize(new { sort = "columnOrder" });
}
private string GetJsonColumnsName()
{
return serializer.Serialize(this.ColumnsName);
}
private string GetJsonColumnsModel()
{
return serializer.Serialize(this.ColumnsModel);
}
private string GetJsonRowList()
{
return serializer.Serialize(this.RowList);
}
}
O método RenderJQueryGrid retorna uma string com todo código necessário para criação da Grid. Os outros métodos privados são métodos auxiliares.
Propriedades
ColumnsModel - Coleção do tipo ColumnModel com todas as colunas da Grid.
ColumnsName - Coleção do tipo string com os nomes de cada coluna da Grid que será exibida para o usuário.
RowList - Coleção de inteiros com os dados de configuração da Grid que definir a quantidade de registro que uma pagina pode exibir.
Caption - Título da Grid que será exibido para o usuário.
Url - Url que a Grid deve utilizar para as chamadas AJAX.
ColumnSortName - Nome da coluna que será utilizada para ordenar a Grid.
ThemesPath - Caminho da pasta que com o Themes da Grid.
RowNumber - Quantidade de registro que será exibida na Grid, esse valor deve estar dentro de uma das opções da coleção de inteiros armazenados na propriedade RowList.
HeightGrid - Altura da Grid.
IJQueryGrid - Essa interface defini o método que será chamado via AJAX pela Grid,para busca dos dados.
public interface IJQueryGrid
{
ActionResult JQueryGridData(string columnOrder, string sord, int page, int rows);
}
PaginatedList - Possui a lógica de paginação de dados. Essa classe utilização Dynamic Linq, o arquivo Dynamic.cs possui a implementação de Dynamic Linq que a Microsoft disponibiliza no endereço http://msdn.microsoft.com/en-us/vcsharp/bb894665.aspx.
public class PaginatedList<t> : List<t>
{
public int PageIndex { get; private set; }
public int PageSize { get; private set; }
public int TotalCount { get; private set; }
public int TotalPages { get; private set; }
public PaginatedList(IEnumerable<t> source, int pageIndex, int pageSize)
{
PageIndex = pageIndex;
PageSize = pageSize;
TotalCount = source.Count();
TotalPages = (int)Math.Ceiling(TotalCount / (double)PageSize);
this.AddRange(source.Skip((PageIndex - 1) * PageSize).Take(PageSize));
}
public PaginatedList(IEnumerable<t> source, int pageIndex, int pageSize, string orderBy, string columnOrder)
{
PageIndex = pageIndex;
PageSize = pageSize;
TotalCount = source.Count();
TotalPages = (int)Math.Ceiling(TotalCount / (double)PageSize);
IEnumerable<t> listPage = source.Skip((PageIndex - 1) * PageSize).Take(PageSize);
if (String.IsNullOrEmpty(columnOrder))
this.AddRange(listPage);
else
this.AddRange(listPage.AsQueryable().OrderBy(String.Format("{0} {1}", columnOrder, orderBy)).AsEnumerable());
}
public bool HasPreviousPage
{
get
{
return (PageIndex > 0);
}
}
public bool HasNextPage
{
get
{
return (PageIndex + 1 < TotalPages);
}
}
}
Propriedades
PageIndex - Número da página atual.
PageSize - Quantidade de registros por página.
TotalCount - Total de registros.
TotalPages - Total de páginas.
Utilizando o JQueryGridHelper
O primeiro passo é criar uma PartialView tipada com o seguinte nome JQueryGridUserControl.ascx , quem renderizar a PartialView devera passar uma instância da classe JQueryGrid. Veja o código abaixo.
2.PartialView JQueryGridUserControl.ascx.
Os arquivos do JQuery e JQuery Grid Plugin são carregados junto com a PartialView , você poderia colocar em outro lugar, nessa aplicação de exemplo só preciso deles nesse momento por isso coloquei os arquivos na PartialView.
Nesse exemplo vou renderizar a PartialView "JQueryGridUserControl" na view Index do Controller Home para isso vou implementar a interface IJQueryGrid, no Controller Home , e dentro da Action Index vou criar uma instância do JQueryGrid que será passada para View.
public class HomeController : Controller, IJQueryGrid
{
public ActionResult Index()
{
JQueryGrid jQueryGrid = new JQueryGrid
{
Caption = "Filmes",
ThemesPath = "/scripts/jqGridThemes/basic",
Url = "/Home/JQueryGridData/",
ColumnsModel = GetColumnModel() ,
ColumnsName = GetColumnName(),
};
return View(jQueryGrid);
}
public List<string> GetColumnName() {
List<string> list = new List<string>();
list.Add("Id Filme");
list.Add("Titulo");
list.Add("Diretor");
return list;
}
public IEnumerable<ColumnModel> GetColumnModel()
{
yield return new ColumnModel() { Align = "left", Index = "FilmeId", Nome = "FilmeId", Width = 80 };
yield return new ColumnModel() { Align = "left", Index = "Titulo", Nome = "Titulo", Width = 200 };
yield return new ColumnModel() { Align = "left", Index = "Diretor", Nome = "Diretor", Width = 200 };
}
public ActionResult JQueryGridData(string sidx, string sord, int page, int rows)
{
var context = new FilmesEntities();
var filmesPaginated = new PaginatedList<Filme>(context.Filme, page, rows, sord, sidx);
var jsonData = new
{
//Total de paginas
total = filmesPaginated.TotalPages,
//Número da pagina atual
page = page,
//Total de registro
records = filmesPaginated.TotalCount,
//Linhas que serão exibidas
rows = (from f in filmesPaginated
select new
{
cell = new string[] { f.FilmeId.ToString(), f.Titulo, f.Diretor }
}).ToArray()
};
return Json(jsonData);
}
public ActionResult About()
{
return View();
}
}
Veja na imagem abaixo os ajustes necessários para view Index do Controller Home.
3.Ajustes View Index Controller Home.
O resultado final pode ser visto na imagem abaixo.
4.Resultado Final.
Conclusão
Todo Helper é bem vindo! Esse foi o objetivo desse exemplo criar algo que possa facilitar a vida e possa ser reutilizado. O código fonte do exemplo pode ser baixado nesse link. Você pode customizar e estender o código fonte para atender as suas necessidades.
Referências
http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx
http://www.secondpersonplural.ca/jqgriddocs/_2eb0enwgd.htm
http://www.trirand.com/blog/
http://trirand.com/jqgrid/jqgrid.html
http://www.secondpersonplural.ca/jqgriddocs/index.htm
http://msdn.microsoft.com/en-us/vcsharp/bb894665.aspx
Daniel Fonseca Castro