Murilo Machado

Criando um pager personalizado no GridView ASP.NET

2011-10-24T16:24:00.000-02:00

Olá pessoal, hoje vou ensinar como fazer um pager personalizado no GridView do ASP.NET.

Nosso pager será composto de First, Prev, Numeric, Next, Last.

Vamos lá.

Para modificar o Default do pager do Grid sobrecarregue o método RowCreate do GridView e compare se o RowType é igual a "Pager", da seguinte maneira: if (e.Row.RowType == DataControlRowType.Pager)

Após isso vamos ao código, vou colar ele todo aqui pois está comentado.
É bem simples, e o segredo está em realizar um RowCommand para o próprio GridView com o CommandName de Page e o CommandArgument que muda conforme o botão.


if (e.Row.RowType == DataControlRowType.Pager)
{
     //Pega a célula do pager (é uma celula com colspan automatico do tamanho do grid)
     TableCell c = e.Row.Cells[0];
     //Limpa o que tem no Pager
     c.Controls.Clear();
     //Centraliza o Pager novo
     c.Style.Add(HtmlTextWriterStyle.TextAlign, "center");

     //Cria uma tabela para ser o nosso novo pager
     Table tab = new Table();
     //Fix para centralizar a tabela
     tab.Style.Add("margin", "auto");
     //Cria a linha do pager
     TableRow pager = new TableRow();
     //Cria as celulas que vão conter os botões
     TableCell cFirst = new TableCell();
     TableCell cPrev = new TableCell();
     TableCell cNext = new TableCell();
     TableCell cLast = new TableCell();

     //Cria os botões
     ImageButton first = new ImageButton();
     first.ImageUrl = grvDatas.PagerSettings.FirstPageImageUrl;
     first.BorderWidth = 0;
     first.CommandName = "Page";
     first.CommandArgument = "First";

     cFirst.Controls.Add(first);
    
     ImageButton prev = new ImageButton();
     prev.ImageUrl = grvDatas.PagerSettings.PreviousPageImageUrl;
     prev.BorderWidth = 0;
     prev.CommandName = "Page";
     prev.CommandArgument = "Prev";

     cPrev.Controls.Add(prev);

     pager.Cells.Add(cFirst);
     pager.Cells.Add(cPrev);

     //Variavel de controle da paginação
     //A variavel PageAux, voce deve definir fora do escopo, e setar = 0 no PageLoad dentro de  um if(!IsPostBack)
     int paginacao = grvDatas.PagerSettings.PageButtonCount * PageAux;
     //Variavel da quantidede de paginas que terão no grid
     int qtd_paginas = Convert.ToInt32(decimal.Floor(decimal.Divide(grvDatas.PageCount,  grvDatas.PagerSettings.PageButtonCount)) + 1);
    
     //Loop para ajustar a página do pager
     for (int k = 0; k < qtd_paginas; k++)
     {

if (paginacao > grvDatas.PageIndex)

   PageAux = PageAux - 1;
      paginacao = grvDatas.PagerSettings.PageButtonCount * PageAux;
   }
   else if ((paginacao + grvDatas.PagerSettings.PageButtonCount - 1) < grvDatas.PageIndex)
   {
      PageAux = PageAux + 1;
      paginacao = grvDatas.PagerSettings.PageButtonCount * PageAux;
   }

}
    
     //Adiciona o ... Antes dos números
     if (paginacao > 0)
     {

   TableCell cNum = new TableCell();
   cNum.Style.Add("border", "solid 1px #000");
   cNum.Style.Add(HtmlTextWriterStyle.VerticalAlign, "middle");
   cNum.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#EEE");
   cNum.Style.Add(HtmlTextWriterStyle.FontSize, "12px");
   cNum.Style.Add(HtmlTextWriterStyle.Width, "25px;");
   cNum.Style.Add(HtmlTextWriterStyle.Height, "25px;");
   cNum.Style.Add(HtmlTextWriterStyle.TextDecoration, "none");
   cNum.Style.Add(HtmlTextWriterStyle.Cursor, "pointer");

cNum.Attributes.Add("onclick", "javascript:__doPostBack('ctl00$cphConteudo$grvDatas','Page$" + (paginacao).ToString() + "');");

LinkButton num = new LinkButton();

num.Style.Add(HtmlTextWriterStyle.TextDecoration, "none");

num.Text = "...";

num.CommandName = "Page";

num.CommandArgument = (paginacao).ToString();

cNum.Controls.Add(num);

pager.Cells.Add(cNum);

//Adiciona os Numeric

for (int i = paginacao; i < (grvDatas.PagerSettings.PageButtonCount + paginacao); i++)

if (i < grvDatas.PageCount)

TableCell cNum = new TableCell();

cNum.Style.Add("border", "solid 1px #000");

cNum.Style.Add(HtmlTextWriterStyle.VerticalAlign, "middle");

cNum.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#EEE");

cNum.Style.Add(HtmlTextWriterStyle.FontSize, "12px");

cNum.Style.Add(HtmlTextWriterStyle.Width, "25px;");

cNum.Style.Add(HtmlTextWriterStyle.Height, "25px;");

cNum.Style.Add(HtmlTextWriterStyle.TextDecoration, "none");

cNum.Style.Add(HtmlTextWriterStyle.Cursor, "pointer");

cNum.Attributes.Add("onclick", "javascript:__doPostBack('ctl00$cphConteudo$grvDatas','Page$" + (i + 1).ToString() + "');");

LinkButton num = new LinkButton();

num.Style.Add(HtmlTextWriterStyle.TextDecoration, "none");

num.Text = (i + 1).ToString();

num.CommandName = "Page";

num.CommandArgument = (i + 1).ToString();

if (i == grvDatas.PageIndex)

cNum.Style.Add(HtmlTextWriterStyle.FontWeight, "bold");

cNum.Controls.Add(num);

pager.Cells.Add(cNum);

//Adiciona o ... Depois dos numeros

if ((paginacao + grvDatas.PagerSettings.PageButtonCount) < grvDatas.PageCount)

TableCell cNum = new TableCell();

cNum.Style.Add("border", "solid 1px #000");

cNum.Style.Add(HtmlTextWriterStyle.VerticalAlign, "middle");

cNum.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#EEE");

cNum.Style.Add(HtmlTextWriterStyle.FontSize, "12px");

cNum.Style.Add(HtmlTextWriterStyle.Width, "25px;");

cNum.Style.Add(HtmlTextWriterStyle.Height, "25px;");

cNum.Style.Add(HtmlTextWriterStyle.TextDecoration, "none");

cNum.Style.Add(HtmlTextWriterStyle.Cursor, "pointer");

cNum.Attributes.Add("onclick", "javascript:__doPostBack('ctl00$cphConteudo$grvDatas','Page$" + ((paginacao + grvDatas.PagerSettings.PageButtonCount) + 1).ToString() + "');");

LinkButton num = new LinkButton();

num.Style.Add(HtmlTextWriterStyle.TextDecoration, "none");

num.Text = "...";

num.CommandName = "Page";

num.CommandArgument = ((paginacao + grvDatas.PagerSettings.PageButtonCount) + 1).ToString();

cNum.Controls.Add(num);

pager.Cells.Add(cNum);

ImageButton next = new ImageButton();

next.ImageUrl = grvDatas.PagerSettings.NextPageImageUrl;

next.BorderWidth = 0;

next.CommandName = "Page";

next.CommandArgument = "Next";

cNext.Controls.Add(next);

ImageButton last = new ImageButton();

last.ImageUrl = grvDatas.PagerSettings.LastPageImageUrl;

last.BorderWidth = 0;

last.CommandName = "Page";

last.CommandArgument = "Last";

cLast.Controls.Add(last);

pager.Cells.Add(cNext);

pager.Cells.Add(cLast);

tab.Rows.Add(pager);

//Insere a tabela na celula do pager

c.Controls.Add(tab);
}

