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>
image path should not be ~//uploads//Zuljin.jpg it should be ~/uploads/Zuljin.jpg. Remove double / in your code and it will work