vAjax, A Simple and Easy to Use Ajax Library

Vahid Rassouli

Rate me:

2.60/5 (7 votes)

29 Nov 2008GPL34 min read

26.4K

160

Create a full AJAX-ed Web site very easily. It is so simple!

Introduction

Imagine you wish to design a Web site like GMail! (Oh! I know, it's sometimes hard to even imagine it!)
So, what if you wish to design a simpler website, which is fully AJAX featured (like GMail:)). A single page, in which you show everything and the user interacts only with that page!
So, what should we do? If you've worked with callback, you know that creating this scenario with it is so hard, and sometimes impossible! Using controls like UpdatePanel do not suit either!
With vAjax, you can design such Web sites very easily! vAjax uses jQuery (you may need to download the latest version of jQuery) as its JavaScript library, and loads ASP.NET UserControls in defined places (PlaceHolders). All you should do is to put an ASP.NET page in the Web site and inherit it from vAJAX, and then break down your Web site into modules of UserControls! (and just a bit more configuration). See below for a practical Web site.

Using the Code

Create a new ASP.NET Web Site project in Visual Studio and do the following:

Add a reference of vAjax.dll file to your website.
Add a new ASPX page and name it vAjaxPage.aspx.
Switch to behind code of vAjaxPage.aspx and inherit it from vAjax.Page class.

C#
```
...
public partial class vAjaxPage : vAjax.Page
...	
```
Add the JQuery.js and vAjax.js files to your Web site (optionally, in the ~/Js directory).

Now, include the *.js files in the default.aspx file.

HTML

...
<head runat="server">
<title>.:: vAjax Demo Web Site ::.</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/vAjax.js"></script>
</head>
<body>
...

Please make sure to include JQuery.js before vAjax.js.

Now, add some HTML tags to your Default.aspx file.
In fact, default.aspx is your ONLY Web page by which the user will interact, and the HTML you add now, includes PlaceHolders of your page in which the user controls will be hosted!

HTML

<body>
	<form id="form1" runat="server">
		<table border="1" width="100%">
		<tr>
			<td colspan="2" style="height: 100px;">
			    <!-- A place holder used for showing errors -->
			    <div class="messagePanel">
			    </div>
			</td>
		</tr>
		<tr>
			<!-- A place holder used for hosting menu in it -->
			<td width="150" id="menu" valign="top"> </td>
			<!-- The main place holder, used for page content -->
			<td valign="top" id="Content" height="200">
				Content
			</td>
		</tr>
		<tr>
			<td colspan="2" style="height: 100px;"></td>
		</tr>
		</table>
		<!-- This is the loading panel template, used by vAjax script -->
		<div vajaxloadingpannel="true">
			<table style="height: 95%; width: 95%">
			<tr>
				<td valign="middle" align="center">
				    <img src="img/loading.gif" />
				</td>
			</tr>
			</table>
		</div>
	</form>
</body>

Now, add a Web user control named ContentControl.ascx to your Web site, and fill it like following:

ASP.NET

<%@ Control Language="C#" AutoEventWireup="true" 
	CodeFile="ContentControl.ascx.cs" Inherits="Controls_ContentControl" %>
<%@ Register Assembly="vAjax" Namespace="vAjax.UI" TagPrefix="cc1" %>
<div runat="server" id="panel1">
	Please type your name:
	<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
	<br />
	<cc1:PostControlButton ID="btn1" runat="server" 
		Text="Post My Name..." OnClick="btn1_onClick" />
</div>
<div runat="server" id="panel2" visible="false">
	<asp:Label ID="lblName" runat="server" Text=""></asp:Label><br/>
	<cc1:LoadControlButton ID="btn2" Text="Load into menu!" 
		WebUserControlName="MyContentControl" 
		PlaceHolderID="menu" runat="server" />
</div>

public partial class Controls_ContentControl : vAjax.UI.UserControl
{
	protected void Page_Load(object sender, EventArgs e)
	{
		txtName.Text = "Your name please?";
	}

	protected void btn1_onClick(object sender, EventArgs e)
	{
		panel1.Visible = false;
		panel2.Visible = true;

		lblName.Text = "Your name is: "+txtName.Text;
	}
}

Almost done! What we need next to make vAjax work is an XML document and two application settings in the web.config!
The XML document contains the list of our user controls and a custom name for each, which is used to load controls by vAjax.

XML

<!-- ControlsList.xml -->
<vAjax>
	<Control name="MyContentControl">~/Controls/ContentControl.ascx</Control>
</vAjax>

XML

<!-- web.config -->
.
.
.
<configuration>
	<appSettings>
		<add key="vAjaxPage" value="vAjaxPage.aspx"/>
		<add key="ControlsList" value="ControlsList.xml"/>
	</appSettings>
	<system.web>
		<pages enableEventValidation="false">
.
.
.

Done! Now browse your Default.aspx page and have fun!
Now, you can add more user controls and load them in different parts of the page...

Code Discussion

As you see, after the first 8 steps which are configurations of vAjax, you can easily add more user controls with real contents which suit your Web site, and use them easily by loading them into PlaceHolders.

vAjax also provides three controls named LoadControlButton, PostControlButton and LoadControlScript. Put LoadControlButton into your forms to load your user controls by setting the WebUserControlName property with the name of the user control you have supplied in the ControlsList.xml file, and set the PlaceHolderId to the ID of the HTML tag inside which you wish to load the control.

Put the PostControlButton into your forms, to post the form back to the server using AJAX. This does not need any property to be set (just the OnClick event, of course)!
And finally, the LoadControlScript! It should be set like the LoadControlButton. If you put it into your page (and make it Visible=true), as soon as the control gets loaded into the browser, it will execute an script which makes some control to be loaded in some place holder (depending on what you set to the properties).

Points of Interest

Standard ASP.NET pages contain just one FORM tag! So, whenever you click a button (or anything else) which causes a page to get posted back, the whole page gets posted to the server, and then the whole page gets downloaded again to the client's browser!
Then, no need to mention that it makes it slow for the pages to be posted and downloaded!
The solution of vAjax for this, is that it wraps all the user controls with a form! So if you load multiple controls into a single page, the page contains multiple FORMs! And when you click a PostControlButton, it posts ONLY the appropriate form, not the whole page! This makes vAjax post and download the controls faster and of course makes partial updating possible!

History

27/11/2008 - Release version 1

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Written By

Vahid Rassouli

Architect

Iran (Islamic Republic of)

The only language I hate is *Basic!

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.