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.**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:
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 json.org
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.
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: ElegantWebForms.zip
In the next post I will explain a bit more in-depth the extensions.js script and the handy things it can do.