Formatting an Online Shopping Cart/PayPal System
(Page 1 of 4 )
In this article, the third and final one in a series covering the GridView, we'll learn how to stylize the GridView to make it fit in with our site design using a number of techniques. We'll look at both inline and externally defined CSS as well as directly setting some of the HTML tables attributes.
A downloadable zip of the source code and images is available here.
Introduction
I've used the DataGrid in almost every commercial C# .net project to date, so when I started hearing about the GridView and how it would take out a chunk of the work I kept doing I leaped at the chance to use it. Both the DataGrid and the GridView are classes that allow you to easily and quickly display tabular data. They both get rendered to HTML tables when viewed online.
This is the third article in a series exploring the GridView and demonstrating some of its usages via a simple shop demo. Each article is going to use the same source files which you can grab at the link above. To view the demo just unzip everything into a new directory on your web server and browse to the directory name. For example, if you unzipped it all into a directory called "gridviewshop" in the root of your web server you would navigate to:
http://www.yourserver.com/gridviewshop
If everything worked okay you should see a site looking like this:
In the previous segment we covered how to control the creation of the GridView's DataSource, which in the demonstration shop's case is a DataTable stored and accessed from the Session state. The first article covered how to use this data to populate the GridView, so now we just have to make it match our design scheme. Here you can see what the two GridViews would look like with no styling:
Next: Making it Pretty >>
More C# Articles
More By Tann San
