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
