Click here to Skip to main content
Click here to Skip to main content

How to Implement a NavigationPanel Using AJAX

, 11 Mar 2007
Rate this:
Please Sign up or sign in to vote.
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

--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).

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:

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:

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.

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.
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

Share

About the Author

Mohammad Akbarizadegan
Web Developer
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
ASP.net developer

Comments and Discussions

 
QuestionMaster page with Ajax PinmemberStofferB8-Oct-07 23:14 
GeneralWonderful PinmemberZakaria Bin Abdur Rouf13-Mar-07 4:04 
GeneralRe: Wonderful PinmemberMohammad Sadegh Akbarizadegan17-Mar-07 8:05 
Generalhelp me , i have problems in Ajax ... PinmemberMember #307324711-Mar-07 21:13 
GeneralRe: help me , i have problems in Ajax ... PinmemberMohammad Sadegh Akbarizadegan12-Mar-07 11:30 
QuestionHow to highlight a specific link Pinmemberkarthik624413-Feb-07 0:15 
QuestionHow to implement 3rd Level using this control with AJAX Concept PinmemberRameshKrishnan.NET30-Dec-06 4:57 
AnswerRe: How to implement 3rd Level using this control with AJAX Concept PinmemberMohammad Sadegh Akbarizadegan30-Dec-06 10:29 
Questionhow to add this control in master page , help me please PinmemberSG Rao23-Nov-06 3:44 
AnswerRe: how to add this control in master page , help me please [modified] PinmemberMohammad Sadegh Akbarizadegan23-Nov-06 9:57 
GeneralRe: how to add this control in master page , help me please PinmemberSG Rao29-Nov-06 21:21 
QuestionXML database instead of SQL..? Pinmemberyltsa19-Nov-06 21:30 
AnswerRe: XML database instead of SQL..? PinmemberMohammad Sadegh Akbarizadegan19-Nov-06 22:35 
GeneralRe: XML database instead of SQL..? Pinmemberyltsa20-Nov-06 3:35 
GeneralRe: XML database instead of SQL..? PinmemberMohammad Sadegh Akbarizadegan20-Nov-06 6:57 
GeneralExcellent Article&#1613; PinmemberAlireza . Shirazi17-Nov-06 5:20 
GeneralRe: Excellent Article&#1613; Pinmembersubai28-Nov-06 19:45 
GeneralRe: Excellent Article&#1613; Pinmembersohrabi31-Dec-06 6:43 
GeneralSource code is missing PinmemberTBermudez17-Nov-06 3:49 
GeneralRe: Source code is missing PinmemberMohammad Sadegh Akbarizadegan17-Nov-06 5:35 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 11 Mar 2007
Article Copyright 2006 by Mohammad Akbarizadegan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid