Reader Level:
Articles

Transfer Data to Server Via Ajax on Tab Click

By Sandeep Singh Shekhawat on December 09, 2012
In this article I am going to explain how to pass an object on a tab click and retrieve data from another web form.
  • 0
  • 0
  • 6721
Download Files:
 

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

COMMENT USING

Trending up