Click here to Skip to main content
12,953,263 members (47,336 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


3 bookmarked
Posted 13 Sep 2010

DataList control for beginner

, 18 Sep 2010 CPOL
Rate this:
Please Sign up or sign in to vote.

The DataList control is, like the Repeater control, used to display a repeated list of items that are bound to the control. However, the DataList control adds a table around the data items by default. The DataList control may be bound to a database table, an XML file, or another list of items

Example: DataList to Display Pictures


  1. Create a simple ASP.NET 2.0 Web Form page named StudentDetails.aspx

  2. Create a folder in your site’s root and attach a collection from your favorite’s images on it as shown in the figure.


  4. Drag and Drop to a DataList control from the Data section of the Toolbox to the content area

  5. Open its smart task panel, as shown in Figure, and click Choose Data Source. Click New Data Source for the wizard to create a data source control.


  7. Select Database as the source and leave the name as SqlDataSource1.

  8. Use the wildcard (*) to select all fields from Student Table.

  9. Run the page in your browser to test it, noticing that you don’t have the pictures yet as shown in the figure. Close the browser.


  11. Now you need to actually get the pictures displayed. Be sure your browser is closed and then in Design View, select the DataList control, open its smart task panel, and click Edit Templates to see a screen similar to the Figure. Select and then delete the line that has the text PictureURL and a Label control.


  13. From the Toolbox, drag an Image control into the template just below the Picture ID field. Feel free to add a carriage return (by pressing Enter) to get the image control on its own line. On the Image control’s smart task panel, click Edit Data Bindings, and select the property ImageURL to bind to the field PictureURL, as shown in the Figure.


  15. Click ok

  16. To display your data in horizontal state, set these properties as shown for DataList control.


  18. Run your page and you will see result satisfy you.


In imgurl field in database, I am passing the path of image as full path like this:

If I am passing the name of image only and try to run the sample, we will not find image displayed in the control, so to solve this case you need to change the following in the source code :

<asp:image id="Image1" runat="server"
ImageUrl=’<%# Eval("imgurl ", "~/Images/{0}) />


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ahmed R El Bohoty
Web Developer ITeShare
Egypt Egypt
I am interested in Software architecture, Requirements Engineering and coding. I am MCP ,SCJP,MCTs,MCPD, Brainbench.

You may also be interested in...


Comments and Discussions

GeneralReason for my vote of 5 Clear and Simple Pin
Honeyboy_2023-Sep-10 3:00
memberHoneyboy_2023-Sep-10 3:00 
GeneralThanks Very Much Pin
Honeyboy_2023-Sep-10 3:00
memberHoneyboy_2023-Sep-10 3:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170525.1 | Last Updated 18 Sep 2010
Article Copyright 2010 by Ahmed R El Bohoty
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid