How to create Ajax enabled website?

BANGALORE, INDIA: In the last issue we discussed some new features of Web Developer 2008, and also showed how to implement some of these, like the multi-targeting and the list view control. In this article we will discuss the Ajax extension feature in WebDev 2008.

As Ajax is used to create rich Web-based applications, making it a part of the new WebDev 2008, developers are now relieved from the extra steps they used to do earlier, like adding Ajax extensions manually. Ajax is also considered in web services and SOAs as the front end. An instance of Ajax-enabled website is the popular Gmail, where on deleting a message, the result is displayed instantly on the user end, without the whole page getting refreshed.

In this article we will also show you how to add new Ajax controls by which you can create full featured Ajax-enabled website within minutes.

Creating Ajax-enabled website
Let's start by creating a simple Ajax-enabled website through which we will send some search condition to an MS Access database, and then the result which comes from the database is displayed on the website. For this open the Web Developer 2008 and start up by creating a new website from File > New Web Site. Give the project name as 'Ajax implementation' and click on 'OK' .

Now draw a text box where we will specify the condition for the query to be executed. For this first switch to the design view, open up the toolbox, and navigate to the 'Standard' section. Then drag the text box control to the web page and change the ID of this text box as 'querybox' from the textbox properties option. Beside this textbox draw a label, drag the label control, and drop beside the 'querybox'. Then change the text of the label which you have just created as 'Enter Your Query:', this is to inform the users that they have to enter the query in the textbox provided. Draw a button which when clicked will execute the query with the condition provided in the 'querybox'. For this drag the button control for the standard section of the toolbox and drop into your website.

Create a database in MS Access named as 'Database1' and then create a table named 'table1'. Create two different columns into the table for example ID and name. Enter data into these fields and save it.

Now double click on the button in WebDev 2k8 to open up the coding section for the button, and paste the following code into it. This code will be triggered when the button will be clicked.

Dim constr As String = _
"Provider=Microsoft.Jet.OLEDB.4.0;" & _
"Data Source=C:\Database1.mdb;"
Dim con As OleDbConnection = New OleDbConnection(constr)
Dim command As OleDbCommand = New OleDbCommand("Select * from table1 where ID=" + querybox.text, con)
Dim dr As OleDbDataReader
con.Open()
dr = command.ExecuteReader
While dr.Read()
Label2.Text = dr(1)
End While
dr.Close()
con.Close()

Now for running an Ajax application in WebDev 2k8 you need a script manager on you web page. For this drag and drop the script manager from the Ajax extension section found under the toolbox. Change the data source in the connection string to the path where your MS Access database is located. Next debug the 'Ajax implementation' project from debug > start debugging. This will open up a browser in your default Internet Explorer. Enter a single digit value, say 3, and this will return name associated with the entered ID.

You will notice that each time you enter the search criterion the result is displayed without the whole page getting refreshed.

Adding new controls
Another most interesting thing is the Ajax toolkit; it is not installed by default with the WebDev 2k8. This is a community-driven project and can be downloaded from the URL http://ajax.asp.net. The Ajax is available in two different versions: one, the.Net 3.5 framework and the other is for the earlier frameworks. You can also find the source code for the toolkit using which you can modify or add new controls to the toolkit of your own. In our case we will be downloading the 'no source' .Net 3.5 version of Ajax toolkit.

Create a directory named 'Ajax toolkit' in the program file directory and then extract the downloaded Ajax toolkit into the newly created directory. Once the extraction is finished open the WebDev 2k8. Inside the toolbox right click and then click on the 'Add tab' option and provide the name as 'Ajax Toolkit' for the newly created section. This is to incorporate the 'Ajax toolkit' into the WebDev 2k8 and this is the new extender support that Visual Web Dev 2k8 provides you. Now right click on the newly created toolkit section and click on the 'Choose Item' option. A 'Choose Item Toolbox' window will pop up, click on the browse button and navigate to the 'Ajax toolkit' extracted folder, ie, inside program files folder. Go to 'SampleWebSite' > 'bin' directory, select AjaxControlToolkit.dll file and click on open. Next click on OK button and you will notice that new controls are added into the Ajax Toolkit section and now you can add these controls on your website.

Using controls
Owing to the addition of controls in the Ajax toolkit, on selecting the button control on the web page in design view you can now see the extender option, which was not available earlier.

Further let's see what you can do with the new controls added.Click on the expansion button for getting the extender option found on the button control, and then click on the 'Add extender' option. Next choose the options available, in our case we chose the 'ConfirmButtonExtender.' Give an ID to this extender and click on the OK button. Next go to the source code view and search for the following string:

With the new controls added to the Ajax-enabled website in WebDev 2008, you can create interactive Web applications graphically

<asp:TextBox ID="TextBox1" runat="server" Height="23px" Width="260px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" Width="103px" />
<cc1:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server"
ConfirmText="This is a test confirm message!!!" Enabled="True" TargetControlID="Button1">
</cc1:ConfirmButtonExtender>
<br />
<asp:Label ID="Label2" runat="server"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

Put your message in quotes against the ConfirmText. Now for testing how the control functions save and debug the project by clicking on debug > start debugging option. Now when you click on the button on your default Internet browser it should pop up a confirmation window on which the message gets displayed. Further you can also add animation extender, Drag panel extender, drop shadow extender, etc, to your webpage.

Hence, using Ajax extensions and controls in WebDev 2008, interactive Web applications can be created graphically rather than writing codes manully, which was not the case earlier.

A true boon for developers indeed!