Click here to Skip to main content
15,868,141 members
Articles / Web Development / XHTML
Article

How to Implement a NavigationPanel Using AJAX

Rate me:
Please Sign up or sign in to vote.
4.74/5 (28 votes)
11 Mar 20072 min read 89.8K   350   95   20
This article demonstrates how to implement web applications based on AJAX and ClientScriptCallBack as it presents a simple example. Also, the article tries to point at the key features of working with ASP.NET ClientCallback and AJAX.

Sample Image - NavPanel.jpg

Introduction

This article is going to demonstrate how to implement web applications based on AJAX and ClientScriptCallBack as it presents a simple example. Also, the article is trying to point at the key features of working with AJAX and ClientScriptCallBack. For example:

  • sending parameters to the web server
  • decreasing the amount of transfers between the client and the web server
  • reducing the process overhead in the server

Using the code

The application's main job is to implement a navigation panel. To do so, it reads the information needed from two tables in a SQL Server database. Those tables are called Nav_Master and Nav_Details . The Nav_Master table is used to hold the information of the main categories, and the Nav_Details table does the same but it holds the information about sub-categories related to the main categories stored in Nav_Main.

SQL command for creating the tables

SQL
--Create Master table ------------------------------

CREATE TABLE [dbo].[Nav_Master] (
    [ID] [int] IDENTITY (1, 1) NOT NULL ,
    [CatName] [nvarchar] (100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL 
) ON [PRIMARY]


--Create Detail table ------------------------------
CREATE TABLE [dbo].[Nav_Details] (
    [ID] [int] IDENTITY (1, 1) NOT NULL ,
    [ID_Father] [int] NULL ,
    [Name] [nvarchar] (100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
    [URL] [nvarchar] (255) COLLATE SQL_Latin1_General_CP1_CI_AS NULL 
) ON [PRIMARY]

In this program, when a user clicks on any of the main categories to select one of them, a JavaScript method called GetData(Item , ID_Cat) will be invoked to send the ID and the number of the selected categories to the JS handler (the UseCallBack method).

JavaScript
function GetData(Item , ID_Cat)
{
    ColapseAll(Item);
   
    if( document.getElementById("Nav_Dav_" + Item).style.display == "none"  )
    {   // Load Special Image when Click To Master 
        SetDefaultImage_Src();
        document.getElementById('Nav_IMG' + Item ).src = "Images/UP.png";
        document.getElementById("Nav_Dav_" + Item).style.display = "block";

        if (document.getElementById("Nav_Dav_" + Item).innerHTML == "" )
        {   // Goto Server And Show Loadin In The Client Side
            UseCallBack( ID_Cat , Item);
            ShowLoading(Item , "Show");
        }
    }
    else
    {   // Load Special Image - Close Image
        document.getElementById("Nav_Dav_" + Item).style.display = "none" ;
        SetDefaultImage_Src();
    }
}

After that, the processing on the web server begins and the RaiseCallbackEvent method will be invoked (the RaiseCallbackEvent is related to the ICallbackEventHandler). The RaiseCallbackEvent method will retrieve the information about sub-categories related to the selected main category from the Nav_Detail table and save them as a string to the public _MasterCat variable that is separated by a delimiter to indicate fields and records.

The RaiseCallbackEvent method is defines as:

C#
public void RaiseCallbackEvent(string eventArgument)
{
    String DBConString = 
     System.Configuration.ConfigurationManager.
            AppSettings["DBConString"].ToString();
    SqlConnection Con = new SqlConnection(DBConString);
    SqlCommand Comm = new SqlCommand("Select Name,URL From" + 
                      " Nav_Details Where ID_Father=@ID", Con);
    Comm.Parameters.AddWithValue("@ID", eventArgument);
    Con.Open();
    SqlDataReader Reader = Comm.ExecuteReader();
    while (Reader.Read())
    {
        _SearchResult += Reader[0] + "#" + Reader[1] + "@";
    }
    Con.Close();
}

The GetCallbackResult method returns the _MasterCat variable. The GetCallbackResult is defines as:

C#
public string GetCallbackResult()
{
    System.Threading.Thread.Sleep(500);
    return _SearchResult;
}

Then, in the client, another method called GetFromServer will show the sub-categories by getting the string sent by the RaiseCallBack method and separating the fields and records on the string and adding the HTML elements.

JavaScript
function GetFromServer( Server_Str , context )
{
    var Array = Server_Str.split("@");
    var Count = Array.length;
    var _String; 
    
    _String = "<table border='0' cellpadding='0' cellspacing='0' " + 
              "style='width: 400px; background-color: "+ 
              DetailBG_Color +"'>"  + Detal_Top_Botton ;
    for (var i=0 ; i< Array.length-1 ; i++)
    {
        var SmallArray = Array[i].split("#");
        _String += "<td align='right' style='width: 10px; " + 
                   "valign='middle'><img " + 
                   "src='Images/arrow1.gif' />" + 
                   "</td><td align='left' " + 
                   "class='TD_4' style='width: 390px; height: 26px; " + 
                   "background-color: " + DetailBG_Color +
                   "'valign='middle'>   " + 
                   "<a class='Link-5' href='"+ 
                   SmallArray[1] +"' >" + 
                   SmallArray[0]+" </a></td></tr>";
    }
    _String += Detal_Top_Botton  + "</table>";    
    document.getElementById("Nav_Dav_" + 
                            context).innerHTML  = _String;
    
    // Hide Loading In The Client
    ShowLoading(context , "Hide");
}

It's very important to notice that if some information about the categories has been taken from the server once before, there's no need to get them again.

Using secondary JavaScript methods

In this example, some other JavaScript methods are also used that are shownbelow:

  • The Showloading method to show a simple loading picture when the application is waiting for the server response.
  • The DefaultImageSrc method that is used to return all the images in the main categories to the default status.
  • The CollapseAll method to collapse all main categories except the selected category.
JavaScript
function SetDefaultImage_Src(){
    for (var i=1 ; i<= CountRow ; i++)
    {
         document.getElementById('Nav_IMG' + i ).src = 
                                  "Images/down.jpg";
    }
}
function ShowLoading(ThisRow , State){
    var This='none' , All='none';
    if (State == "Show") {This = "block" }
    for (var i=1 ; i<= CountRow ; i++)
    { 
        if (i != ThisRow)
            document.getElementById("LoadingIMG_" + 
                                    i).style.display = All ;
        else
        {
            document.getElementById("LoadingIMG_" + 
                                    i).style.display = This ;
        }
    }
}
function ColapseAll(ThisRow){
    for (var i=1 ; i<= CountRow ; i++)
    { 
        if (i != ThisRow)
            document.getElementById("Nav_Dav_" + 
                              i).style.display = "none";
    }
}

Good luck!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Iran (Islamic Republic of) Iran (Islamic Republic of)
ASP.net developer

Comments and Discussions

 
QuestionMaster page with Ajax Pin
StofferB8-Oct-07 23:14
StofferB8-Oct-07 23:14 
GeneralWonderful Pin
Zakaria Bin Abdur Rouf13-Mar-07 4:04
Zakaria Bin Abdur Rouf13-Mar-07 4:04 
GeneralRe: Wonderful Pin
Mohammad Akbarizadegan17-Mar-07 8:05
Mohammad Akbarizadegan17-Mar-07 8:05 
Generalhelp me , i have problems in Ajax ... Pin
barbod_blue11-Mar-07 21:13
barbod_blue11-Mar-07 21:13 
GeneralRe: help me , i have problems in Ajax ... Pin
Mohammad Akbarizadegan12-Mar-07 11:30
Mohammad Akbarizadegan12-Mar-07 11:30 
you can't call this function in this page !
You can call the alert() method in the javascript or use other good ways in MS-Ajax .

QuestionHow to highlight a specific link Pin
karthik624413-Feb-07 0:15
karthik624413-Feb-07 0:15 
QuestionHow to implement 3rd Level using this control with AJAX Concept Pin
RameshKrishnan.NET30-Dec-06 4:57
RameshKrishnan.NET30-Dec-06 4:57 
AnswerRe: How to implement 3rd Level using this control with AJAX Concept Pin
Mohammad Akbarizadegan30-Dec-06 10:29
Mohammad Akbarizadegan30-Dec-06 10:29 
Questionhow to add this control in master page , help me please Pin
Sriganesha Rao23-Nov-06 3:44
Sriganesha Rao23-Nov-06 3:44 
AnswerRe: how to add this control in master page , help me please [modified] Pin
Mohammad Akbarizadegan23-Nov-06 9:57
Mohammad Akbarizadegan23-Nov-06 9:57 
GeneralRe: how to add this control in master page , help me please Pin
Sriganesha Rao29-Nov-06 21:21
Sriganesha Rao29-Nov-06 21:21 
QuestionXML database instead of SQL..? Pin
yltsa19-Nov-06 21:30
yltsa19-Nov-06 21:30 
AnswerRe: XML database instead of SQL..? Pin
Mohammad Akbarizadegan19-Nov-06 22:35
Mohammad Akbarizadegan19-Nov-06 22:35 
GeneralRe: XML database instead of SQL..? Pin
yltsa20-Nov-06 3:35
yltsa20-Nov-06 3:35 
GeneralRe: XML database instead of SQL..? Pin
Mohammad Akbarizadegan20-Nov-06 6:57
Mohammad Akbarizadegan20-Nov-06 6:57 
GeneralExcellent Article&#1613; Pin
Alireza . Shirazi17-Nov-06 5:20
Alireza . Shirazi17-Nov-06 5:20 
GeneralRe: Excellent Article&#1613; Pin
subai28-Nov-06 19:45
subai28-Nov-06 19:45 
GeneralRe: Excellent Article&#1613; Pin
sohrabi31-Dec-06 6:43
sohrabi31-Dec-06 6:43 
GeneralSource code is missing Pin
TBermudez17-Nov-06 3:49
TBermudez17-Nov-06 3:49 
GeneralRe: Source code is missing Pin
Mohammad Akbarizadegan17-Nov-06 5:35
Mohammad Akbarizadegan17-Nov-06 5:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.