Usando um ShowMessage no ASP.NET

2011-08-11T11:47:00.000-03:00

Fala galera, hoje eu precisava de usar várias vezes o ClientScript.RegisterStartupScript e eu estava com preguiça de ficar fazendo isso toda hora.

Então resolvi criar uma função na minha classe Util para que ficasse mais fácil a chamada desse método.

Então fiz uma função Util.ShowMessage(string mensagem) para economizar dedo. hahaha

Porém eu me deparei com um impecílio, o Page, que é a classe pai do ClientScript, não está acessível de um método estático em uma classe separada da sua página aspx.

Então para isso devemos recuperar a instância atual da Page para podermos registrar um script.

Para isso faça o seguinte:

Page p = HttpContext.Current.Handler as Page;

O HttpContext.Handler é a tratativa da página sendo executada no momento. Então você pode recuperá-la convertendo-a para Page.

Daí é só fazer a sua função!

A minha ficou assim:

public static void ShowMessage(string mensagem)
{
using (Page p = HttpContext.Current.Handler as Page)
{
Random r = new Random();
string script = String.Format("alert('{0}');", mensagem);
if (!p.ClientScript.IsStartupScriptRegistered(r.ToString()))
{
p.ClientScript.RegisterStartupScript(typeof(HttpContext), r.Next().ToString(), script, true);
}
}
}

