Ajax-based data loading using jQuery.load() function in ASP.NET
- by hajan
In general, jQuery has made Ajax very easy by providing low-level interface, shorthand methods and helper functions, which all gives us great features of handling Ajax requests in our ASP.NET Webs. The simplest way to load data from the server and place the returned HTML in browser is to use the jQuery.load() function. The very firs time when I started playing with this function, I didn't believe it will work that much easy. What you can do with this method is simply call given url as parameter to the load function and display the content in the selector after which this function is chained. So, to clear up this, let me give you one very simple example: $("#result").load("AjaxPages/Page.html");
As you can see from the above image, after clicking the ‘Load Content’ button which fires the above code, we are making Ajax Get and the Response is the entire page HTML.
So, rather than using (old) iframes, you can now use this method to load other html pages inside the page from where the script with load function is called.
This method is equivalent to the jQuery Ajax Get method
$.get(url, data, function () { })
only that the $.load() is method rather than global function and has an implicit callback function.
To provide callback to your load, you can simply add function as second parameter, see example:
$("#result").load("AjaxPages/Page.html", function () {
alert("Page.html has been loaded successfully!")
});
Since load is part of the chain which is follower of the given jQuery Selector where the content should be loaded, it means that the $.load() function won't execute if there is no such selector found within the DOM.
Another interesting thing to mention, and maybe you've asked yourself is how we know if GET or POST method type is executed? It's simple, if we provide 'data' as second parameter to the load function, then POST is used, otherwise GET is assumed.
POST
$("#result").load("AjaxPages/Page.html", { "name": "hajan" }, function () {
////callback function implementation
});
GET
$("#result").load("AjaxPages/Page.html", function () {
////callback function implementation
});
Another important feature that $.load() has ($.get() does not) is loading page fragments. Using jQuery's selector capability, you can do this:
$("#result").load("AjaxPages/Page.html #resultTable");
In our Page.html, the content now is:
So, after the call, only the table with id resultTable will load in our page.
As you can see, we have loaded only the table with id resultTable (1) inside div with id result (2).
This is great feature since we won't need to filter the returned HTML content again in our callback function on the master page from where we have called $.load() function.
Besides the fact that you can simply call static HTML pages, you can also use this function to load dynamic ASPX pages or ASP.NET ASHX Handlers .
Lets say we have another page (ASPX) in our AjaxPages folder with name GetProducts.aspx. This page has repeater control (or anything you want to bind dynamic server-side content) that displays set of data in it. Now, I want to filter the data in the repeater based on the Query String parameter provided when calling that page. For example, if I call the page using GetProducts.aspx?category=computers, it will load only computers… so, this will filter the products automatically by given category.
The example ASPX code of GetProducts.aspx page is:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetProducts.aspx.cs" Inherits="WebApplication1.AjaxPages.GetProducts" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tableProducts">
<asp:Repeater ID="rptProducts" runat="server">
<HeaderTemplate>
<tr>
<th>Product</th>
<th>Price</th>
<th>Category</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("ProductName")%>
</td>
<td>
<%# Eval("Price") %>
</td>
<td>
<%# Eval("Category") %>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</form>
</body>
</html>
The C# code-behind sample code is:
public partial class GetProducts : System.Web.UI.Page
{
public List<Product> products;
protected override void OnInit(EventArgs e)
{
LoadSampleProductsData(); //load sample data
base.OnInit(e);
}
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString.Count > 0)
{
if (!string.IsNullOrEmpty(Request.QueryString["category"]))
{
string category = Request.QueryString["category"]; //get query string into string variable
//filter products sample data by category using LINQ
//and add the collection as data source to the repeater
rptProducts.DataSource = products.Where(x => x.Category == category);
rptProducts.DataBind(); //bind repeater
}
}
}
//load sample data method
public void LoadSampleProductsData()
{
products = new List<Product>();
products.Add(new Product() { Category = "computers", Price = 200, ProductName = "Dell PC" });
products.Add(new Product() { Category = "shoes", Price = 90, ProductName = "Nike" });
products.Add(new Product() { Category = "shoes", Price = 66, ProductName = "Adidas" });
products.Add(new Product() { Category = "computers", Price = 210, ProductName = "HP PC" });
products.Add(new Product() { Category = "shoes", Price = 85, ProductName = "Puma" });
}
}
//sample Product class
public class Product
{
public string ProductName { get; set; }
public decimal Price { get; set; }
public string Category { get; set; }
}
Mainly, I just have sample data loading function, Product class and depending of the query string, I am filtering the products list using LINQ Where statement. If we run this page without query string, it will show no data.
If we call the page with category query string, it will filter automatically.
Example:
/AjaxPages/GetProducts.aspx?category=shoes
The result will be:
or if we use category=computers, like this /AjaxPages/GetProducts.aspx?category=computers, the result will be:
So, now using jQuery.load() function, we can call this page with provided query string parameter and load appropriate content…
The ASPX code in our Default.aspx page, which will call the AjaxPages/GetProducts.aspx page using jQuery.load() function is:
<asp:RadioButtonList ID="rblProductCategory" runat="server">
<asp:ListItem Text="Shoes" Value="shoes" Selected="True" />
<asp:ListItem Text="Computers" Value="computers" />
</asp:RadioButtonList>
<asp:Button ID="btnLoadProducts" runat="server" Text="Load Products" />
<!-- Here we will load the products, based on the radio button selection-->
<div id="products"></div>
</form>
The jQuery code:
$("#<%= btnLoadProducts.ClientID %>").click(function (event) {
event.preventDefault(); //preventing button's default behavior
var selectedRadioButton = $("#<%= rblProductCategory.ClientID %> input:checked").val();
//call GetProducts.aspx with the category query string for the selected category in radio button list
//filter and get only the #tableProducts content inside #products div
$("#products").load("AjaxPages/GetProducts.aspx?category=" + selectedRadioButton + " #tableProducts");
});
The end result:
You can download the code sample from here.
You can read more about jQuery.load() function here.
I hope this was useful blog post for you.
Please do let me know your feedback.
Best Regards,
Hajan
