Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

FREE 12 month online training for ASP.NET & MS Expression Studio and a Free copy of MS Expression Web with Windows Server Purchase
How to Display Images in DataList Control using ASP.Net 2.0

Author: Faraz
Download Source Code : 264_ImageUpload.zip

In this article I will try to explain you the technique of displaying images in DataListControl using ASP.Net 2.0.

Often developing a Web Application you need to provide facility to your visitors to upload file or images on your site. For example, you are developing a web application like community sites and you want to allow user to upload their photos in their profiles. To perform this kind of task you need know how file upload system works in ASP.Net 2.0 and how you can display images on the browser using image control.

 

Here in this article I will show you the technique of handling this kind of situations. All you need to do is, place three controls on your browser that are FileUpload, Button, DataList Control. Code for your web form will be look like:

 

<asp:FileUpload ID="fuOne" runat="server" /> 

 

<asp:Button ID="cmdUpload" runat="server" Text="Upload" /><br />

 

<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%" CellPadding="2" CellSpacing="0">

 <ItemTemplate>

  <img src='<%# Eval("FullName") %>' style="border:1px solid gray;" />

 </ItemTemplate>

</asp:DataList>

In DataList control notice that I have use the Image control that further uses the Eval function. This function evaluates an expression and returns the result. Here it will return the full path of the file. Now lets see how the code behind work in the success of this application. First add the code in Page_load event:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

      LoadDataList()

End Sub

Here you will see the call of a procedure the task of this procedure is to load file from the saved location and display it on your browser:

Private Sub LoadDataList()

 Dim imagesFolder As String = MapPath("PostedImages")

 Dim objDI As New DirectoryInfo(imagesFolder)

 dlImages.DataSource = objDI.GetFiles()

 dlImages.DataBind()

End Sub

In this procedure I have performed three tasks. First one is save path of the Image folder, second is create a DirectoryInfo object and store the ImageFolder path in this object and finally getting files from the folders using GetFile Method I have bind the data with DataList Control. Now the last but not least thing you have to do is upload images from user side and store it on your server:

Protected Sub cmdUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdUpload.Click

 

If Not fuOne.PostedFile Is Nothing Then

 fuOne.PostedFile.SaveAs(MapPath("PostedImages") & "\" & Path.GetFileName(fuOne.PostedFile.FileName))

End If

 

End Sub

Article Comments
Dear Sir
I am new to asp.net and I am trying to build a shopping cart. For that I want to use a treeview and a datalist. The datalist contains 2 labels, one for product name , one for Description and a image box, for displaying image. The image is saved in a access database in the table named Product and field name is Image.
All i want is when the user clicks the treeview node, the details will come from the database and will be displayed in the datalist.
I am not being able to do anything with the datalist.
Can you please help me?
Thanking you in advance.
Regards
Arunendra

Posted on 12/6/2006 3:02:16 AM by Arunendra Chakraborty

respected sir ,
I am teena from india. I am a web developer in .net. I want to know how to retrieve images from data base to our datalist and data grid.and one more question that is can we change the view of datagrid accordin to us.
thanks sir
regards
teena thapa

Posted on 12/27/2007 3:10:40 AM by Teena Thapa

really this article help me a lot. plz give me code in c# the technique of displaying images in DataListControl using ASP.Net 2.0.

Posted on 3/12/2008 6:09:58 AM by uma

Code is Excellent but iwant the same code in C#. Can U send me.

Posted on 3/20/2008 5:47:37 AM by Raghavendra

this is very good side. Please try more readble it so that

Posted on 4/25/2008 8:16:30 AM by amit

i dont know what is DirectoryInfo object .
i cannot find that. please help. if any other object is there.

Posted on 4/29/2008 1:47:09 AM by mansi

I am using the above code to upload an image. but I have getting 2 errors in the above code i.e. DirectoryInfo and path are not declared earlier.

Can you help me.

Posted on 5/7/2008 6:26:30 AM by Manish Manglik

Hello Sir,
the code above is great...
i can upload images to the folder but i can't display them, it is showing a small x sign.
Please help...

Posted on 6/16/2008 2:38:31 PM by Nabil

Hi all,

when i upload images, i save file not under the root folder. Ex: my app in C:\inetpub\wwwroot\MyApp\ and Images upload folder in C:\MyImages.
Please tell me: how to Display Images in DataList?
Thank you very much.

Posted on 6/26/2008 4:59:17 AM by khoadd

i want upload images from fileupload in my images folder in my apllication pls send me the code in c#.

Posted on 8/23/2008 2:37:35 AM by shailesh

how to bind image in datalist can some one help me out in this regard

Posted on 11/14/2008 1:12:13 AM by susheel

hi sir
i am manikyaprabhu
how to display a image to data view

Posted on 11/25/2008 1:08:07 AM by manikyaprabhuu

Hi Sir,
This code is very good, but one more extra feature like display the description about the images respectively. right now we are displaying only image.

Posted on 11/21/2009 2:37:48 PM by NarasimhaRao

Thank you so much for this code

Posted on 11/27/2009 1:29:48 AM by M Prasanna Kumar

Hello Sir,

This code is very hepful for me

Posted on 12/8/2009 3:03:10 AM by Salini

thank you sir i helped lot of solution.

Posted on 12/21/2009 5:41:59 AM by M Prasanna Kumar

I downloaded the code, it shows your images, but tried to "Browse", Upload into your Images directory, worked. Restarted the browser and my picture displayed as "Red X") the image is in that directory, converted to gif was jpg still doesn't work, any idesa?

