Les partenaires publicitaires:

Comment faire toute une cliquable de ligne dans répéteur javascript

javascript permet aux développeurs ASP.NET Web pour manipuler les éléments de commande du répéteur rapidement. Le contrôle de répéteur fonctionne comme une table. Bien qu'il soit similaire au contrôle GridView, le répéteur a des modèles de mise en page personnalisable. Utilisation du modèle d'objet, par exemple, vous pouvez ajouter des éléments HTML pour concevoir votre propre disposition. Pour permettre aux utilisateurs de cliquer sur toute la rangée d'un répéteur, ajouter une fonction javascript sur votre page Web.

{rel}

Créer Repeater

  1. Ouvrez Microsoft Visual Studio et sélectionnez "Fichier."

  2. Sélectionner "Nouveau site web" dans le menu déroulant pour ouvrir la "Nouveau site web" fenêtre. Cliquez "C #" puis double-cliquez sur "Du site Web ASP.NET." Visual Studio va créer un nouveau projet de site Web. Les fichiers de projet apparaissent dans l'Explorateur de solutions. Le code HTML pour la forme par défaut, "Default.aspx," apparaîtra dans la fenêtre de code.

  3. Ajoutez le code suivant à la "corps" section du document:

    Sélectionner la ligne

    lt;% # Container.DataItem% gt;

    lt;% # DataBinder.Eval (Container.DataItem, "Mois")% Gt;

    lt;% # DataBinder.Eval (Container.DataItem, "Température")% Gt;

    Cela crée une commande de répéteur qui contient deux lignes, deux colonnes et un bouton.

  4. cliquez n'importe où sur la page et sélectionnez; droit "Voir Code." Le code C # apparaîtra dans la fenêtre de code et afficher cette méthode:

    void Page_Load protégé (expéditeur d'objet, EventArgs e)

    {

    }

    Notez les deux symboles de support ci-dessous la première ligne de code. Ceci est où le code supplémentaire va.

  5. Collez le code suivant entre les deux symboles du support:

    System.Data.DataTable dataTable = new System.Data.DataTable ();

    dataTable.Columns.Add (nouvelle System.Data.DataColumn ("Mois", Typeof (string)));

    dataTable.Columns.Add (nouvelle System.Data.DataColumn ("Température", Typeof (string)));

    dataTable.Rows.Add (nouveau string [] { "Juin", "100" });

    dataTable.Rows.Add (nouveau string [] { "Décembre", "45" });

    Repeater1.DataSource = dataTable;

    Repeater1.DataBind ();

    Ce code crée une source de données pour le répéteur.

  6. cliquez n'importe où dans le code et sélectionnez; droit "Concepteur de vue." Le formulaire Web apparaît, montrant le répéteur. droit; cliquez sur le répéteur et sélectionnez "Propriétés" pour ouvrir la fenêtre Propriétés.

  7. Clique le "Événements" onglet en haut de la fenêtre Propriétés pour afficher une liste d'événements.

  8. Double-cliquez sur le "ItemDataBound" événement. La fenêtre de code va ouvrir et afficher ce bloc de code:

    Repeater1_ItemDataBound protected void (objet expéditeur, RepeaterItemEventArgs e)

    {

    }

    Ce code court après le répéteur charge ses données.

  9. Clique le "Événements" onglet en haut de la fenêtre, puis double-cliquez sur "ItemCommand." La fenêtre de code C # va rouvrir et afficher ce code:

    Repeater1_ItemCommand protected void (source de l'objet, RepeaterCommandEventArgs e)

    {

    }

    Ce code est exécuté lorsque vous cliquez sur le bouton de commande sur le répéteur.

  10. Collez le code suivant entre les deux symboles du support:

    int SelectedRow = e.Item.ItemIndex;

    Tapez scriptBlockType = this.GetType ();

    ClientScriptManager ScriptManager = Page.ClientScript;

    chaîne javascriptFunction = "selectRow (" + "'" + SelectedRow + "'" + ")";

    ClientScript.RegisterStartupScript (GetType (), "selectRow", javascriptFunction, true);

    Ce code appelle une fonction javascript qui mettra en valeur la ligne sélectionnée.

Configurer javascript

  1. Clique le "Source" onglet situé en bas de l'écran. Le code HTML pour le formulaire apparaît.

  2. Ajoutez le code javascript après le document de "" tag:

    fonction selectRow (SelectedRow) {

    var = document.getElementsByTagName repeaterRows ("tr");

    repeaterRows [SelectedRow] .style.backgroundColor = "jaune";

    }

    Ce code sélectionne et met en évidence la rangée que vous cliquez.

  3. Appuyez "F5" pour lancer le site. Le contrôle de répéteur peuplée apparaîtra dans le navigateur.

  4. Cliquez sur l'une des lignes. Le code javascript sélectionnez la ligne et de le mettre en évidence.

» » » » Comment faire toute une cliquable de ligne dans répéteur javascript