Setup and tools

Setup and tools

In this post I will talk you through the basic setup of our web application and all the tools you need. Don’t worry, you don’t have to do all these steps manually, I will provide you with a new project template later on so you can always start with the basic template. I just want to give you the insides of why I’m doing this. This is all about being in control, and giving you a template without explaining it to you would certainly defeat the purpose.

1. The project

Because we are talking about elegant web forms, we will create a new empty web site. To me, elegant means less is more. We want to avoid clutter so we start with a clean slate.

[![New empty ASP.NET website](/content/images/2012/02/new_project_thumb1.png "To avoid clutter we create an empty ASP.NET website. We are in control!")](/content/images/2012/02/new_project1.png)
**1. To avoid clutter we create an empty website. We’re in control of what gets created!**


2. Basic structure

For our basic structure I added a script folder with a general script, a styles folder with a style sheet, a master page and our home page.

I added two more scripts:

  • extensions.js
  • json2.js

JSON2.js will help us to convert JSON to strings and strings to json. We will need it later on when implementing the AJAX part. JSON2 is a open source library which you can download from

Extensions.js is a small library which helps you do a few common things in jQuery and plays nicely with ASP.NET. Later I will dive deeper into this library and explain the different functions.

I also added the correct references to all these files. I choose to use a CDN for jQuery for this. Apart from that I made a few changes to the master page:

  • I got rid of the transitional doctype and placed a nice clean HTML 5 doctype. Let’s go for the future!
  • I got rid of the form runat=server-tag. We don’t want to start out with everything inside a form. Forms are for posting data to the server, not to include a complete web-page. This way we ensure that we are not posting data that we won’t use. Also, we’re going to do a lot of AJAX, so we’re not going to do a lot of posting.
[![project_structure](/content/images/2012/02/project_structure_thumb11.png "project_structure")](/content/images/2012/02/project_structure11.png)
**2. Our basic project structure**

So there you have it: a nice clean web application with just the things you need. No more, no less.

You can download the project here:

In the next post I will explain a bit more in-depth the extensions.js script and the handy things it can do.

Kenneth Truyers
View Comments
Next Post

Useful Javascript extensions

Previous Post