I create two web pages, one for tab creation and to pass an object to another page. Another page initializes content for a tab.
Step 1: Create Function for Data Transfer
I create a JavaScript function that creates an object. The object is passed to another page. See:
function TabClick()
{
$("#tabs").tabs({
fx: { opacity: "toggle" },
ajaxOptions: { data: { name: "Sandeep", surname: "Singh"} }
}).tabs("url", 1, "Content.aspx").tabs("load", 0);
}
Here ajaxOption transfers the data object to another page. The tabs() initializes the content of the tab and the load action loads the content of another page to the tab. Here another page is Content.aspx. The tab() function uses URL that is action and index 1 represents that content to be loaded on the second tab click. So the tab() function initializes the tab using the load action.
Step 2: Entire Code Tabs
The following code shows how to create a tab and initialize the content of the tab. There is an unordered list that is used to create the tabs and the entire content in a div. These unordered list items use a hyperlink (<a> anchor tag) and uses id selector map tabs for their content (sub divs). See:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PassObject.aspx.cs" Inherits="JQueryExample.PassObject" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="jquery/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<link href="jqueryui/css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function ()
{
$("#tabs").tabs();
});
function TabClick()
{
$("#tabs").tabs({
fx: { opacity: "toggle" },
ajaxOptions: { data: { name: "Sandeep", surname: "Singh"} }
}).tabs("url", 1, "Content.aspx").tabs("load", 0);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<ul>
<li><a href="#tabFirst">First</a></li>
<li><a href="#tabSecond" onclick="TabClick()">Second</a></li>
</ul>
<div id="tabFirst">
It is First Section.
</div>
<div id="tabSecond">
Second Section
</div>
</div>
</form>
</body>
</html>
Step 3: Create Content for Initialize Tab
Create a web form to initialize the tab. It has two labels to show the name and surname of a JavaScript object that has been passed using ajaxOption. Here is the UI code for the Content.aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Content.aspx.cs" Inherits="JQueryExample.Content" %>
<!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>
Name : <asp:Label ID="lblName" runat="server"></asp:Label>
<br />
SurName : <asp:Label ID="lblSurName" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
Step 4: Get JavaScript Object
Here the JavaScript object is passed as a request object but it loads on tab click so it is not passed in the URL. This object has properties and these properties are used as a query string. We can use the Request object QueryString to retrieve these properties. Here is the code for the Content.aspx.cs page:
using System;
namespace JQueryExample
{
public partial class Content : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GetDetail();
}
private void GetDetail()
{
string name=string.Empty;
string surName = string.Empty;
if (Request.QueryString["Name"] != null && Request.QueryString["surName"] != null)
{
name = Request.QueryString["name"].ToString();
surName = Request.QueryString["surName"].ToString();
}
lblName.Text = name;
lblSurName.Text = surName;
}
}
}
Output
![Data-transfer-via-Ajax-on-TabClick.gif]()