Introduction
From MagicAjax.NET web site - "MagicAjax.NET is a free open-source framework, designed to make it easier and more intuitive for developers to integrate AJAX technology into their web pages, without replacing the ASP.NET controls and/or writing tons of JavaScript code. Just as a plug & play component."
Definition of AJAX
Asynchronous JavaScript And XML, or its acronym Ajax (Pronounced A-JAX), is a web development technique for creating interactive web applications. The intent is to shift a great deal of interaction to the web surfer's computer, exchanging data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability. read mode
Thanks To
First and before we proceed, I'd like to thank the pioneer developer who brought this component to us, he is Argiris Kirtzidis, who first publish MagicAjax.Net as an article on CodeProject.
What is this article about
This article is about to show how to use MagixAjax.Net as plug & play component in ASP.NET Applications. Which saves time and improve the performance of your web applications.
Assumptions
This article assumes that you are familiar with ASP.NET and its controls as well as ADO.NET.
Also you may need to download the MagicAjax.Net from http://www.magicajax.net
Configure Your ASP.NET Application to be ready for MagicAjax.NET
- Copy MagicAjax.dll into your bin folder
- Modifying web.config:
The MagicAjaxModule should be registered in the system.web section of the web.config file of your application, like this:
<
httpModules>
<add name="MagicAjax" type="MagicAjax.MagicAjaxModule, MagicAjax" />
</httpModules>
MagicAjax will work with the default configuration options.
Create simple page & registering MagicAjax.Net controls on page
- Create a simple page.
- Add Reference to MagicAjax.dll to your project.
- A tag prefix should be registered for MagicAjax's controls namespace at the top of the page like this:
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>
- Add the AjaxPanel Control
<ajax:AjaxPanel id="AjaxPanel1" runat="server"><%--Your Controls Gose Here --%></ajax:AjaxPanel>
- Now add a DataGrid Control inside your AjaxPanel. You can do that using the VS.NET designer
Query your DataSource
DataSet the returns set of Products from Northwind database. Do that by any mean you'd prefer.
private DataSet GetDataSet()
{
SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["NWConn"]);
SqlDataAdapter adapter = new SqlDataAdapter("SELECT ProductName, UnitPrice FROM Products", conn);
DataSet ds = new DataSet();
adapter.Fill(ds);
return ds;
}
Implement Paging
Suppose you want to do paging on your DataGrid, implement the PageIndexChange of your DataGrid.
private void grdProducts_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
grdProducts.CurrentPageIndex = e.NewPageIndex;
DataSet ds = GetDataSet();
grdProducts.DataSource = ds;
grdProducts.DataBind();
}
Also you may code your page load, something like the following:
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
grdProducts.DataSource = GetDataSet();
grdProducts.DataBind();
}
}
Also you may would like to do sorting, edit and update of your data inside your gird. All this is supported, Just do it as you usually do. And after finishing, put your DataGrid or any other control inside and AjaxPanel just as plug & play, and watch the magic of The MagicAjax.Net.
Conclusion
At the time of writing this article, MagicAjax Release a major release of the component, it MagicAjax.Net 0.3.0. I'm sure you may find some bugs or features that may need improvements during working with the control. Just read the documentation that comes with the component, and have a log at the change log as well.
Also MagicAjax.Net support ASP.NET 2.0, so you can use it also in VS.NET 2005
Have fun with AJAX.