ASP.NET : Afficher une image dans un GridView (ImageField)

Le composant GridView permet d'afficher des images dont le nom de fichier est lu dans une base de données. Il est même possible de préciser dans le code le chemin à utiliser pour retrouver l'image. Ceci évite d'avoir à entrer le chemin pour chacune des images dans la BD.

Le champ image devra être affiché à l'aide d'une colonne de type ImageField.

▼Publicité

Voici un exemple :

Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewEmoticones" runat="server" AutoGenerateColumns="False" 

        DataKeyNames="emo_id" DataSourceID="dataSourceEmoticone">

        <Columns>

            <asp:ImageField DataImageUrlField="emo_image" DataImageUrlFormatString="medias/commun/emoticones/{0}" 

               HeaderText="Émoticone" />

            <asp:BoundField DataField="emo_description" HeaderText="Signification" />

        </Columns>

</asp:GridView>

Et voici le résultat, dont l'apparence pourra encore être améliorée grâce au CSS :

GridView affichant des images

Afficher une image à l'aide d'un TemplateField

Parfois, on aura besoin de plus de souplesse pour afficher notre image dans la grille. Dans l'exemple précédent, si on avait voulu placer un lien sur chacune des images, on aurait pu y arriver comme suit :

Ex :

Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewEmoticones" runat="server" AutoGenerateColumns="False" 

        DataKeyNames="emo_id" DataSourceID="dataSourceEmoticone">

        <Columns>

            <asp:TemplateField>

                <ItemTemplate>

                    <a href='<%# Eval("emo_lien") %>'>

                        <asp:Image ImageUrl='<%# Eval("emo_image","medias/commun/emoticones/{0}") %>' runat="server" />

                    </a>

                </ItemTemplate>

            </asp:TemplateField>            

            <asp:BoundField DataField="emo_description" HeaderText="Signification" />

        </Columns>

</asp:GridView>

Article précédent : « Le GridView pour afficher un tableau de données ».

Article suivant : « Afficher la valeur d'une clé étrangère ».

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories