Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In a dynamic data driven website, it's sometimes useful to be able to create printable reports, web pages that are able to be printed elegantly, but don't include all of the graphics and additional components that are needed on the screen. There are no particular components you use in ASP.NET for this purpose. For example, there is no built-in report class. Instead you use the existing web form controls such as the GridView control to present the data. And then combine those controls with some creative use of Cascading Style Sheets to modify the way the data is presented.
For the demonstrations in this chapter I'll use a website that's a part of the Exercise Files. Go to the menu and select File > Open Web Site, select the Reports folder under Ch10Reports and click Open. And then open the file JoinedData.aspx. Look at the file in Design view, you will see that it presents the website's banner graphic and menu, but little else. The first step to creating a report is to start with a GridView and an SqlDataSource. I'll go to the Database Explorer and then from there locate the titles table and then I'll drag the titles table and place it into the page. As always dragging the table into the page results in creating a GridView and a linked SqlDataSource. Now I'm going to modify the SqlDataSource by modifying its Select command. The Select command is a query, if you know your SQL you can hand code the query, but if you are fairly new to SQL you can use Visual Web Developer's Visuals Query Tool.
With the SqlDataSource object selected, I'll go to the Properties panel and double-click its header to make it float and then I'll drag it out, so I can see the properties more easily. Then I'll locate the SelectQuery property. The SelectQuery is the query that will be executed to retrieve data for presentation on the page. I'll click the button next to SelectQuery and that opens the Command and Parameter Editor. Now once again if you know your SQL you can hand code it here, but I'll use the Query Builder by clicking that button. When the Query Builder opens, it opens in a small window. I'll click in the lower corner and drag it out to full screen, so I can see more of its information. Now I would like to join the titles table with two other tables in the database, the Publishers and the Author's Information.
I will go to the top pane of the Query Builder, right-click and select Add Table and I'll choose Publishers and click Add. Then with the Add Table dialog still open I'll click Authors and click Add again. Then I'll close the Add Table dialog. Notice that when you add these tables, links are created automatically that's because the names of the columns in the tables are identical. So the pub_id column in publishers matches pub_id in titles and so on. Now I'm going to modify the columns that I want to display from the titles table. Notice that by default all of the columns are being displayed. I'm going to deselect all the key columns, title_id, pub_id and au_id. I'll definitely show the title and the price, but then I'll deselect the pubdate and notes.
Next I'll add the author. For the moment I'm only going to add the author's last name and then I'll add the publisher's name as well. I'll execute the query and show what the data looks like so far. The return data shows up in the bottom pane and I can see that I'm retrieving those four columns all joined together. Now I'm also going to sort the data. I'll go to the title row and then in the Sort Type column I'll choose Ascending. This will cause the data to be returned in ascending order by title. I'll execute the query again, check the results and sure enough it's in alphabetical order by title.
Finally, I'm going to take two of the columns from the authors table and join them together to create a single column with both values. Instead of returning the authors name as two columns, I'm going to return it for reporting purposes as a single column. I'll start in the first column, the one with a header of column, and I'll change the expression like this. First I'll drag this out so I can see more of it and then I'll start the expression with au_fname + ' ' + au_lname. This means that I'm using the value from the au_fname column plus a literal space wrapped in the single quote characters plus the au_lname column.
It's critical that you use single quotes in this context and not doubles. Then I'll tab over to the Alias column. I'm going to name this column fullName. So the result will be that when I get the data back from the server it will be exposed as a single column with the author's full name. Now I'll click Execute Query again and sure enough the fullName column contains the author's full name. So that's my query. Now I'll click OK and that takes me back to the Command and Parameter Editor where I can see the finished Select command. Then I'll click OK and that takes me back to the Properties panel.
Now I've finished the work on the SqlDataSource object. The next step is to modify the GridView. I'll click on the GridView. I'll open the task list and choose Refresh Schema. This prompt is telling me that I'm about to regenerate the column fields for the GridView and it will result into leading any changes I might have already made to existing column fields. That's okay. I didn't customize the GridView yet on purpose so I'll click Yes and then I'll take a look at the GridView and I'll see that in fact it is displaying the actual data I asked for. Now I'll save my changes pressing Ctrl+S and then preview the page in the browser by selecting Debug > Start Without Debugging and there is the result, the actual data displayed on the screen.
Now before I complete the video, I'll show you a couple of standard formatting tricks you can use. I'll close the browser and return to the GridView, open its task list and select Edit Columns. First I'll set the Header Text, I'll click on each field, go to the Header Text property and change it to a value that I want the user to see at the top of the column. For Title and price I'll simply uppercase the first character. For fullName I'll split that up into two words of Full Name. And for pub_name I'll replace that with the string of Publisher.
And I'll click OK. I will also deal with the price. When I run the page right now I see that the price is displayed in a raw numeric format. I'm going to fix that by applying currency formatting. I'll close the browser and go back to Visual Web Developer. Once again I'll edit the columns and I'll select the price. I'll go to the data section of the BoundField properties to the DataFormatString and I'll use the following format. I'll start with the brace, then zero meaning that I want to format the first value, the only one in this context, then a colon and an uppercase C for currency. I'll click OK and then I'll save and run the page again. And you will see this time that the numeric value is formatted as a currency value.
In the last step I'll apply some formatting, I'll go to the GridView, I'll select Auto Format and I'll choose one of the formats. I'm going to choose this one, Classic and click OK, and that applies Classic formatting to the GridView with a bluish background, white foreground for the heading and pretty standard text in the middle and alternating row colors. I will run the page and there is the result presenting joined data in a friendly, easy to look at HTML table with alternating row colors and a colorful presentation.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101182 Viewers
61 Video lessons · 87935 Viewers
71 Video lessons · 71827 Viewers
56 Video lessons · 103675 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.