Grid view not displaying Image

1k views Asked by At

I am working with ASP.net / C#. I am using a DB that will store image "path" in a table within a column called "ImagePathR" I have followed this Youtube video and the image in the gridview does not diplay. Everthing is find. https://www.youtube.com/watch?v=PS-EGL6Qe8o

Here is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inherits="IAS.Warehouse.Image" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
    .tablesearch {
        width: 606px;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
   <table class="tablesearch">
   <tr>
            <td class="lbltitle">Image Name:</td>

            <td><asp:TextBox ID="txtWID" runat="server" Width="208px">    </asp:TextBox></td>
            <td></td>
            <td></td>


        </tr>

   <tr>
            <td class="lbltitle">Upload:</td>

            <td>
                <asp:FileUpload ID="FileUpload1" runat="server" />
            </td>
            <td></td>
            <td></td>


        </tr>

   <tr>


            <td>
                <asp:Button ID="Button1" runat="server" Text="Upload Image"     OnClick="Button1_Click" />
                <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Refresh" />
            </td>
            <td></td>
            <td></td>


        </tr>
   <tr>
       <td></td>
   </tr>
   <tr>

           <td class="lbltitle">
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </td>

   </tr>
   </table>
</div>
    <asp:GridView ID="GridView1" runat="server" CellPadding="4"     EnableModelValidation="True" ForeColor="#333333" GridLines="None" Height="307px" Width="378px" AutoGenerateColumns="False">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <Columns>


             <asp:TemplateField HeaderText="Image">
                 <ItemTemplate>
                       <asp:Image ID ="Img" runat="server" Height="100" Width="100"   ImageUrl='<%#Eval("ImagePathR")%>'  />
                 </ItemTemplate>
             </asp:TemplateField>



        </Columns>
    </asp:GridView>
</form>





</body>
</html>

Here is my back code:

      using System;
      using System.Collections.Generic;

      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;

      using System.Data.SqlClient;
      using System.Data;

      namespace IAS.Warehouse
      {
          public partial class Image : System.Web.UI.Page
          {

    SqlConnection con = new SqlConnection("Data Source=ASUS;Initial           Catalog=lktec;Integrated Security=True");




    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            int NewSysnoPI;

            DatabaseSQL.DataSet1TableAdapters.ProductImageTableAdapter GetMAXValueFromProductImageQuery;
            GetMAXValueFromProductImageQuery = new DatabaseSQL.DataSet1TableAdapters.ProductImageTableAdapter();

            if (GetMAXValueFromProductImageQuery.GetMAXValueFromProductImage() == null)
            {
                NewSysnoPI = 0;
            }
            else
            {
                NewSysnoPI = (int)GetMAXValueFromProductImageQuery.GetMAXValueFromProductImage();
            }

            NewSysnoPI = NewSysnoPI + 1;

          //  DatabaseSQL.DataSet1TableAdapters.ProductImageTableAdapter InsertProductImageQuery;
          //  InsertProductImageQuery = new DatabaseSQL.DataSet1TableAdapters.ProductImageTableAdapter();

            //save image into the database

            string str = FileUpload1.FileName;
            FileUpload1.PostedFile.SaveAs(Server.MapPath(".") + "//uploads//" + str);
            string path = "~//uploads//" + str.ToString();


           // InsertProductImageQuery.InsertProductImage(null, null, txtWID.Text, null, null, null, null, NewSysnoPI, path);






            con.Open();

            SqlCommand cmd = new SqlCommand("INSERT INTO ProductImage VALUES (' "+ null + "','" + null + "','" + txtWID.Text + "','" + 
                                                                                   null + "','" + null + "','" + null + "','" + null + 
                                                                                   "','" + NewSysnoPI + "','" + path + "')", con);

            cmd.ExecuteNonQuery();
            con.Close();

            Label1.Text = "Image Uploaded Successfully";


            //display image in gridview


            SqlDataAdapter da = new SqlDataAdapter("select * from ProductImage", con);

            DataTable dt = new DataTable();
            da.Fill(dt);
            GridView1.DataSource = dt;
            DataBind();


        }
        else
        {
            Label1.Text = "Plz, Upload your Image";
        }
    }

    protected void Button2_Click(object sender, EventArgs e)
    {

        SqlDataAdapter da = new SqlDataAdapter("select ImagePathR from ProductImage", con);

        DataTable dt = new DataTable();
        da.Fill(dt);
        GridView1.DataSource = dt;
        DataBind();

              }
          }
      }