Espero que tenham gostado!

Até qualquer hora!

Usando uma página customizada do app_offline.htm enquanto publica sua aplicação asp.net

2011-08-04T15:00:00.003-03:00

Olá pessoal, vou ensinar vocês como usar uma página customizada mais amigável enquanto seu site é publicado pelo Visual Studio.

Eu andei pesquisando e não achei nada parecido então eu resolvi postar como se faz isso.

É muito simples, você não precisa colocar o arquivo na sua aplicação nem no servidor quando você vai publicar, o Visual Studio faz isso por você, e no final da publicação ele mesmo exclui o arquivo, voltando sua aplicação On-line.

Para customizar a página app_offline.htm simplesmente vá no local onde o VS armazena o arquivo, no meu caso (Windows Vista) ele fica em C:\Users\\AppData\Roaming\Microsoft\VisualStudio\\app_offline.htm, daí você simplesmente altera esse arquivo e pronto! Seu website será muito mais amigável quando você estiver publicando.

Abraço a todos e espero ter ajudado.

Até qualquer hora.

Utilizando um Autocomplete do JQueryUI como picker a partir de uma lista de dados do servidor por Json

2011-07-27T16:23:00.002-03:00

Bom galera, estreiando o blog com uma postagem sobre como utilizar um autocomplete do jqueryui para servir como um picker.

Vamos linkar o autocomplete com uma lista de dados vinda do servidor carregada por ajax do jquery, logo o retorno será em um formato json.

Chega de papo e vamos ao que interessa.

Vamos criar primeiramente o objeto html que será nosso picker

<input name="pessoa" id="pessoa" />

No caso farei um picker de Pessoas

Agora no server side vamos criar nossa função que irá retornar os dados para a função ajax. No meu caso eu criei a função na própria página aspx que estou usando o picker, porém a função pode ficar em uma página diferente.

[WebMethod()]
public static string[] GetPessoas()
{
List pessoas = Pessoa.getAllCliente();
var result = from s in pessoas
select s.Codigo.ToString() + " - " + s.Nome;
return result.ToArray();
}

Temos que herdar a função que irá retornar os dados de um WebMethod para poder ser interpretada pelo browser do cliente ao fazer uma requisição ajax.

Utilizei também um Linq para retornar os campos de interesse da minha List. Onde eu quero mostrar o código e o nome do cliente.

Para retornar os dados para o autocomplete a função deve retornar uma string e você faz um split via script ou retorna logo um array de string que será interpretado como uma estrutura Json.
Ao utilizar o ajax como mostrarei abaixo, retornando o array ele automaticamente armazena os dados na forma de Json no próprio cliente, ficando rápida as consultas para o autocomplete.

Eu não quis ir filtrando o que o usuário digita e após, por exemplo, 0.4 segundos fazer a pesquisa via ajax de depois disso linkar o resultado no autocomplete, pois isso demoraria mais ainda, pois se ele errasse a digitação e apagasse pra digitar novamente o ajax já teria disparado e geraria várias requisições para o servidor, ficando mais lento do que carregar de uma vez só todos os clientes no autocomplete.

Minha função Pessoa.getAllCliente() retorna em torno de 15 mil registros. Passando isso para o Json gira em torno de 2Mb de dados para o cliente via requisição ajax. Isso leva em torno de 5~10 segundos para ser armazenado no cliente via rede local. Isso se torna viável para a aplicação que tenho aqui na empresa, no caso uma Intranet.

