Here’s a quick tutorial on combining a style sheet with an ASP.NET gridview control.  The only reason I’ve picked on the Gridview control is that I’m using it extensively at the moment.  This is something that threw me a little when I first had to use the Gridview with a CSS file.  Whether I was being particularly dense or not I’m not sure, but for what it’s worth, here’s a quick ‘getting it working’ tutorial.

This is far from complete – let’s just call it a traditional web development mindset being applied to ASP.NET.  I always find that making the initial breakthrough’s the hard part – I hope this short article eases the way for you!

The tools…

I’m assuming you’re using Visual Web Developer for the purposes of this tutorial.  If you’re doing it ‘the hard way’ with just a programmer’s editor then I’ll detail that separately.  In each case ‘Website’ is the name of the folder containing the files that make up the website.

Within Visual Web Developer

On the default.aspx page, go in to Design Mode and drop a Gridview object and a data source object to suit your data source (this will depend upon what you’re using for your data for the view, and isn’t relevant to the tutorial – the CSS side of things will apply to all data sources).

Now, right click on the Website folder in the Solution Explorer window.  From the displayed menu, select ‘Add ASP.NET Folder, and from the newly displayed sub-menu select ‘Theme’.  A folder called ‘App_Themes will be created, and within it a new folder called ‘Theme1’ will be visible, available for you to type in the name of the display theme that you’re going to create.  (For the sake of this tutorial, an ASP.NET theme is a collection of visual effects that can be applied to a website and the controls therein – including style sheets)  With startling originality, we can call it ‘Test’.

Now, right click on the newly created ‘test’ folder within the ‘App_Themes’ folder, and select ‘Add New Item’.  A dialogue will be displayed that will allow you to select, amongst other things, a Style Sheet.  Select this, and rename the style sheet added to the Test Theme to ‘Test’.

We now have an empty style sheet – open it up and enter the following:

.gridtitle {color: fuchsia;}

This adds a CSS class to the Style Sheet called ‘gridtitle’.  All it does is sets the colour of the text to a rather disgusting (but definitely noticable) fuschia pink colour.Obviously, in the real world we would now proceed to put in to our style sheet anything we pleased.  But for the purposes of this tutorial, this will do.Now, back to our Default.aspx page.  Select the ‘Source’ view.  Modify the first line of the file to read as follows:

<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” StylesheetTheme=”Test” %>

All we’ve done is added the StyleSheetTheme attribute with a value of ‘Test’.  This basically attaches the Style Sheet from our Test theme to the page.Now, we have a Style Sheet, containing a class.  We now need to tell a particular part of the Gridview control to inherit the visual style set by this class.

For the sake of demonstration, find the <Headerstyle> tag within the asp:Gridview structure, and modify the tag to read as follows : <HeaderStyle CssClass=”gridtitle” />

This assigns the gridtitle class from our Style Sheet to the Header style.If you run the page, you will see the Header Row of the Gridview rendered in bright pink. And that’s how to do it!

Using a Text Editor

If you’re constructing the site using a text editor, then the syntax used is as above.  the main thing you have to do manually is to create the necessary folder structure under the ‘Website’ folder to support the Themes.  In the same folder as the Default.aspx file, create a folder called ‘App_Themes’.  Now, within that folder, create a further folder called ‘Test’.  Within the ‘Test’ folder create a stylesheet file called ‘test.css’ and define the gridtitle class within it.

Now return to the Default.aspx file and make the changes to it outlined above.

Again, that’s all there is to it!