Como fazer todo um clickable linha na repetidor javascript
Video: Curso de HTML5 - 25 - Integrando javascript e HTML5
Conteúdo
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;
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 "
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)