Client Side AJAX in ASP.NET 4.0

AJAX is most used technology these days, this avoids page reloads and user will not get frustrated, however it still requires a post back to server so ASP.NET 4.0 introduced ClientSide AJAX which is achieved by using some jQuery and server side service

Here I am going to build a sample using Northwind database Categories and Products, on selecting a category all products under that category will be listed, to list the products I am using a HTML Table and Templates.

So lets start, open Visual Studio 2010 and create a Web Application and name it as ClientSideAjax. To retrive the data from database I am using 2 DataSources those are

1) SQLDataSource1 : Just drag and drop a SQLDataSource object from tool box and select connection and connect to Northwind database’s Categories table.

2) ProductsCategories.edmx: This datasource is EntityDataModel, just right click on project in Solution Explorer and add a new file select EntityDataModel and name it as ProductsCategories.edmx, just follow the steps and connect to Northwind Database and select Product and Categories tables and finish.

Now we have created required datasources for our project, so let start designing the web form, we need to add one Dropdownlist for listing all the categories and one HTML table for listing all the products under selected category, set the DataSource1 to DropDownlist and set DataTextField = CategoryName and DataValueField = CategoryID

We will talk about {{ ProductName }} template in details below.

So now lets write a service from where we will get the all the products under a category, for that I added a WebService page Northwind.asmx(create a folder called Services and Northwind service under that folder) and a web method to get products based on category, please find the asmx page in code below I am creating a public web method getProducts, in this method I am reading the data from ProductsCategories EntityDataModel and returning products.

Now we are ready with our server side code and let start write some client side JQuery to read the data from web service and display using JQuery templates. so we need add some Microsoft AJAX JavaScript files to our project just create a folder in our project called MicorsoftAjax and add following files

  You can download these JavaScript files from http://aspnet.codeplex.com

Add reference in the Default.aspx page to all js file and Northwind service, also create a style temple which is used to hide the jQuery template initially

So now we will write a PageLoad method in JQuery to get the products, now we will add following method to Default.aspx

Now we are ready with our code lets build, run and test

Hope this helps.

Tags: Client Side AJAX in ASP.NET 4.0, jQuery, Visual Studio 2010, C# .NET