Tutorial - creating the perfect ASP.NET website
This free online tutorial shows how to create the perfect website using ASP.NET using Visual Basic or Visual C#, user controls, styles, master pages, gridviews, data classes and stored procedures.

Posted by Andy Brown on 24 April 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Creating The Perfect ASP.NET Site - Free Online Training

I've taken hundreds of wrong turnings in my ASP.NET development career; this blog aims to show you where the ASP.NET road forks, and explain in each case which way to turn.  I hope you find it helpful - I wish I'd read it 10 years ago!

You can download the VB files or C Sharp files which make up the website case study referred to throughout this tutorial (you'll need to change the connection strings at some stage), and you can also generate the SQL Server database needed.

This ASP.NET training blog is split into parts, as shown below. 

 Master Pages, Themes, Skins and Styles

The online ASP.NET tutorial starts with how to create an ASP.NET website, using master pages, style sheets and (maybe) themes and skins:

Tutorial Learn how to ...
The perfect website Create a new ASP.NET website (including adding and editing master pages, creating and applying CSS style sheets and learning whether to use themes/skins or not).

CSS Style Sheets and HTML

If you're building a website, you'll need to learn how to format HTML using style sheets.  This CSS (Cascading Style Sheet) tutorial will show how to use CSS quickly and effectively:

Tutorial Learn how to ...
How CSS style sheets work Create element, class and id styles, use margins and padding, float and align text, and much more!
Create Styles for HTML Tags Apply styles to header, body, image, table, list and hyperlink tags (among others).
Worked Example using CSS Create a full style sheet by following a walk-through of all the steps and thought processes involved.

Accessing Data using Classes

There are many ways to get at records in your underlying database using ASP.NET - this article explains the one which I think is the most powerful and flexible:

Tutorial Learn how to ...
Stored procedures To write data classes you'll first need to know how to create stored procedures, and how to pass parameters to them. 
Data Classes Use data classes to get at the data in your underlying tables in the most robust (and easiest to understand and alter) way.


There are several data controls in ASP.NET, but the gridview is the grand-daddy of them all (plus if you can use a gridview, most other data controls work in a similar way). 

Tutorial Learn how to ...
GridViews Use the main data control in ASP.NET to list, sort and  conditionally format data, and also learn how to react to gridview events.

Maintaining State

How to ensure that your ASP.NET pages remember things:

Tutorial Learn how to ...
Maintaining State How to maintain state within a page and share information between pages in an ASP.NET website.

User Controls

You can survive without user controls in ASP.NET, but only just! 

Tutorial Learn how to ...
User controls Create user controls, include them on pages and raise events to get user controls to talk to each other.

The examples are coded for VB and C#.  I've avoided using wizards throughout, particulary for data sources, as they leave you with a website which is difficult to understand or alter in my experience.  I've used SQL Server as an underlying database - SQL Server Express is available as a free download from Microsoft

The Website Built by this Tutorial

We'll create a simple to-do list website.  Our home page will show a search form:

Search form for to-do list

You can choose to search for tasks by their status or by the text they contain.


Having chosen to run a search, you can then see the tasks returned:

List of tasks returned

You can see for each task its text and status.


When you add, edit or delete a task, you'll see a form like this:

Editing a task

We'll use the same form for adding, editing and deleting a task.


The trick will be to get ASP.NET to remember settings:

Search form filled in

We need to ensure that if you run a search, for example, ASP.NET remembers your form fields when you finish listing your tasks.


To do this, we need to maintain state for the form, which we'll do using user controls.  We'll use a gridview to show the list of tasks, and a data class and parameterised stored procedures to retrieve the data from SQL Server.

A Final Thought

You might also like to consider our classroom-based .NET training courses, using either C# or VB as a programming language.  This blog gives a pretty good idea of how we try to explain things in a simple and entertaining way!

This blog has 0 threads Add post