Asp.net Data list control show Image example

mybwu_com發表於2014-01-06

Step 1: add asp.net data list control

<div style="height: 450px;overflow-y: scroll;">
                <asp:DataList runat="server" runat="server" 
                 ID="dtlPhotos"  OnItemDataBound="dtlPhotos_OnItemDataBind"
                    RepeatDirection="Horizontal" RepeatLayout="Flow" RepeatColumns="5" >
                    
                    <ItemTemplate>
                        <div style="margin-left: 20px;display: inline-block;">
                            <div>
                                <asp:Image ID="imgPhoto" runat="server" Width="200" Height="200" />
                            </div>
                            <div>
                                <asp:CheckBox runat="server" ID="chkPhoto" Text='<%#Eval("Name")%>' />
                                <asp:HiddenField runat="server" ID="hdnPhotoId" Value='<%#Eval("PhotoId")%>'/>
                            </div>
                        </div>
                    </ItemTemplate>
                    
                </asp:DataList>
                 <asp:ImageButton runat="server" style="margin-bottom:20px;margin-left: 10px;" ImageUrl="../../Resource/Image/eDAS/add_document.png"
                         ID="dtlAddNew" Width="200" Height ="200" OnClick="dtlAddNew_Click"/>
            </div>


Step 2: Data bind:

  dtlPhotos.DataSource = EdasContext.ShoppingCartSession.Current.SnapShotDocuments;
                dtlPhotos.DataBind();



Step 3: on data item bind :

 dynamic data = e.Item.DataItem;
            var img = e.Item.FindControl("imgPhoto") as Image;
            if (img != null)
            {
                img.ImageUrl = "data:image/jpg;base64," + Convert.ToBase64String(data.ImgStream);
            }


Step 4: result :


相關文章