Saudações.

Vou mostrar como fazer um relatório zebra no GridView com um mouseover nas linhas. É bem simples e dá um efeito de visualização bem interessante na listagem.
Vamos começar com o GridView propriamente dito:

<asp:GridView
  ID=”GridView1″
  runat=”server”
  GridLines=”None”
  RowStyle-CssClass=”linhaNormal”
  AlternatingRowStyle-CssClass=”linhaAlternativa”
  OnRowDataBound=” GridView1_RowDataBound”>
</asp:GridView>

O GridView é muito simples, só acrescentamos 3 propriedades e 1 método:
GridLines: configurada como None essa propriedade retira as linhas do GridView.
RowStyle-CssClass: configura as linhas do GridView. Nela adicionamos a classe CSS que queremos.
AlternationgRowStyle-CssClass: São as linhas alternativas. São as linhas pares do GridView.
OnRowDataBoud: É o método que vamos colocar o mouseover do GridView.

As classes que utilize são estas:

.linhaNormal {background:#FFF; height:30px; padding:2px;}
.linhaAlternativa {background:#EBEBEB; height:30px; padding:2px;}

Vamos para a parte do C#

Dentro do método OnRowDataBound vamos colocar o seguinte script:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
  if (e.Row.RowType == DataControlRowType.DataRow) {
    if (e.Row.RowState == DataControlRowState.Alternate) {
      e.Row.Style.Add(“background-color”, “#EBEBEB”);
      e.Row.Attributes.Add(“onmouseover”, “this.style.backgroundColor=’#C1E4F7′”);
      e.Row.Attributes.Add(“onmouseout”, “this.style.backgroundColor=’#EBEBEB’”);
    }else{
      e.Row.Attributes.Add(“onmouseover”, “this.style.backgroundColor=’#C1E4F7′”);
      e.Row.Attributes.Add(“onmouseout”, “this.style.backgroundColor=’#FFFFFF’”);
    }
  }
}

O que significa isso?

Simples. A primeira condição verifica se é uma linha de conteúdo do GridView, ele ignora o cabeçalho e o rodapé. Depois verificamos se é linha alternativa ou não e acrescentamos a função onmouseover e onmouseout do JavaScript. Desta forma, quando o ponteiro do mouse estiver sobre a linha esta mudará de cor, o mouse saindo da linha ela volta para sua cor normal.

Espero ter ajudado um forte abraço!

Saudações.

Estes dias eu precisei fazer um GridView com um botão que abria uma nova janela (Pop). Fiz da maneira tradicional. Populei o GridView, criei o botão e configurei o Command para executar o JavaScript quando ele fosse clicado.

Assim eu fiz e assim funcionou corretamente, porém reparei em um comportamento estranho.

O JavaScript é uma linguagem client site, ok? Então porque o GridView dá um refresh na página toda vez que eu clico em um botão que executa uma função no cliente?

Reparei que toda vez que eu clicava em um botão do GridView para abrir o Pop a página era atualizada sem a menor necessidade.

Sim! Eu sei por que a página dá o refresh, sei como o GridView funciona no framework, mas mesmo assim é um procedimento inútil que consome processador, banco de dados e rede para fazer isso.

Pesquisando o assunto cheguei a seguinte solução para utilizar uma função JavaScript sem que o GridView execute o refresh:
Utilize um DataSet para popular seu GridView:

protected void Page_Load(object sender, EventArgs e) {

SqlDataAdapter da = new SqlDataAdapter(“select * from tabela”, conn);
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();

}

Em seguinda configure no GridView um botão dentro do TemplateField

<asp:GridView ID=”GridView1″ runat=”server”>
<Columns>
<asp:BoundField DataField=”coluna1″ HeaderText=”coluna1″ />
<asp:BoundField DataField=”coluna2″ HeaderText=”coluna2″ />
<asp:BoundField DataField=”coluna3″ HeaderText=”coluna3″ />
<asp:BoundField DataField=”coluna4″ HeaderText=”coluna4″ />
<asp:TemplateField>
<ItemTemplate>
<input id=”btnPop” type=”button” value=”Abrir Pop” onclick=”javascript:window.open(‘Pop.aspx?cod=<%#DataBinder.Eval(Container.DataItem,”cod”)%>’,'Pop’,'width=700,
height=600,left=300,top=100,resizable=no,scrollbars=yes,
toolbar=no,location=no,directories=no,status=no,menubar=no,
copyhistory=no’);” />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

A chave da solução está no método DataBinder.Eval(). Neste método você chama o Conteiner e especifica o Item que quer utilizar na passagem do parâmetro. Neste caso estou utilizando campo (cod) que o meu DataSet trouxe.

Dessa forma você utiliza O JavaScript sem dar refresh na página, consumindo menos processamento, banco de dados e rede.

Espero ter ajudado um forte abraço!

Boas.
Neste post vou mostrar como se trabalhar com o método $.get() do jQuery. É o método que mais utilizo. Funciona basicamente da seguinte forma:
- Carrega uma página remota usando um HTTP GET;
- É uma maneira fácil de enviar uma simples solicitação GET para um servidor;
- Retorna uma resposta assim que a solicitação estiver completa;
- Retorna somente se a resposta tiver um código válido, ou seja, não retorna um erro de execução.

Sintaxe:
$.get(url,variáveis,retorno,tipo)
url: página que contém o código que será executado e que escreve o resultado;
variáveis: são as variáveis que serão enviadas pelo método GET;
retorno: famoso callback, é o resultado que foi gerado pela página;
tipo: tipo do dado retornado, exemplo: XML, JSON, HTML.

Fonte original aqui.

Vamos ao exemplo.
Vamos fazer um simples formulário que terá dois campos. Um para definir a quantidade de colunas de uma tabela e outro para definir a quantidade de linhas para a mesma tabela. Em outras palavras, vamos fazer uma tabela dinâmica para mostrar como o $.get() funciona.

Teremos para este exemplo as seguintes páginas:
- tabelaDinamica.asp;
- tabelaDinamica.js;
- ajaxTabelaDinamica.asp;
- jquery.js.
Como é de meu costume, vou separar os códigos por página para melhor administração.

Página tabelaDinamica.asp
Terá o HTML com o formulário de preenchimento para gerar a tabela.

Código HTML do formulário.

Nesta página temos a tabela com o formulário de preenchimento e uma DIV onde armazenaremos o resultado que foi retornado pelo $.get().

Página tabelaDinamica.js
$(document).ready(function(){
  $(‘#gerarTabela’).click(function(){
    var numeroColuna = $(‘#numeroColuna’).val();
    var numeroLinha = $(‘#numeroLinha’).val();
    $.get(‘ajaxTabelaDinamica.asp’,{
      numeroColuna:numeroColuna,
      numeroLinha:numeroLinha
    },function(resultado){
      $(‘#resultado’).html(resultado);
    });
  });
});

Declaramos a biblioteca para trabalharmos com o jQuery:
$(document).ready(function(){

Verificamos o evento click do botão Gerar Tabela:
$(‘#gerarTabela’).click(function(){

Declaramos as variáveis e atribuímos a elas os valores do formulário:
var numeroColuna = $(‘#numeroColuna’).val();
var numeroLinha = $(‘#numeroLinha’).val();

Iniciamos o método $.get():
$.get(‘ajaxTabelaDinamica.asp’,…
Obs: o nome/caminho da página tem que estar entre apóstrofos.

Segunda parte do método $.get():
{numeroColuna:numeroColuna,
numeroLinha:numeroLinha}
Obs: as variáveis devem estar entre chaves, atribuídas com dois pontos (:) e separadas por vírgula.

Terceira parte do método $.get():
function(resultado){…}
Obs: é dentro desta função que vamos receber e trabalhar com o retorno da página ajaxTabelaDinamica.asp.

Página ajaxTabelaDinamica.asp
<%
  numeroColuna = request.querystring(“numeroColuna”)
  numeroLinha = request.querystring(“numeroLinha”)
  strHTML = “<table border=”"1″”>”
  For i = 1 To numeroLinha
    strHTML = strHTML & “<tr>”
    For j = 1 To numeroColuna
      strHTML = strHTML & “<td>Coluna “&j&” Linha “&i&”</td>”
    Next
  strHTML = strHTML & “</tr>”
  Next
  strHTML = strHTML & “</table>”
  response.write strHTML
%>
Aqui nós temos uma lógica simples de construção de tabela com os valores que foram enviados pelo método $.get().
Após a execução, é necessário escrever o resultado do código na tela para que o método $.get() nos retorne este valor.
response.write strHTML

O método $.get() irá receber este redultado e nós o colocaremos dentro da DIV para exibição.
$(‘#resultado’).html(resultado);

E é isso, espero ter ajudado com mais este post.e caso tenham alguma dúvida é só perguntar.

Recentemente eu tive um problema com o nosso velho e bom amigo IE. Como é de costume, ele sempre apresenta anormalidades em reiderizar páginas e funções AJAX.

Na busca da solução deste problema, achei um script que não limpa o cache, mas burla o IE quando ele var requisitar a mesma página para executar o AJAX.

É muito mais simples do que parece, é só colocar mais um parâmetro randômico na URL que ele irá executar o AJAX. Fica então, da seguinte forma:

function limpaCache(url){
   if(url.indexOf(“?”)>=0){
      return aurl + “&rand=” + encodeURI(Math.random());
   }else{
      return aurl + “?randon=” + encodeURI(Math.random());
   }
}

Depois é só você chamar a função passando a URL como parâmetro, exemplo:

url = limpaCache(‘paginaAJAX.asp’);
$.get(url,{…},function(){…});

Dessa forma o cache anterior não é retornado.

Espero ter ajudado, qualquer dúvida é só perguntar.
Forte abraço!