Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The ASP.NET Framework includes many other visual controls that are data-aware. They can be used to display data using a format other than an HTML table. In this demonstration, I'll show you how to use a control called the DataList that allows you to create a template for how you want each item in a dataset to be displayed. For this demonstration I'll use the file Publishers.aspx. I'll open the file and show you that it currently doesn't have any data controls in it. There is no SqlDataSource and there is no GridView. I'll look at the file in Design View. I'll place the cursor at the end of the line that says "This page will show a list of Publishers" and I'll press Enter to create a new paragraph.
Then I'll go to the Database Explorer and I'll drag in the publishers table from the list of Tables and place it within the paragraph. You'll see that that creates both a GridView and an SqlDataSource. For this demonstration I don't actually need the GridView. So I'll click on it and then press Delete. The purpose of dragging in the table was to create that SqlDataSource component that's already populated with the required SQL statements to get the data from the server. Now, I'll take a look a generated source code. You'll see that the SqlDataSource component is created within the visual presentation of the page.
This really isn't necessary. The SqlDataSource component doesn't create any visual output. It doesn't actually generate any HTML. The only requirement is that it must be placed within the ASP.NET form that runs at the server. So, I'm going to click on this little tree icon to collapse the SqlDataSource object. Then I'll click at the beginning and drag down one line. Then I'll cut it to the clipboard by pressing Ctrl+X. Then I'll move the cursor below the paragraph, but still within the form. I'll place the cursor at the beginning of the line and then I'll paste by pressing Ctrl+V.
You'll see that even though the SqlDataSource element was collapsed when I cut it to the clipboard, when I pasted in, its code is still intact. I'll go back up to the Paragraph tag and I'm just reformatting the code a little bit to make it a little bit easier to read. Then I'll look in Design View again. So now the SqlDataSource component, which again doesn't generate any HTML, is placed outside the visual presentation. Now, I'm going to add a DataList component. I'll go to the Toolbox, which I can find through the tabbed interface on the left, and I'll pin the Toolbox panel by clicking the Pushpin icon to make it stay on the screen. Now, I'll go to the Data category and I'll select the DataList component and I'll click-and-drag it and I'll drop it within the paragraph.
When the DataList component is first dropped in, it doesn't have any output. It's up to me to select a data source and then to start creating the template to describe how the list will present its data. I'll go to the list of tasks for the DataList component and I'll pull down the list for Choose Data Source, and you'll see that only one data source is declared SqlDataSource1 and I'll select it. Visual Web Developer reacts by creating a default template. It displays Labels and Data for each column returned in the data source. Let's take a look at the code that was generated. I'll click Source View and then press Alt+Shift+Enter to look at the source code in Full Screen and close the Output panel if necessary.
The DataList control is described with a data source ID of SqlDatasource1. That's how it's getting its data from the server. Then within a nested item template element, it describes how the data will be displayed. The item template can be a combination of literal text plus ASP.NET server controls. For each server control, you'll see a Text property. Within the Text property, a dynamic expression which consist of the < character and % and a pound sign at the beginning, which means that this a data binding expression.
And then within the binding expression you'll see a call to a function called Eval. Then within that you pass in the name of the column whose value you want to present. So within the default template, I have literal strings plus instances of the ASP.NET Label control for each column. I'm going to remove the literal string, the Label control, and the Break tag for the pub_id column. I'll select those three lines and then press Delete. I'll remove the literal string pub_name and I'll also reduce down to only one Break tag after the Label.
The result would be that at runtime ASP. NET loops over the data that's returned from the database and it will render one copy of this template for each item in the dataset. Now, I'll save my changes, go to the menu and select Debug > Start Without Debugging. You'll see when the page is displayed that it shows the list of Publishers. Notice that I never show the user the values of the primary key columns. These columns are used internally to track data and join tables at runtime. But they're values that the user shouldn't have any interest in.
Now I'll make one another change to the page. I'll close the browser. I'll go back to the Design View. I'll click into the original paragraph with the text "This page will show a list of Publishers". I'll click on the Paragraph tab to select the entire element and press Delete. I'll save my changes again. I'll run the page by selecting Debug > Start Without Debugging. There is my completed page for now showing the list of Publishers that my bookstore represents.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101355 Viewers
61 Video lessons · 88117 Viewers
71 Video lessons · 71955 Viewers
56 Video lessons · 103782 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.