Como fazer todo um clickable linha na repetidor javascript

Video: Curso de HTML5 - 25 - Integrando javascript e HTML5

Faça uma Clickable Row inteiro em Repeater javascript

Faça uma Clickable Row inteiro em Repeater javascript

javascript torna possível para os desenvolvedores da Web ASP.NET para manipular itens de controle repetidor rapidamente. O controle do repetidor funciona como uma mesa. Embora seja semelhante ao controle GridView, o repetidor tem modelos personalizáveis ​​layout. Usando o modelo de item, por exemplo, você pode adicionar elementos HTML para projetar seu próprio layout exclusivo. Para permitir que os usuários cliquem toda linha de um repetidor, adicionar uma função javascript para sua página Web.

Criar Repeater

Abra o Microsoft Visual Studio e selecione "Arquivo."

Video: Curso de HTML5 - 23 - javascript com Objetos

selecionar "novo site" a partir do menu drop-down para abrir o "novo site" janela. Clique "C #" e, em seguida, clique duas vezes em "Site ASP.NET." Visual Studio irá criar um novo projeto de site. arquivos de projeto aparecem no Solution Explorer. O código HTML para o formulário padrão, "Default.aspx," aparecerá na janela de código.

Adicione o seguinte código para a "corpo" seção do documento: Select Row lt;% #% Container.DataItem gt; lt;% # DataBinder.Eval (Container.DataItem, "Mês")% Gt; lt;% # DataBinder.Eval (Container.DataItem, "Temperatura")% Gt; Isso cria um controle de repetidora que contém duas linhas, duas colunas e um botão.

clique com o botão direito em qualquer lugar da página e selecione "Ver código." O código C # aparece na janela do código e exibir este método: Page_Load protegido vazio (remetente objeto, EventArgs e) {} Nota os dois símbolos de suporte por baixo da primeira linha de código. Este é o lugar onde código adicional vai.

Video: Curso de HTML5 - 24 - Funções javascript

Cole o seguinte código entre os dois símbolos de suporte: System.Data.DataTable dataTable = novo System.Data.DataTable () - dataTable.Columns.Add (novo System.Data.DataColumn ("Mês", Typeof (string))) - dataTable.Columns.Add (novo 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 () - Este código cria uma fonte de dados para o repetidor.

clique com o botão direito em qualquer lugar do código e selecione "View Designer." O formulário Web aparecerá mostrando o repetidor. clique com o botão direito do repetidor e selecione "propriedades" para abrir a janela Propriedades.



Clique no "Eventos" guia na parte superior da janela Propriedades para exibir uma lista de eventos.

Clique duas vezes no "ItemDataBound" evento. A janela de código irá abrir e exibir este bloco de código: Repeater1_ItemDataBound protected void (object sender, RepeaterItemEventArgs e) {} Este código é executado após o repetidor carrega seus dados.

Clique no "Eventos" guia na parte superior da janela e, em seguida, clique duas vezes "ItemCommand." A janela de código C # vai reabrir e exibir este código: Repeater1_ItemCommand protected void (fonte objeto, RepeaterCommandEventArgs e) {} Este código é executado quando você clica no controle de botão no repetidor.

Cole o seguinte código entre os dois símbolos do suporte: int selectedRow = e.Item.ItemIndex- Digite scriptBlockType = this.GetType () - ClientScriptManager scriptmanager = Page.ClientScript- corda javascriptFunction = "SelectRow (" + "`" + + SelectedRow "`" + ")"- ClientScript.RegisterStartupScript (gettype (), "SelectRow", javascriptFunction, true) - Este código chama uma função javascript que irá destacar a linha selecionada.

Video: Configurar Roteadores Ponto a ponto, repetidor, AP

Configurar javascript

Clique no "Fonte" aba localizada na parte inferior da tela. O código HTML para o formulário será exibido.

Adicione o seguinte código javascript após o documento de "" tag: função SelectRow (selectedRow) {var repeaterRows = document.getElementsByTagName ("tr") - repeaterRows [selectedRow] .style.backgroundColor = "amarelo"-} Este código seleciona e destaca a linha que você clica.

pressione "F5" para lançar o site. O controle do repetidor povoada aparecerá no navegador.

Clique em uma das linhas. O código javascript irá selecionar a linha e realçá-lo.

Referências

  • ligação Microsoft MSDN: Repeater.ItemTemplate Propriedade (System.Web.UI.WebControls)
  • ligação Microsoft MSDN: ClientScriptManager Class (System.Web.UI)

Sobre o autor

Depois de especialização em física, Kevin Lee começou a escrever profissionalmente em 1989, quando, como um desenvolvedor de software, ele também criou artigos técnicos para o Centro Espacial Johnson. Hoje, este Texas cowboy urbano continua a marcha para fora software de alta qualidade, bem como artigos não-técnicos, abrangendo uma multiplicidade de diversos temas que vão desde jogos para assuntos atuais.


Artigos relacionados