ASP .NET - Filtrando com WebGrid e SQL Server Compact Edition 4.0.

Eu já apresentei o Helper WebGrid e a sintaxe Razor em outros artigos e a seguir você tem os links destes artigos, e, eu sugiro que você leia os artigos antes de continuar se você não tem noções de Razor, HTML Helpers e ASP .NET MVC.

  1. ASP .NET - Apresentando o ASP .NET MVC 3 - Macoratti.net
  2. ASP .NET - Apresentando a sintaxe Razor - Macoratti.net
  3. ASP .NET MVC -  Usando os recursos da Microsoft Web Helpers

Neste artigo eu vou mostrar como podemos usar o WebGrid para exibição de resultados usando filtros com o banco de dados SQL Server Compact Edition 4.0.

No exemplo deste artigo eu vou usar o banco de dados Northwind.sdf que é instalado por padrão quando da instalação do Visual Studio e o Visual Studio Express 2012 for Web que uma versão gratuita para desenvolver problemas usando ASP .NET.

Abra então o o Visual Studio Express 2012 for Web e clique no menu New Web Site;

Selecione o template Visual C# -> ASP .NET Web Site(Razor v1) e informe o nome FiltroWebGrid e clique no botão OK;

Será criado um novo web site com a seguinte estrutura:

Vamos ajustar o web site excluindo a pasta Account alguns arquivos e criar a pasta scripts de forma ter a seguinte estrutura:

Na pasta App_Data vamos incluir o arquivo Northwind.sdf e vamos definir o código das demais páginas.

Na pasta styles vamos definir o arquivo site.css com o seguinte conteúdo:

body, input, textarea, select {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
    color: #669;
    line-height: 1.6em;
}
a{
    color: #6078BF;
}

.table
{
	background: #fff;
	border-collapse: collapse;
	text-align: left;
}
.table th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}

.table td
{
	border-bottom: 1px solid #ccc;
	padding: 6px 8px;
}

.alternate{
    background: #e6f4ff;
}

.selected{
    background: #ffff99;
}

.highlight{
    background: #ffff99;
}

.clickable{
    cursor: pointer;
    background: #ffff99;
}

#grid{
    margin: 45px;
}

Agora vejamos o código do arquivo de leiaute:

1- Pagina _layout.cshtml

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title</title>
        <script src="@Href("~/scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
        <link href="@Href("~/styles/site.css")" rel="stylesheet" />
        @RenderSection("script", required: false)
    </head>
    <body>
        @RenderBody()
    </body>
</html>

Nesta página definimos o leiaute do site definindo a referência ao arquivo jquery e ao arquivo de estilo site.css na pasta styles.

Temos também a definição de uma RenderSection chamada script que iremos criar na página Default.cshtml.

Você pode identificar múltiplas seções de conteúdo dentro de uma página de layout; isto é útil se você deseja criar layouts que têm mais de uma área de conteúdo substituível. Esta técnica envolve identificar seções dentro de sua página de layout usando o método RenderSection() para fornecer seções de conteúdo com um nome correspondente em suas páginas de conteúdo.

Cada seção identificada dentro da página de conteúdo está contida dentro de um bloco @section.

Para saber mais sobre RenderSection leia o meu artigo: ASP .NET - Sintaxe Razor e Layout com WebMatrix - II

2- Pagina _PageStart.cshtml

@{
    Layout = "~/_layout.cshtml";
}

Esta página faz a chamada a página _layout.cshtml

3- Página Default.chstml

@{
    Page.Title = "Filtrando com WebGrid";
    var db = Database.Open("Northwind");
    var consulta = "SELECT DISTINCT Country FROM Customers ORDER BY Country";
    var paises = db.Query(consulta);
    consulta = "SELECT * FROM Customers  WHERE CompanyName LIKE @0 AND Country LIKE @1";
    var empresa = "%" + Request["company"] + "%";
    var pais = "%" + Request["country"] + "%";
    var dados = db.Query(consulta, empresa, pais);
    var columns = new[]{"Cliente", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"};
    var grid = new WebGrid(dados, columnNames: columns, rowsPerPage: 6);
}
<h1>Filtrando com WebGrid</h1>
<form method="post">
    <div id="grid">
        Nome da Empresa: <input type="text" name="company" value="@Request["company"]" />
        Nome do País: <select name="country">
                 <option></option>   
            @foreach(var item in paises){
                <option @(Request["country"] == item.Country ? " selected=\"selected\"" : "")>@item.Country</option>
            }
        </select>
        <input type="submit" />
        @grid.GetHtml(    
            tableStyle : "table",
            alternatingRowStyle : "alternate",
            headerStyle : "header",
            columns: grid.Columns(
                grid.Column("CustomerID", "ID"),
                grid.Column("CompanyName", "Empresa"),
                grid.Column("ContactName", "Contato"),
                grid.Column("Address","Endereço"),
                grid.Column("City", "Cidade"),
                grid.Column("Country", "Pais"),
                grid.Column("Phone", "Telefone")
            )
        )
    
    </div>
</form>
@section script{
<script type="text/javascript">
   $(function(){
        $('th a, tfoot a').live('click', function() {
            $('form').attr('action', $(this).attr('href')).submit();
            return false;
        });
    });
</script>
}

Por padrão, o grid é preenchido por todas as empresas cadastradas no banco de dados. Há um par de parâmetros na cláusula WHERE, mas o valor dos parâmetros na primeira requisição é %% o que equivale a um curinga.

A caixa de texto permite que o usuário procure por entradas com base em parte de um nome de empresa, enquanto a lista de seleção permite que o usuário filtre os resultados por país na grid.

O formulário é enviado para o servidor, e é aí que reside a raiz do problema. Você pode ver que os links para classificação e paginação que vinculam os recursos são parte do grid que quando forem clicados resultam em solicitações GET que estão sendo feitas.

A resposta para o problema está no trecho do jQuery que aparece na seção script. Um manipulador está anexado ao evento onclick dos links no topo e rodapé da tabela - os links classificação e paginação.

Quando eles forem clicados, o valor do link é obtido e fornecido para o atributo action do formulário; então o formulário é submetido usando POST, e o pedido GET é cancelado fazendo return igual a false.

Isso garante que as informações de paginação e classificação sejam preservados na coleção Request.QueryString, enquanto os valores de campo de formulário são passados na coleção Request.Form.

Abaixo vemos o resultado da execução do web site (F5) usando os recursos de classificação, paginação e filtragem:

Um recurso poderoso e simples de implementar.

Pegue o projeto completo aqui:  FiltroWebGrid.zip

Disse Jesus :  Enquanto estou no mundo, sou a luz do mundo. ( Joã 9:5 )

Referências:

José Carlos Macoratti