Ajout d'images et de boutons dynamiquement dans une page asp .net
Soyez le premier à donner votre avis sur cette source.
Vue 20 915 fois - Téléchargée 952 fois
Description
Ce morceau de code montre comment ajouter des Webcontrols dynamiquement dans une page aspx.
La partie HTML (Listimage.aspx) contient un tableau runat "server" vide (sans ligne, ni colonne).
La partie code behind (Listimage.aspx.cs) : Contient un ArrayList définissant les nom des images à afficher, une boucle sur cet ArrayList permet de créer les cellules incluant les nouveaux boutons (avec la gestion d'évènement) et les nouvelles images.
La partie HTML (Listimage.aspx) contient un tableau runat "server" vide (sans ligne, ni colonne).
La partie code behind (Listimage.aspx.cs) : Contient un ArrayList définissant les nom des images à afficher, une boucle sur cet ArrayList permet de créer les cellules incluant les nouveaux boutons (avec la gestion d'évènement) et les nouvelles images.
Source / Exemple :
// ------------------------------------------------------------------------------------
// PARTIE BEHIND : Listimage.aspx.cs
// ------------------------------------------------------------------------------------
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace testona
{
public class Listimage : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label lblClick;
protected System.Web.UI.WebControls.Table Table1;
// Page_Load()
// --------------------------------------------------------------
private void Page_Load(object sender, System.EventArgs e)
{
// Initialise un ArrayList contenant les noms des images a afficher
// --------------------------------------------------------------
System.Collections.ArrayList lstImage = new ArrayList();
int icol = new int();
lstImage.Add("ancetre_programme_1.jpg");
lstImage.Add("Ancetre_programme_2.jpg");
lstImage.Add("AncT3couv.jpg");
lstImage.Add("Couv._Fides3_pas_d_f.jpg");
lstImage.Add("Fides_1.jpg");
// Boucle sur cette liste et affiche les images dans un tableau avec un bouton de choix
// --------------------------------------------------------------
for (int i=0;i<lstImage.Count;i++)
{
// Creer les nouveaux Webcontrols a ajouter : Bouton et Image
// --------------------------------------------------------------
System.Web.UI.WebControls.Button btn = new Button();
System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
btn.Text="Choix N°" + i;
btn.ID = i.ToString();
// Ajoute une gestion d evenement sur l'objet bouton (cf. plus bas : methode Bouton_Click())
btn.Click += new System.EventHandler(this.Bouton_Click);
img.ID = "Img " + i.ToString();
img.ImageUrl = "images/" + lstImage[i];
// Creer les objets TaleRow et TableCel pour ajouter une cellule dans le tableau
// --------------------------------------------------------------
System.Web.UI.WebControls.TableRow rw = new TableRow();
System.Web.UI.WebControls.TableCell cel = new TableCell();
// Gestion de l'affichage sur 2 colonnes
// --------------------------------------------------------------
if (((Convert.ToInt16(i % 2))==0))
{
// Colonne 1 : Ajout d'une nouvelle ligne (Row)
icol+=1;
Table1.Rows.Add(rw);
Table1.Rows[icol-1].Cells.Add(cel);
// Ajoute les Webcontrols Bouton et Image dans la nouvelle cellule
Table1.Rows[icol-1].Cells[0].Controls.Add(btn);
Table1.Rows[icol-1].Cells[0].Controls.Add(img);
}
else
{
// Colonne 2 : Pas d'ajout de ligne (Row)
Table1.Rows[icol-1].Cells.Add(cel);
// Ajoute les Webcontrols Bouton et Image dans la nouvelle cellule
Table1.Rows[icol-1].Cells[1].Controls.Add(btn);
Table1.Rows[icol-1].Cells[1].Controls.Add(img);
}
}
}
// Bouton_Click() : Méthode associee a l'evenement click des boutons
// --------------------------------------------------------------
private void Bouton_Click(object sender, System.EventArgs e)
{
// Affiche un message contenant l'Identifiant du Bouton venant d'etre cliquer
Button ClickedBtn = (Button)sender;
lblClick.Text ="Vous venez de choisir le N° " + ClickedBtn.ID.ToString();
}
// --------------------------------------------------------------
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN : Cet appel est requis par le Concepteur Web Form ASP.NET.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Méthode requise pour la prise en charge du concepteur - ne modifiez pas
/// le contenu de cette méthode avec l'éditeur de code.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
// --------------------------------------------------------------
}
}
// ------------------------------------------------------------------------------------
// PARTIE HTML : Listimage.aspx
// ------------------------------------------------------------------------------------
<%@ Page language="c#" Codebehind="Listimage.aspx.cs" AutoEventWireup="false" Inherits="testona.Listimage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:label ID="lblClick" Runat="server" Text=""></asp:label><br><br>
<asp:Table id="Table1" runat="server" Width="250px" Height="124px"></asp:Table>
</form>
</body>
</HTML>
Codes Sources
A voir également
- Asp image
- Asp images - Meilleures réponses
- Onmouseover sur un asp:image ✓ - Forum - ASP / ASP.NET
- ASP : Afficher une Image dans un WebControls.Image - Forum - ASP / ASP3
- Asp - redimensionner image + picto après upload - Conseils pratiques - ASP / ASP.NET
- ASP / ASP.NET : Code asp+html pour afficher une image selon le chiffre que donne une base - CodeS S - Guide
- ASP / ASP.NET : Surcharge du controle hyperlink pour lui faire afficher une image et du texte... - - Guide
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.