How To Create an AJAX-Enabled Web Site.

Let us begin by creating a new ASP.NET AJAX enabled website. Close that Visual Studio and launch a new instance. Select File, New, Website. As you can see, I have an ASP.NET AJAX enabled website template installed. By choosing this template, Visual Studio will automatically take care of adding references and configuration information to my application. For those of you that have an existing ASP.NET web application, in order to use AJAX functionality, you will need to copy these references and configuration information into your file.

It is quite simple to do by using the template as a foundation. Once we select this application, we will choose a language. We will go ahead and choose C#. If you would like, you can use the other .net languages but we chose C# as our coding language for this series as it is quite similar in look and feel to JavaScript. Now, click Ok. What happens when we create this type of website? Let us examine the web config file to find out.

Double-click on the web config file. At the very top, you will notice the section group that has web services and Jason serialization. This is used by the scripting engine that we used with ASP.NET AJAX. You will also see that it references the system Web Extensions Library. By scrolling down you will also see that the HTTP handler section is also modified. It actually removes the verb for the SMX file which is a web service and replaces it with a new reference to the system.web.script services library. This actually allows you to serialize your existing web services using Jason rather than Soap.

That way you can actually call them from the client side script. You will see this in action as we get further into the series. You will also see a section for system web extensions. Inside here, you can actually make references to your web services such as the authentication service and the profiling engine. We will also be working with this later. If you have an existing ASP.NET application that you like the AJAX enable, you will need to bring these sections over to the web config file.

Now let us take a look at the default page that was created for us. Double-click on the font ASPX. As you can see, inside the raw code, we have a script manager. The script manager is the most important component of ASP.NET AJAX. The script manager does exactly what it says it does. It registers and manages AJAX script execution on that page. Every AJAX enabled page must have one and only one instance of the script manager.

For those of you who have worked with ASP.NET 2.0, you can compare this to the web part manager that you need to manage the client side user interaction that you get with web parts. Notice that the script manager has a run on its server tag to execute the logic on the server. Let us take a look at this page and the designer. Select the design tab.

As you can see the script manager is represented by a gray box. Most of the AJAX controls that we will be working with are non-visual. We will work with them using the source window as well as the properties window. Let us delete this page and start from scratch. Right-click on default ASPX and select Delete. Select Ok to permanently delete the file.

Before we go any further, let us set up our environment so it makes righting code and debugging a lot easier. We will enable line numbers and quoted attributes so that we can be more productive with our debugging and development. From your Menu, select Tools, Options, scroll down to Text Editor and expand the node. Scroll down to the HTML node, select General. You will see an Option for line numbers. Enable that by clicking on the check box. Select the Format option. Inside here, you will see a formatting option for inserting attribute values, this is quite helpful when we are writing our code. Click the check box to select this, click Ok. One last thing before we begin, we will also need to add a reference to the control toolkit. We will be using this towards the end of the series.

Right-click on the solution, select Add Reference, select the Browse button. So let us navigate to the directory where we install the AJAX control toolkit DLL. In our case, it is under the program files Microsoft ASP.NET directory. It may vary on your machine depending on where you installed it. Inside the AJAX control toolkit, we will see a binaries directory. Select the AJAX control toolkit DLL and click Ok.

Now let us take advantage of one of ASP.NETs user experience features, themes. As you will see, it is quite easy to integrate ASP.NET functionality into your AJAX enabled application.