Exemplo usando JqGrid e MVC 3

Pré-Requisitos:

Visual Studio 2010;

MVC 3 (Esse aplicativo pode ser baixado no http://www.asp.net/mvc )

JqGrid (http://www.trirand.com/blog/?page_id=6)

Banco de Dados NorthWind (http://www.microsoft.com/download/en/details.aspx?id=23654) Após instalação o banco será disponibilizado no caminho: C:\SQL Server 2000 Sample Databases\NORTHWND.MDF

Configurações Relevantes:

Na pasta Scripts adicionar a pasta “i18n” que está disponível no pacote JqGrid;

Na Raiz da pasta scripts adicionar os arquivos .js que também estão disponíveis no pacote JqGrid:

jqDnR.js

jqModal.js

jquery.fmatter.js

jquery.jqGrid.min.js

jquery.tablednd.js

Adicionar os arquivos css jquery-ui-1.7.1.custom.css e ui.jqgrid.css na pasta Content;

No visual Studio clicar em File >> New >> Project >> Visual C# >> ASP.Net MVC3 Web Application

No Site Map (Views >> Shared >> Site.Master)

Adicionar os sources css e javascritps que serão utilizados no projeto.

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html>

<html>

type="text/css" />

</head>

<body>

<h1>My MVC Application</h1>

</div>

<% Html.RenderPartial("LogOnUserControl"); %>

</div>

</ul>

</div>

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

</div>

</body>

</html>

Ainda no Site.Master logo após a linha

Iremos criar uma tab adicionando a seguinte linha:

Com isso teremos uma TAB chamada JQGrid que apontará para a action JQGrid que será construída no controller.

Aqui finalizamos o trabalho no Site.Master.

· Views

Na pasta Views >> Home clicar com o botão direito e clicar em ADD VIEW adicionar o nome JQGrid.aspx para sua view.

Essa View deverá ter o seguinte código:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

JQGrid

</asp:Content>

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

<h2>JQGrid</h2>

<% Html.BeginForm();

{ %>

$(document).ready(function () {

$("#grid").jqGrid({

url: '/Home/GridData/',

datatype: 'json',

mtype: 'GET',

colNames: ['ProductID', 'ProductName', 'SupplierID', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock', 'UnitsOnOrder', 'ReorderLevel', 'Discontinued'],

colModel: [

{ name: 'ProductID', index: 'ProductID', width: 70, align: 'left' },

{ name: 'ProductName', index: 'ProductName', width: 150, align: 'left' },

{ name: 'SupplierID', index: 'SupplierID', width: 100, align: 'left' },

{ name: 'CategoryID', index: 'CategoryID', width: 100, align: 'left' },

{ name: 'QuantityPerUnit', index: 'QuantityPerUnit', width: 100, align: 'left' },

{ name: 'UnitPrice', index: 'UnitPrice', width: 100, align: 'left' },

{ name: 'UnitsInStock', index: 'UnitsInStock', width: 100, align: 'left' },

{ name: 'UnitsOnOrder', index: 'UnitsOnOrder', width: 100, align: 'left' },

{ name: 'ReorderLevel', index: 'ReorderLevel', width: 100, align: 'left' },

{ name: 'Discontinued', index: 'Discontinued', width: 100, align: 'left' }

pager: $('#pager'),

rowNum: 10,

rowList: [5, 10, 20, 50],

sortname: 'Id',

sortorder: "desc",

viewrecords: true,

imgpath: '../../images',

caption: 'My first grid'

});

</script>

<% } %>

</asp:Content>

Que basicamente faz uma chamada Ajax e aguarda como retorno as colunas definidas começando por 'ProductID' e finalizando em 'Discontinued';

· Banco de Dados:

Abrir o Server Explorer >> Botão Direito em Data Connections >> Add Connection >> Data Source: Microsoft SQL Server Database File (SqlClient) >> Clicar em Browser e localizar o arquivo.

· Model

Clicar com o botão direito na pasta Model >> New Item >> LINQ to SQL Classes

Localizar a tabela Products e arrastar.

· Controller

Na pasta Controller abrir o arquivo HomeController e adicionar o seguinte trecho de código:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using JQDemo.Models;

namespace JQDemo.Controllers

{

public class HomeController : Controller

{

NorthWindDataContextDataContext db = new NorthWindDataContextDataContext();

public ActionResult Index()

{

ViewBag.Message = "Welcome to ASP.NET MVC!";

return View();

}

public ActionResult About()

{

return View();

}

public ActionResult JQGrid()

{

return View();

}

public ActionResult GridData(string sidx, string sord, int page, int rows)

{

int pageIndex = Convert.ToInt32(page) - 1;

int pageSize = rows;

int totalRecords = db.Products.Count();

int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

var products = (from produto in db.Products

.Skip(pageIndex * pageSize)

.Take(pageSize)

select produto).OrderBy(d => d.ProductID);

var jsonData = new

{

total = totalPages, // we'll implement later

page = page,

records = totalRecords, // implement later

rows = (

from produto in products

select new

{

id = produto.ProductID,

cell = new string[] {

produto.ProductID.ToString(),

produto.ProductName.ToString(),

produto.SupplierID.ToString(),

produto.CategoryID.ToString(),

produto.QuantityPerUnit.ToString(),

produto.UnitPrice.ToString(),

produto.UnitsInStock.ToString(),

produto.UnitsOnOrder.ToString(),

produto.ReorderLevel.ToString(),

produto.Discontinued.ToString()

}

}).ToArray()

};

return Json(jsonData, JsonRequestBehavior.AllowGet);

}

Resultado:

Desenvolvimento - ASP. NET

Exemplo usando JqGrid e MVC 3
Nesse exemplo mostrarei um passo a passo para construir uma página em MVC 3 com um JqGrid (Plugin do Jquery).
por Gustavo Neves

Leia também

Desenvolvimento - ASP. NET

Exemplo usando JqGrid e MVC 3Nesse exemplo mostrarei um passo a passo para construir uma página em MVC 3 com um JqGrid (Plugin do Jquery). por Gustavo Neves

Leia também

Exemplo usando JqGrid e MVC 3
Nesse exemplo mostrarei um passo a passo para construir uma página em MVC 3 com um JqGrid (Plugin do Jquery).
por Gustavo Neves