ASP .NET 4.0 - Apresentando o QueryExtender

O controle QueryExtender é uma novidade da nova versão da plataforma .NET, a 4.0; ele é usado para criar filtros e parâmetros de pesquisas para dados recuperados de uma fonte de dados através dos componentes EntityDataSource ou LinqDataSource em conjunto com o ADO .NET Entity Framework 4.1.

O controle QueryExtender utiliza a propriedade TargetControlID para se vincular ao controle alvo e se relaciona com uma fonte de dados que utiliza internamente a LINQ.(Language Integrated Query)

Ele apresenta os seguintes benefícios:

Você pode usar o QueryExtender  nos controles de marcação da página Web para filtrar dados usando apenas a sintaxe declarativa.

Neste artigo eu vou mostrar como podemos usar o QueryExtender para filtrar dados selecionando valores a partir da tabela Products do banco de dados Northwind.mdf.

Objetivos

Recursos usados

Criando o web site ASP .NET

Abra o Visual Web Developer 2010 Express Edition e no menu File clique em New Web Site;

A seguir selecione o template ASP .NET Web Site e informe o nome QueryExtender1 e clique em OK;

Obs: Eu estou criando um projeto do tipo web site pois o exemplo é bem simples veja nas referência o meu artigo mostrando as diferenças entre web site e web project;

Será criado o web site com a estrutura abaixo exibida na janela Solution Explorer:

Definindo um modelo de dados com o Entity Data Model

Vamos criar um modelo de dados usando o banco de dados Northwind.mdf e o Entity Data Model;

No menu WebSite -> Add New Item selecione o template ADO .NET Entity Data Model e informe o nome Produtos.edmx e clique em Add;

Na próxima janela do assistente confirma a criação do arquivo na pasta App_Code e clique em Sim;

A seguir selecione a opção : Generate from database e clique em Next>;

Na janela do assistente para escolher a conexão selecione o banco de dados Northwind e aceite a opção para salvar a string de conexão no arquivo Web.Config e clique em Next>;

A seguir selecione a tabela Products e marque as demais opções conforme a figura abaixo e clique em Finish;

Você verá na pasta App_Code o arquivo Produtos.edmx e a entidade Product mapeada a partir da tabela Products;

Usando o controle EntityDataSource

Vamos agora incluir um controle Data Source na página web e configurá-lo para trabalhar com os dados. Como o controle QueryExtender suporta o EntityDataSource (e o LinqDataSource) vamos usá-lo:

Selecione a página Default.aspx e  partir da ToolBox , guia Data, arraste e solte o controle EntityDataSource na página;

A seguir clique no link Configure Data Source e na janela Configure Data Source selecione NorthwindEntities conforme a figura abaixo e clique em Next>;

Na próxima janela selecione o EntitySetName - Products e em Entity TypeFilter selecione None e marque Selecl All e clique em Finish;

Ao final altere o modo de visão para Source e veja as declaração gerada no código de marcação para o EntityDataSource;

Inclua na página web , a partir da ToolBox, um controle GridView e em Choose Data Source selecione EntityDataSource1;

Pronto já temos o controle EntityDataSource vinculado ao GridView para exibir os dados da tabela Products;

Pesquisando e Filtrando  dados com QueryExtender

Vamos agora usar o controle QueryExtender para realizar filtros usando a sintaxe declarativa.

Vamos incluir a capacidade de realizar pesquisas na página web usando o controle QueryExtender e definir suas opções de filtro baseado na entrada do usuário. Com o controle podemos usar uma sintaxe declarativa e vamos usar as seguintes opções de filtro:

O resultado obtido será exibido no controle GridView.

Alterne para o modo Source da página Default.apx e logo abaixo do término da declaração do EntityDataSource, inclua a partir da ToolBox o controle QueryExtender conforme mostra a figura abaixo;

Tivemos que definir a propriedade TargetControlID="EntityDataSource1";

Vamos incluir um controle Button logo abaixo do título com o texto : Procurar.

1- Definindo um critério de pesquisa com filtro usando SearchExpression

A seguir vamos incluir um objeto SearchExpression e configurá-lo para realizar uma consulta com o critério "começar com" (starts with) usando um valor informado em um controle TextBox pelo usuário;

Vamos então incluir, a partir da ToolBox, um controle TextBox, acima do GridView e definir o seu ID como SearchTextBox;

Vamos agora incluir a definição para SearchExpression entre as tags do QueryExtender no arquivo Default.aspx conforme abaixo:

  <asp:QueryExtender ID="QueryExtender1"  TargetControlID="EntityDataSource1" runat="server">
       <asp:SearchExpression SearchType="StartsWith" DataFields="ProductName">
           <asp:ControlParameter ControlID="SearchTextBox" />
       </asp:SearchExpression>
    </asp:QueryExtender>

A pesquisa irá se basear no critério 'começar com' a partir do valor informado na controle TextBox para o campo ProductName da tabela Products;

Executando o projeto e digitando Ch na caixa de texto e clicando no botão Procurar (ou teclando Enter) iremos obter:

Vemos que pelo critério somente os produtos com nome iniciados com Ch são exibidos.

2- Definindo um critério de pesquisa em um intervalo de valores com RangeExpression

Vamos incluir dois controles TextBox logo abaixo do controle TextBox anterior conforme o leiaute abaixo:

Defina a propriedade ID dos controles assim : TextBoxDE TextBoxATE;

A seguir vamos definir a expressão de busca incluindo a declaração RangeExpression entre as tags do QueryExtender:

