Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the primary reasons organizations use ASP.NET or other application servers like ColdFusion to host their websites is to allow integration with dynamic data stored in a server-side database. In the videos in this chapter, I'll describe how to use various ASP.NET server controls including the GridView and others that know how to bind to the server-side data and display that data in dynamically generated HTML. For all of the videos and demonstrations in this chapter, I'll be using a database hosted by SQL Server. In a previous chapter of the video series, I described how to install SQL Server and how to import the database that I'll be using.
If you haven't gone through that chapter first and you are following along on your own system, you will want to go back to that chapter, walk through the installation and configuration process and make sure that you have set up the Bookstore database. If you are not sure whether you have done those steps, go into Visual Web Developer to the Database Explorer panel. In the Default Window Setup, you can find the Database Explorer panel in the tabbed region on the right, and then make sure that you have a connection to a database called mybookstore. The name of the connection will differ depending on the name of your computer.
Mine is named davidmbpro, but the name of the database and the name of the connection other than that should look the same. And also make sure that you can see the list of Tables. You should see tables named authors, publishers, titles and users, and again if you can't see that, make sure you have gone back to the previous chapter and walk through those exercises. If you are seeing the data correctly, then you are ready to open up the website. Go to the menu and select File > Open Web Site. Choose the folder DynamicData under Ch07DynamicData and click Open. The Solution Explorer panel should open immediately. Then open the file Default.aspx and run the file in the browser by selecting Debug > Start Without Debugging or pressing Ctrl+F5.
So this is what the page looks like initially and if you click on each of the links, you will see that each of the pages has an item that says what will be shown eventually. Now close the page and return to Visual Web Developer. Close the file Default.aspx and then open the file Authors.aspx and look at the page in Design View by clicking the Design button under the Design region. In this demonstration, I'm going to add a GridView control that displays dynamic data from the authors table in the server-side database. I'll place the cursor in the paragraph after the text, this page will show a list of authors and I'll press Enter to create a new paragraph. Then I'll go back to the Database Explorer panel, I'll locate the authors table and I'll drag the authors table into the paragraph, making sure to drop it in the rectangular region shown on the screen. It takes just a few moments to display the GridView.
Now I'm going to move the cursor over the handle on the right border of the GridView and I'll click and drag it out, so it's a bit wider. Then I'll go to the paragraph above, I'll click the header that has the name of the tag P and that selects the entire paragraph and then I'll press Delete to delete that content. I will save my changes by pressing Ctrl+ S, I'll go to the menu and select Debug > Start Without Debugging and you will see when the page is displayed, I'm retrieving and displaying the data in the GridView. So that's the basics of how you get data from the database server to the page.
Now let's look at the code that was generated. Go to Source View and then select View > Full Screen or press Shift +Alt+Enter and take a look at the code that was generated when I dragged and dropped. Within the Paragraph tag you will first see the GridView Control. Critical pieces that you must see are first of all runat = "server". This guarantees that it's treated as a server-side control. And then a number of other settings such as AutoGenerateColumns, DataKeyNames and so on. There is a Columns element in the middle each with something called asp:BoundField. Each instance of the asp:BoundField control declares a particular column that will be displayed in the GridView.
Below the GridView you will see the SqlDataSource, this is how you define the actual connection and I'm going to modify the data source, in particular the Select command. Notice that the Select command, which is shown right here, starts with SELECT [au_id] and so on. I am going to scroll sideways to the end. I'll click right after the end of the SQL statement but within the quotes, and I'll add an Order By clause and then in brackets I'll add au_lname and then a closing bracket. You will notice in the generated code that all columns are wrapped in these bracket characters.
SQL does not require them but in a condition where a name of the column matches a reserved SQL word, the brackets ensure that this phrase is treated as the column or the table name. Now I'll save the changes and I'll run the page again and you will see that this time the authors are displayed in alphabetical order by last name. Finally, I'll remove one column, you will see that the au_id is shown on the left and because that's a primary key column you don't want to display it.
So I'll close the browser and return to the code and then I'll scroll back up the GridView and I'll remove au_id from the list of columns. I'll select just that BoundField and press Delete. I'll save with Ctrl+S and run the page without debugging again. And now I'll see just the columns. Now in others videos in the chapter, I'll show you how to affect the appearance of the GridView and also how to modify the header text that appears at the top of each column.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105465 Viewers
56 Video lessons · 117145 Viewers
71 Video lessons · 86370 Viewers
131 Video lessons · 41282 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.