Display Images from Path stored in Database in ASP.Net ListView using C# and VB.Net

Last Reply one year ago By dharmendr

Posted one year ago

Hello,

I want to populate a image in listview. I have tried multiple code but it won't work.

image is saved in database while adding but when i want view that image in listview but it dosent populating. Please help me out fron this issue....

 .aspx code

<asp:ListView ID="ListViewhomepagebanner" runat="server" DataKeyNames="HomeBannerID"
    OnItemCommand="ListViewhomepagebanner_ItemCommand" OnItemDeleting="ListViewhomepagebanner_ItemDeleting">
    <LayoutTemplate>
        <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10">
            <thead>
                <tr>
                    <th data-hide="phone">
                        Banner Image
                    </th>
                    <th data-hide="phone">
                        Banner Name
                    </th>
                    <th data-hide="phone">
                        Image URL
                    </th>
                    <th data-hide="phone">
                        Action
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id="itemPlaceHolder" runat="server">
                </tr>
            </tbody>
            <tr>
                <td colspan="3">
                    <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListViewhomepagebanner"
                        PageSize="50">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                                ShowNextPageButton="false" />
                            <asp:NumericPagerField ButtonType="Link" />
                            <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false"
                                ShowPreviousPageButton="false" />
                        </Fields>
                    </asp:DataPager>
                </td>
            </tr>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <%-- <img src="<%# Eval("image")  %>"  class="img-circle"  width="32" height="32"/> --%>
                <%-- <img src="<%# ResolveUrl(string.IsNullOrEmpty(Eval("image").ToString()) ? "../img/icon.png" : ("../images/uploads/banner/bannerhomephoto/" + Eval("image")))  %>" class="img-circle"  width="32" height="32"/>
                --%>
                <img src="<%# ResolveUrl(string.IsNullOrEmpty(Eval("image").ToString()) ? "../img/icon.png" : ("images/uploads/banner/bannerhomephoto/" + Eval("image")))  %>"
                    class="img-circle" width="32" height="32" />
                <%--<asp:Image ID="Image1" runat="server" class="img-circle"  width="32" height="32" ImageUrl='<%#Eval("image")%>'/> --%>
            </td>
            <td>
                <%#Eval("title") %>
            </td>
            <td>
                <%#Eval("imgurl") %>
            </td>
            <td>
                <a href="<%# "homepage_banner.aspx?id=" + Eval("HomeBannerID") %>" class="btn-white btn btn-xs">
                    Edit</a> <span>
                        <asp:LinkButton ID="LinkButtondelete" class="btn-white btn btn-xs" runat="server"
                            CommandName="Delete" CommandArgument='<%#Eval("HomeBannerID") %>' OnClientClick="javascript:return confirm('Do you want to delete?');">Delete</asp:LinkButton></span>
            </td>
        </tr>
    </ItemTemplate>
</asp:ListView>

 .aspx.cs code

    private void FillDetails()
    {

        using (SqlConnection con = new SqlConnection(CS))
        {
            try
            {
                con.Open();
                SqlCommand cmd = con.CreateCommand();
                cmd.CommandType = CommandType.Text;
                cmd.CommandText = "select * from homepage_banner";
                cmd.ExecuteNonQuery();
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                ListViewhomepagebanner.DataSource = dt;
                ListViewhomepagebanner.DataBind();
            }
            catch (Exception ES)
            {
                Response.Write(ES.ToString());
            }
        }
    }

 i am saving image path in database

 

Posted one year ago Modified on one year ago

Hi JennyD6856,

Check this example. Now please take its reference and correct your code.

HTML

<asp:ListView ID="ListViewhomepagebanner" runat="server" DataKeyNames="HomeBannerID">
    <LayoutTemplate>
        <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10">
            <thead>
                <tr>
                    <th data-hide="phone">
                        Banner Image
                    </th>
                    <th data-hide="phone">
                        Banner Name
                    </th>
                    <th data-hide="phone">
                        Image URL
                    </th>
                    <th data-hide="phone">
                        Action
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id="itemPlaceHolder" runat="server">
                </tr>
            </tbody>
            <tr>
                <td colspan="3">
                    <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListViewhomepagebanner"
                        PageSize="50">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                                ShowNextPageButton="false" />
                            <asp:NumericPagerField ButtonType="Link" />
                            <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false"
                                ShowPreviousPageButton="false" />
                        </Fields>
                    </asp:DataPager>
                </td>
            </tr>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <img src="<%# ResolveUrl(string.IsNullOrEmpty(Eval("image").ToString()) ? "~/Images/Desert.jpg" : (Eval("image").ToString()))  %>"
                    class="img-circle" width="32" height="32" />
            </td>
            <td>
                <%#Eval("title") %>
            </td>
            <td>
                <%#Eval("imgurl") %>
            </td>
            <td>
                <a href="<%# "homepage_banner.aspx?id=" + Eval("HomeBannerID") %>" class="btn-white btn btn-xs">
                    Edit</a> <span>
                        <asp:LinkButton ID="LinkButtondelete" class="btn-white btn btn-xs" runat="server"
                            CommandName="Delete" CommandArgument='<%#Eval("HomeBannerID") %>' OnClientClick="javascript:return confirm('Do you want to delete?');">Delete</asp:LinkButton></span>
            </td>
        </tr>
    </ItemTemplate>
</asp:ListView>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        // Bind DataTable from Database.
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] { 
                        new System.Data.DataColumn("HomeBannerID", typeof(int)),
                        new System.Data.DataColumn("image", typeof(string)),
                        new System.Data.DataColumn("title",typeof(string)),
                        new System.Data.DataColumn("imgurl",typeof(string))});
        dt.Rows.Add(1, "~/Images/Chrysanthemum.jpg", "Chrysanthemum.jpg", "~/Images/Chrysanthemum.jpg");
        dt.Rows.Add(2, "~/Images/Desert.jpg", "Desert.jpg", "~/Images/Desert.jpg");
        dt.Rows.Add(3, "~/Images/Hydrangeas.jpg", "Hydrangeas.jpg", "~/Images/Hydrangeas.jpg");
        dt.Rows.Add(4, "~/Images/Jellyfish.jpg", "Jellyfish.jpg", "~/Images/Jellyfish.jpg");
        ListViewhomepagebanner.DataSource = dt;
        ListViewhomepagebanner.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {New System.Data.DataColumn("HomeBannerID", GetType(Integer)), New System.Data.DataColumn("image", GetType(String)), New System.Data.DataColumn("title", GetType(String)), New System.Data.DataColumn("imgurl", GetType(String))})
        dt.Rows.Add(1, "~/Images/Chrysanthemum.jpg", "Chrysanthemum.jpg", "~/Images/Chrysanthemum.jpg")
        dt.Rows.Add(2, "~/Images/Desert.jpg", "Desert.jpg", "~/Images/Desert.jpg")
        dt.Rows.Add(3, "~/Images/Hydrangeas.jpg", "Hydrangeas.jpg", "~/Images/Hydrangeas.jpg")
        dt.Rows.Add(4, "~/Images/Jellyfish.jpg", "Jellyfish.jpg", "~/Images/Jellyfish.jpg")
        ListViewhomepagebanner.DataSource = dt
        ListViewhomepagebanner.DataBind()
    End If
End Sub

Screenshot