<asp:RangeExpression DataField="UnitsInStock" MinType="Inclusive" MaxType="Inclusive">
</asp:RangeExpression>
 

Definimos o campo UnitSInStock como sendo o campo usado como valor para o critério e definimos que o valor mínimo e o máximo serão considerados;

A seguir temos que definir os controles TextBox usados para informar os valores incluindo entre as tags do RangeExpession o seguinte código:

<asp:RangeExpression DataField="UnitsInStock" MinType="Inclusive"MaxType="Inclusive">
    <asp:ControlParameter ControlID="TextBoxDE" />|
     <asp:ControlParameter ControlID="TextBoxATE" />
</asp:RangeExpression>

Vamos executar o projeto e exibir os produtos com unidades em estoque entre 15 e 19. Informe 15 e 19 e clique no botão Procurar;

Podemos combinar os dois filtros definidos bastando informar os valores nos TextBox para definir os dois critérios.  A consulta irá incluir a cláusula AND para os filtros.

3- Definindo uma consulta personalizada para filtrar dados

Vamos agora filtrar os dados usando  uma consulta LINQ  personalizada. Para alcançar este objetivo iremos efetuar as seguintes operações:

  1. Criar uma consulta LINQ personalizada;
  2. Incluir um controle DataSource e um controle QueryExtender na página;
  3. Incluir uma expressão personalizada no controle QueryExtender para executar a consulta;
  4. Incluir um controle GridView para exibir o resultado;

Podemos usar ou um filtro CustomExpression ou o filtro MethodExpression para executar a consulta. O comportamento destes filtros é semelhante. No exemplo do artigo eu vou usar o filtro CustomExpression.

Vamos incluir um novo web form no projeto via menu WebSite -> Add New Item , selecione Web Form, aceite o nome padrão e marque a caixa Select Master Page;

Selecione a master page Site.Master e clique em Add;

A seguir selecione o novo web forme clique com o botão direito e clique em View Code;

A seguir defina o código abaixo no arquivo code-behind Default2.aspx.cs;

using System;
using System.Linq;
using System.Web.UI.WebControls.Expressions;
public partial class Default2 : System.Web.UI.Page
{
   
    protected void FiltrarProdutos(object sender, CustomExpressionEventArgs e)
    {
        e.Query = from p in e.Query.Cast<NorthwindModel.Product>()
                       where p.UnitPrice >= 50
                       select p;
    } 
}

Esta consulta usa o critério onde a coluna UnitPrice é maior ou igual a 50;

Vamos agora incluir o controle DataSource na página e configurá-lo para trabalhar com o modelo de dados. Vamos usar o controle EntityDataSource;

Altere para o modo Design e a partir da ToolBox inclua um controle EntityDataSource e clique no link Configure Data Source;

A seguir na janela Configure Data Source selecione NorthwindEntities conforme a figura abaixo e clique em Next>;

Na próxima janela selecione o EntitySetName - Products e em Entity TypeFilter selecione None e marque Selecl All e clique em Finish;

Incluindo o controle de filtro CustomExpression

Altere para o modo Source  e  inclua a partir da ToolBox um controle QueryExtender definindo a sua propriedade TargetControlID para EntityDataSource1 conforme abaixo:

<asp:QueryExtender ID="QueryExtender1" runat="server"TargetControlID="EntityDataSource1"></asp:QueryExtender>

A seguir, entre as tags do controle QueryExtender vamos incluir um filtro CustomExpression e definir o seu atributo OnQuerying para o método FiltrarProdutos que criamos no início;

<asp:QueryExtender ID="QueryExtender1" runat="server" TargetControlID="EntityDataSource1">            <asp:CustomExpression OnQuerying="FiltrarProdutos"></asp:CustomExpression>
</asp:QueryExtender>

Para exibir o resultado inclua na página, a partir da ToolBox um controle GridView conforme abaixo:

<asp:GridView ID="GridView1" runat="server"  DataSourceID="EntityDataSource1"  DataKeyNames="ProductID" AllowPaging="True">

O código completo e o leiaute da página pode ser visto abaixo:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <!-- entitydatasource -->
    <asp:EntityDataSource ID="EntityDataSource1" runat="server" 
        ConnectionString="name=NorthwindEntities" 
        DefaultContainerName="NorthwindEntities" EnableFlattening="False" 
        EntitySetName="Products">
    </asp:EntityDataSource>
    <!-- queryextender -->
    <asp:QueryExtender ID="QueryExtender1" runat="server" TargetControlID="EntityDataSource1">
        <asp:CustomExpression OnQuerying="FiltrarProdutos"></asp:CustomExpression>
    </asp:QueryExtender>
    <!-- gridview -->
    <asp:GridView ID="GridView1" runat="server"  
       DataSourceID="EntityDataSource1"   
    DataKeyNames="ProductID"  AllowPaging="True">
</asp:GridView>
</asp:Content>

 

Antes de executar selecione  a página Default2.aspx  e clique com o botão direito do mouse sobre ela selecionado: Set as Start page;

Vimos como usar alguns dos recursos do QueryExtender. Aguarde em breve mais artigos sobre o assunto.

Pegue o projeto completo aqui: QueryExtender1.zip

Marcos 10:29-30  Respondeu Jesus: Em verdade vos digo que ninguém há, que tenha deixado casa, ou irmãos, ou irmãs, ou mãe, ou pai, ou filhos, ou campos, por amor de mim e do evangelho,  que não receba cem vezes tanto, já neste tempo, em casas, e irmãos, e irmãs, e mães, e filhos, e campos, com perseguições; e no mundo vindouro a vida eterna.

Referências:

José Carlos Macoratti