Displaying images in a web form (C#)

[steve1_rm]

Hello

I have always had a problem with this and have never managed to get it right.

I am creating a shopping application and have many pictures that l want to display in a web form inside a datagrid.
I want to have the path of the picture in the database (SQL Server).

Someone told me to have all the pictures a folder called images, which l have done. But where about do l put this folder.

I never been able to get this right, can someone show me step by step on how to do this. I only need the bare minium code and help.

Many thanks in advance,

Steve

[Cipher]

I think its too easy, first you will create a folder called "images" and in create column in database called images also, you'll save your images path in database like this "images/image1", "images/image2", .. and so on.
Then here's how you can show your images in datagrid
<asp:DataGrid ID="DataGrid1" AutoGenerateColumns="False">
<Columns>
<TemplateColumn>
<ItemTemplate>
<img src='<%# DataBinder.Eval(Container, "DataItem.Images") %>'>
</ItemTemplate>
</TemplateColumn>
</Columns>
</asp:DataGrid>
Hope this helps :)

[steve1_rm]

Hello

THaNks for the reply. just a few questions where abouts do l create the folder? Do l need to adjust any properties on the datagrid?

can you explain this line for me:
<img src='<%# DataBinder.Eval(Container, "DataItem.Images") %>'>

many thanks for your help in advance

steve

[Cipher]

well the images folder you'll create in you web directory where you keep your web pages, and this line you write in the HTML Code of the datagrid, i assume you know how to create a datagrid and bind to.

[Cipher]

look at this exapmle (http://www.webdeveloper.com/forum/showpost.php?p=466021&postcount=10) it may helps, but just the portion of the VB code where i bind to the datagrid

[steve1_rm]

Hello Cipher,

Thanks for all your help my l am still having problems.
This is my code in the HTML

<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<img src='<%# DataBinder.Eval(Container.DataItem, "Images")%>'>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>

I had top make a change container.dataitem, i kept on getting a error message. I have placed my image folder in the right place.

This is my code for connecting to the database:


private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter();
try
{
string cnnStr = "Server=.; Database=HolidayPhotos; integrated security=true";
SqlConnection cnn = new SqlConnection();
cnn.ConnectionString = cnnStr;
cnn.Open();

SqlCommand cmd = cnn.CreateCommand();
cmd.CommandType = CommandType.Text;
cmd.CommandText = "SELECT * FROM MyPhotos";

da.SelectCommand = cmd;
da.Fill(ds,"MyPhotos");

this.DataGrid1.DataSource = ds;
this.DataGrid1.DataMember = "MyPhotos";
this.DataGrid1.DataBind();
}
catch ( SqlException ex )
{
Debug.WriteLine(ex.Message);
}
catch ( Exception ex )
{
Debug.WriteLine(ex.Message);
}
}


I in the auto format on the datagrid l added a template column.
My database is called HolidayPictures, the table is called MyPhotos.
Columns are PhotoID, Photo.
In the photo column i have for example "Images/pic1"

I would me most grateful if you can understand what has gone wrong. I know i am very close to finding a solution.

Many thanks for your time.

Steve

[Cipher]

<img src='<%# DataBinder.Eval(Container.DataItem, "Images")%>'>

I think this line is very wrong, try this one as it is.
<img src='<%# DataBinder.Eval(Container, "DataItem.Photo")%>'>

[steve1_rm]

Hello Cipher,

Thanks for all your help.

I think this might be a stupid question. I and l think l could understand my problem a lot more if understood this line does.

<img src='<%# DataBinder.Eval(Container, "DataItem.Photo")%>'>

Thanks for your help,

Steve

[Cipher]

Well i'm not very good to explain this stuff, but its to take item from the DataSource, "ex:DataBase", and assign it to any control you want.
This example takes the value of Photo column and assign it to the <img> tag
so if you have in your photo column value like this "photos/photo1.jpg"
it will be assigned like this to img <img src='photos/photo1.jpg'>
Hope you understood anything! :D

[sirpelidor]

<img src='<%# DataBinder.Eval(Container, "DataItem.Photo")%>'>


1) <img xxx> is html tag recongized by aspx
2) src, is one of the attribute from <img> that tells html where your source is located. (i.e: c:\img\pic1.jpeg)
3) <%# ..... %> is a "single value data binding" expression that reconigzed by aspx.
3a) single value data binding is just a diff approach to dynamic text (i.e. <%=blah%> from asp or jsp)
3b) when call DataBind() method for the page, text will be replaced with the value from ur code-behind
4) DataBinder.Eval is a static Eval() method from System.Web.UI.DataBinder class. it takes 2 parameters: data source, and the field or the property you wanted to display from that source.
4a) u use Container.DataItem property to specify the data source that's boun to the current control (in ur code-behind, you did this.DataBind();
4b) DataItem.Photo, the Photo is the name of your col off your DataSet, and your DataSet is (or is not) off your sql table.

[Cipher]

woow, i'd never say better, Thank you sirpelidor :p

[steve1_rm]

Hello,

Thanks for your help guys.

I had to make some changes but managed to solve the problem.
In my database in the column l have Images/picture1.jpg Images/picture2.jpg without the double quotes. Does work with double quotes.


<Columns>
<asp:BoundColumn DataField="PhotoID" HeaderText="ID" >
</asp:BoundColumn>
<asp:TemplateColumn>
<ItemTemplate>
<img src='<%# DataBinder.Eval(Container, "DataItem.Photo") %>'>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>


There is one question, if l wanted to click on picture to display another webform, how would l have to change the code to do that. If you can't answer that question, don't worry. I think you have helped me enough all ready.

Many thanks for you help,

Steve