Display Image links as Images from DB in GridView

StackOverflow https://stackoverflow.com/questions/17448789

  •  02-06-2022
  •  | 
  •  

Question

I have a table (3 columns sno,name,photo(links to pics on image hosting sites)) ,i am displaying the table through a gridview and this is my .cs file

    public partial class people_db_mysql : System.Web.UI.Page
    {

        String MyConString = "SERVER=localhost;" +
              "DATABASE=shortandsweet;" +
              "UID=root;" +
              "PASSWORD=;";
        protected void Page_Load(object sender, EventArgs e)
        {
            MySqlConnection conn = new MySqlConnection(MyConString);
            MySqlCommand cmd = new MySqlCommand("SELECT id as 'S.no', name as 'Name', photo as 'Photo' FROM people_details;", conn);
            conn.Open();
            DataTable dataTable = new DataTable();
            MySqlDataAdapter da = new MySqlDataAdapter(cmd);
            da.Fill(dataTable);
            GridViews1.DataSource = dataTable;
            GridViews1.DataBind();
        }

this is my .aspx file

        <%@ Page Language="C#" AutoEventWireup="true" CodeFile="people_db_mysql.aspx.cs" Inherits="people_db_mysql" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">

    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

        </div>
        <asp:GridView ID="GridViews1" runat="server" BackColor="White" 
            BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
            ForeColor="Black" GridLines="Vertical" 
            onselectedindexchanged="GridViews1_SelectedIndexChanged">
            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#CCCC99" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <RowStyle BackColor="#F7F7DE" />

            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FBFBF2" />
            <SortedAscendingHeaderStyle BackColor="#848384" />
            <SortedDescendingCellStyle BackColor="#EAEAD3" />
            <SortedDescendingHeaderStyle BackColor="#575357" />
        </asp:GridView>
        </form>
    </body>
    </html>

any help would be much appreciated .

Was it helpful?

Solution

Try this:

<asp:GridView ID="GridViews1" runat="server" BackColor="White" 
            BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
            ForeColor="Black" GridLines="Vertical" 
            onselectedindexchanged="GridViews1_SelectedIndexChanged">
<Columns>
<asp:TemplateField>
     <ItemTemplate>
     <img src='<%# Eval("Photo") %>' alt='<%# Eval("Name") %>' />
     </ItemTemplate>
     </asp:TemplateField>
</Columns>

            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#CCCC99" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <RowStyle BackColor="#F7F7DE" />

            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FBFBF2" />
            <SortedAscendingHeaderStyle BackColor="#848384" />
            <SortedDescendingCellStyle BackColor="#EAEAD3" />
            <SortedDescendingHeaderStyle BackColor="#575357" />
        </asp:GridView>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top