Após toda essa explicação, vamos retornar os dados para o cliente e montar o nosso picker, para isso vamos utilizar a chamada $(document).ready() do jquery, pois precisamo que assim que possível no navegador do cliente já seja carregado todos os dados no picker e montar o autocomplete.

$.ajax({
type: "POST",
url: "Pagina.aspx/GetPessoas",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(array) {
if (array.d) {
$(function() {
$("#pessoa").autocomplete({
source: array.d,
delay: 400,
minLength: 3,
select: function(e, ui) {
$(this).blur();
var cod_pessoa = ui.item.value.split(" ").shift();
$('#content').show('slow');
$('#tabs-info').hide('slow').load("PaginaInfo.aspx?id=" + cod_pessoa, function() {
$(this).show('slow');
});
},
search: function(e, ui) {
$('#content').hide('slow');
}
});
});
}
},
error: function(xhr) {
alert(xhr.get_message());
}
});

Vamos à explicação: Assim que a página esteja disponível fazemos uma chama ajax para trazer os dados da nossa função server side por uma url url: "Pagina.aspx/GetPessoas" passando vazio como parâmetro da função data: "{}", ou seja, se você precisar passar algum parâmetro para a sua função do server side você coloca ele ai no data, pode ser qualquer estrutura de dados a partir do cliente, inclusive um array, e claro também passamos o tipo da chamada como sendo json contentType: "application/json; charset=utf-8", dataType: "json".

Assim que terminar a chamada e o script montar os dados no cliente ele chama a função success do ajax e é aqui que montaremos no autocomplete. Na função success pegamos o retorno da chamada que é justamente os dados em forma de array json success: function(array) . Os dados estão armazenados no atributo 'd' da variável 'array'.

Então verificamos se existe algum dado no array if (array.d) e se existir montamos o autocomplete passando como parâmetro de dado justamente o 'array.d'

$("#pessoa").autocomplete({

source: array.d,

delay: 400,

minLength: 3

Até agora tudo está montado para que o campo pessoa seja um autocomplete comum, o que vai fazer o autocomplete se tornar um picker é fazermos que ao selecionar algum item dele o site faça alguma outra coisa.

Então implementamos a função select do autocomplete:

select: function(e, ui) {

$(this).blur();

var cod_pessoa = ui.item.value.split(" ").shift();

$('#content').show('slow');

$('#tabs-info').hide('slow').load("PaginaInfo.aspx?id=" + cod_pessoa, function() {

$(this).show('slow');

});

Coloquei um blur no começo da função para ele perder o foco quando selecionar um cliente.

Para pegar qual o código do cliente selecionado eu faço um split com o valor selecionado, que é passado no parâmetro ui (segundo parâmetro da função select), e faço um shift() com o array retornado no split(), que nada mais é do que selecionar apenas o primeiro elemento do array e descartar o restante, pois eu fiz um split com " " espaço em branco, retornando por exemplo {"12345","-","Fulano de tal"}, lembrando que a string do array do json foi montada no server side.

Após selecionado o cliente em uma variável podemos fazer qualquer coisa com o cliente na página. Por exemplo, eu uso o código para carregar dinâmicamente várias divs no site. Coloquei um exemplo abaixo:

var cod_pessoa = ui.item.value.split(" ").shift();

$('#content').show('slow');

$('#tabs-info').hide('slow').load("PaginaInfo.aspx?id=" + cod_pessoa, function() {

$(this).show('slow');

Eu pego o código do cliente e carrego a página aspx PaginaInfo.aspx passando no get o código. Dentro da página PaginaInfo.aspx eu carrego informações pertinentes à esse cliente e mostro o resultado na div tabs-info que é um Pager do jqueryui também, com alguns efeitos de visibilidade.

No caso eu implementei a função search do autocomplete também, que irá esconder minha div content onde fica o conteúdo dessa página, essa função search é disparada quando o se pesquisa alguma coisa no autocomplete.

Para ficar bom também eu coloquei um $("#content).hide("slow"); no focus do picker também, essa função deve ser implementada fora do ajax, porém dentro do $(document).ready(). Também limpo o valor do picker quando ganha o foco, ficando assim:

$("#pessoa").focus(function() {

$(this).val("");

$('#content').hide('slow');

});

Bom pessoal, é isso! Espero que gostem da minha primeira postagem no meu blog.

Até qualquer hora.