Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you have created an ASP.NET page that presents data, you can then start refactoring the page for use as a printed document. Refactoring a page for print has a couple of steps. First you might want to go into any ASP.NET controls that have explicit style settings, and replace those style properties with actual Cascading Style Sheet references. At runtime, you will be able to have two sets of styles, one for presentation on the screen and the other for printing, ASP.NET controls by default have explicit style properties. For this demonstration, I'm working with the file DisplayData.aspx, which has an SqlDataSource whose Select command joins multiple tables together, and then a GridView that presents the data using one of the auto-format settings.
let's take a look at the code for the GridView. I'll select the GridView and then go to Source View. Then I'll press Alt+Shift+Enter to go into full screen. In the GridView code down toward the bottom of the declarations, there are a number of styles, each of these styles has individual style properties which as I have shown in other demonstrations are translated by the ASP.NET Framework at runtime into style declarations that are inline which as I have shown in other demonstrations, are translated by ASP.NET at runtime into explicit style declarations that are inline within the rendered HTML table.
The problem with this approach is that if you wanted to change from one set of styles to another at runtime, you would actually have to go in and change each individual property on each GridView control. A better approach is to take these properties and translate them as Cascading Style Sheet classes. I have already done some of the work. I'll open the file Style.css and show you that this file contains a number of classes named report header, report row and report alt row. These three CSS classes match the settings that are generated by Visual Web Developer when you select a particular auto-format. The row style, which is declared up at the top of the code, the header style and the alternating row style, which are all used in the presentation, have all been restated now as CSS classes.
So, here are the changes I'm going to make in the actual document, first I'm going to eliminate any styles that won't actually be used. I'm not going to be using paging in this presentation, so I'll remove the Pager style. Similarly, I haven't allowed the user to select rows that's an Ajax style approach that isn't turned on right now, so will delete that, and I'll also remove the Edit row style because this GridView isn't used for editing. Then I'll move some of the code around, I'll go up to the Row Style and select and cut that to the clipboard and then go back down toward the bottom of the GridView and paste it in. For some reason visual developers separates those style declarations, doesn't matter where you place them as long as they are all within the GridView and I would like to keep them together.
Finally I'll remove one more, the Footer style, because this particular GridView won't have a footer. So I'm left with these three style declarations, the row style, the header style and the alternating row style. Now, I'll replace the individual properties with the CSS declarations. First, I'll remove all of the style settings, I'll go to the row style and remove the back color, I'll go to header style and remove back color, font bold, and fore color and then I'll go to alternating row style and remove the back color.
Now before I replace those settings with the Cascading Style Sheet classes, I'll save and run the page. You will see that the GridView is displayed now with a very plain appearance. By removing all of the individual style properties and now rendering the text as just plain old boring text. Now I'll close the browser and now let's restore the look and feel. Going back to the Styles file, I'll be using these three CSS classes. First in the Styles.css, I'll select and copy the name of the class Report Row.
I have double-clicked on the name of the class to select it and then pressed Ctrl+C to copy. Then I'll go back to the ASP.NET page and then the Row Style attribute, I'll add the CSS class property and paste in the name of the class Report Row. Now, I'll do that same thing for the header style, I'll go to Styles.css, I'll locate and select the report header class and press Ctrl+C to copy. I will go back to the page and add cssClass= and then paste in reportHeader and once more time for the alternating row style. I'll go to Styles.css, double-click to select reportAltRow, press Ctrl+C to copy, go back to the page, add the cssClass and press Ctrl+V to paste and I'll make sure that the resulting markup in the ASP.NET page is well formed. Each declaration of the cssClass should have an equals, a pair of quotes and then the name of the class.
As a reminder you don't put in the dot before the class name when you are referencing the class name within your ASP.NET document. The dot only goes in the actual css file when you are creating the class. Now I'll save the changes to all of the documents. I'll go back to DisplayData.aspx and I'll press Ctrl+F5 to run the page and when the page runs now, you will see that the look of the page is restored. I'm now positioned to be able to create two CSS files, one for presentation on the screen as seeing here, and one for printing. And it will be up to the browser to switch back and forth between them at runtime, but I'll show you how to do that in another video.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105433 Viewers
56 Video lessons · 117121 Viewers
71 Video lessons · 86347 Viewers
131 Video lessons · 41262 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.