Posted on 12/21/2009 5:00:50 PM by Mike

Hi Mike,

There can be problem with image path and also directory rights problem.

Can you share your code with me so that i can look into it.

Thanks

Posted on 12/22/2009 4:02:02 AM by zunnair

You seemed to have missed the most integral part of this code, the Eval('') function.


Ian

Posted on 12/23/2009 3:35:54 PM by Ian

respected sir ,
I am Shyjith, I am a web developer in C#.net. I want to know how to retrieve images from data base to datalist control

Posted on 1/12/2010 4:26:24 AM by Shyjith

sir,I will grateful if you suggest how images displaying into datalist
without going to database.if some images stored into any file/folder.

Posted on 2/1/2010 3:33:48 PM by satyendra kr

sir,
i want to display the image details on left of the image..
But in datagrid it is displayed column wise and in detail view its displayed row wise....
plz plz do help....

Posted on 3/1/2010 2:45:09 AM by sakina

respected sir ,
I am ajufaaz from india. I am a web developer in .net. I want to know how to retrieve images from data base to our datalist and data grid.and one more question that is can we change the view of datagrid accordin to us.
thanks sir
regards
ajufaaz

Posted on 3/30/2010 1:36:46 AM by ajmalfaaz

sir
coding is good but i required in c# displaying in image control in

Posted on 4/1/2010 7:35:29 AM by Suranjan

sir aap k code may ek error aa rahi hai kiya aap uss k solution mujhe baatye ge

may nay yahi code paste kiya hai but wo ..... fuOne.PostedFile.SaveAs(MapPath("PostedImages") & "\" & Path.GetFileName(fuOne.PostedFile.FileName))..... is line may error de raha hai ....... Error hai "path is not declare "

plz solve the problem

its urgent

Posted on 4/23/2010 12:24:51 AM by swati

Sir,I make a website of a institute and in this i also print the student details . so sir i want to know that how i list the student details with his photo.

Posted on 4/25/2010 3:05:27 AM by Arvind

Hello Sir,
the code above is great...
i can upload images to the folder but i can't display them, it is showing nothing.
Please help...

Posted on 5/4/2010 2:08:19 AM by Zakir Qamar

that was great sir, it helped me a lot especially at my work, thanks a lot, please keep sending useful articles, (,'')...

Posted on 5/5/2010 10:45:34 PM by bubby

Dear Sirs,

I am student from India and as always want spoon fed so please send me code and do homework for me.

Posted on 6/12/2010 6:34:17 PM by Ahknahd

respected sir ,
I am venky from india. I am a web developer in .net. I want to know how to retrieve images from data base to our datalist and data grid.and one more question that is can we change the view of datagrid accordin to us.
thanks sir
regards

Posted on 11/10/2010 6:26:53 AM by venkatesh

i want to display images with some text. 1 image should be right with its content left and 2 image should be left with its content right and viseversa.which control to be used....
plz send me the code ..........

Posted on 11/22/2010 2:23:51 AM by aakash

respected sir ,
I am Kartik from india. I am a web developer in .net. I want to know how to retrieve images from data base to our datalist and data grid.and one more question that is can we change the view of datagrid accordin to us.
thanks sir
regards

Posted on 11/29/2010 4:17:46 AM by Kansagra Kartik

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Using ViewState in ASP.Net 2.0 Mobile Controls

Disclaimer - Privacy
© 2002-2014 DevASP.net