In my table this is how is shows the information:

   ImageName       ImagePathR
    1               ~//uploads//Zuljin.jpg
    2               ~//uploads//th5N9C41HM.jpg

Furthermore, I have a folder within my solution called uploads. I have tried internet explored and google chrome. it gives me the same results.

Here is the original source code from the browser:

     <!DOCTYPE html>

     <html xmlns="http://www.w3.org/1999/xhtml">
     <head><title>

     </title>
         <style type="text/css">
             .tablesearch {
                 width: 606px;
             }
         </style>
     </head>
     <body>
         <form name="form1" method="post" action="Image.aspx" id="form1"          enctype="multipart/form-data">
     <div>
     <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"          value="/wEPDwUJODU4MjIyNTg3D2QWAgIDDxYCHgdlbmN0eXBlBRNtdWx0aXBhcnQvZm9ybS1kYXRhFgQCCQ8PFgIeBFRleHQFG0ltYWdlIFVwbG9hZGVkIFN1Y2Nlc3NmdWxseWRkAgsPPCsADQEADxYEHgtfIURhdGFCb3VuZGceC18hSXRlbUNvdW50AgFkFgJmD2QWBAIBD2QWBmYPZBYCAgEPDxYCHwEFBDFxMndkZAIBD2QWAgIBDw8WAh8BBQExZGQCAg9kFgICAQ8PFgIeCEltYWdlVXJsBRd+Ly91cGxvYWRzLy9Qcm9kdWN0LmpwZ2RkAgIPDxYCHgdWaXNpYmxlaGRkGAEFCUdyaWRWaWV3MQ88KwAKAQgCAWQrFQLdRt1K7PvYP9D4P7O4oCzRcA==" />
     </div>

     <div>

        <input type="hidden" name="__VIEWSTATEGENERATOR"          id="__VIEWSTATEGENERATOR" value="4C987F98" />
        <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"          value="/wEWBALFvaOFAwKf+66eAQKM54rGBgK7q7GGCD3pItfOKAbKVxg88oNNw6jtNOtQ" />
     </div>
         <div>
        <table class="tablesearch">
            <tr>
                    <td class="lbltitle">Image Name:</td>

                    <td><input name="txtWID" type="text" value="1q2w"          id="txtWID" style="width:208px;" /></td>
                     <td></td>
                     <td></td>


                </tr>

            <tr>
            <td class="lbltitle">Upload:</td>

            <td>
                <input type="file" name="FileUpload1" id="FileUpload1" />
            </td>
            <td></td>
            <td></td>


        </tr>

            <tr>


            <td>
                <input type="submit" name="Button1" value="Upload Image" id="Button1" />
                <input type="submit" name="Button2" value="Refresh" id="Button2" />
            </td>
            <td></td>
            <td></td>


        </tr>
   <tr>
       <td></td>
   </tr>
   <tr>

           <td class="lbltitle">
                <span id="Label1">Image Uploaded Successfully</span>
            </td>

   </tr>
   </table>
         </div>
    <div>
         <table cellspacing="0" cellpadding="4" border="0" id="GridView1"          style="color:#333333;height:307px;width:378px;border-collapse:collapse;">
    <tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
        <th scope="col">name</th><th scope="col">ID</th><th scope="col">Image</th>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
        <td>
                    <span id="GridView1_ctl02_lb1">1q2w</span>
                </td><td>
                    <span id="GridView1_ctl02_lb2">1</span>
                </td><td>
                       <img id="GridView1_ctl02_Img" src="../uploads/Product.jpg" style="border-width:0px;" />
                 </td>
            </tr>
        </table>
     </div>
         </form>
     </body>
     </html>

enter image description here

enter image description here

1

There are 1 answers

4
Yuri On

image path should not be ~//uploads//Zuljin.jpg it should be ~/uploads/Zuljin.jpg. Remove double / in your code and it will work

string str = FileUpload1.FileName;
        FileUpload1.PostedFile.SaveAs(Server.MapPath(".") + "/uploads/" + str);
        string path = "~/uploads/" + str.ToString();