Como tornar clicável uma linha inteira do Repeater com JavaScript

Escrito por kevin lee | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como tornar clicável uma linha inteira do Repeater com JavaScript
Adicione uma função JavaScript à sua página para que isto seja feito (Hemera Technologies/Photos.com/Getty Images)

O JavaScript possibilita a rápida manipulação do controle "Repeater" aos desenvolvedores de ASP.NET para a web. Esse controle funciona como uma tabela. Embora seja similar ao controle "GridView", este tem modelos visuais personalizáveis. Utilizando o modelo "Item", por exemplo, é possível adicionar elementos HTML para criar seu próprio modelo. Para que os usuários possam clicar em uma linha inteira de "Repeater", adicione uma função JavaScript à sua página.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

Instruções

    Crie o "Repeater"

  1. 1

    Abra o Microsoft Visual Studio e selecione "File" (Arquivo).

  2. 2

    Selecione a opção "New Website" (Novo site), no menu suspenso, para abrir a janela correspondente a essa opção. Clique em "C#" e dê um clique duplo em "ASP.NET Website" (Site ASP.NET). O Visual Studio criará um novo projeto de site. Os arquivos do projeto aparecerão no "Solution Explorer". O código HTML para o formulário padrão ("Default.aspx") aparecerá na janela de códigos.

  3. 3

    Insira o código a seguir na ceção <body> do documento:

    <asp:Repeater id="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand">

    <HeaderTemplate> <table border=1> </HeaderTemplate>

    <ItemTemplate> <tr> <td><asp:LinkButton runat="server" ID="SelectRow" CommandName="SelectRow" >Select Row </asp:LinkButton> </td>

    <td> <%# Container.DataItem %> </td> <td width="33%"><%# DataBinder.Eval(Container.DataItem, "Month") %></td> <td width="33%"><%# DataBinder.Eval(Container.DataItem, "Temperature") %></td> </tr> </ItemTemplate> </asp:Repeater>

    Isso criará um controle "Repeater" que contém duas linhas, duas colunas e um botão.

  4. 4

    Clique com o botão direito em qualquer lugar da página e selecione "View code" (Visualizar código). O script em C# aparecerá na janela de códigos e exibirá este método:

    protected void Page_Load(object sender, EventArgs e) {

    }

    Note as duas chaves abaixo da primeira linha de código. É ali que deve-se inserir outros códigos.

  5. 5

    Cole o código a seguir entre as duas chaves:

    System.Data.DataTable dataTable = new System.Data.DataTable(); dataTable.Columns.Add(new System.Data.DataColumn("Mês", typeof(string))); dataTable.Columns.Add(new System.Data.DataColumn("Temperatura", typeof(string))); dataTable.Rows.Add(new string[] { "Junho", "100" }); dataTable.Rows.Add(new string[] { "Dezembro", "45" }); Repeater1.DataSource = dataTable; Repeater1.DataBind();

    Esse código cria um banco de dados para o "Repeater".

  6. 6

    Clique com o botão direito em qualquer lugar do código e selecione "View Designer" (Modo de exibição Designer). O formulário "Web" será exibido, mostrando o "Repeater". Clique com o botão direito e selecione "Properties" (Propriedades) para abrir a janela "Properties".

  7. 7

    Clique na aba "Events" (Eventos), na parte superior da janela "Properties", para exibir uma lista de eventos.

  8. 8

    Dê um clique duplo no evento "ItemDataBound". A janela de código abrirá e exibirá o seguinte:

    rotected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) {

    }

    Esse código é executado depois que o "Repeater" carrega seus dados.

  9. 9

    Clique na aba "Events", no topo da janela, e dê um clique duplo em "ItemCommand". A janela de código C# se abrirá novamente e exibirá este código:

    protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e) {

    }

    Isso é executado quando se clica no botão de controle no "Repeater".

  10. 10

    Cole o código a seguir entre as duas chaves do código anterior:

    int selectedRow = e.Item.ItemIndex; Type scriptBlockType = this.GetType(); ClientScriptManager scriptManager = Page.ClientScript; string javaScriptFunction = "selectRow(" + "'" + selectedRow + "'" + ")"; ClientScript.RegisterStartupScript(GetType(), "selectRow", javaScriptFunction, true);

    Ele invocará uma função JavaScript que realçará a linha selecionada.

    Configure o JavaScript

  1. 1

    Clique na aba "Source" (Fonte) localizada na parte inferior da tela. O código HTML do formulário será exibido.

  2. 2

    Adicione o código JavaScript abaixo da tag <title> do documento:

    function selectRow(selectedRow) { var repeaterRows = document.getElementsByTagName("tr"); repeaterRows[selectedRow].style.backgroundColor = "yellow"; }

    Esse código selecionará e realçará a linha que for clicada.

  3. 3

    Pressione "F5" para executar o site. O controle "Repeater" preenchido será exibido no navegador.

  4. 4

    Clique em uma das linhas. O código JavaScript selecionará a linha e a realçará.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível