Saturday, September 24, 2011

Maintain browser history using Ajax parent child tab container control

I am working on one project in on which  I have to maintain browser history for Ajax tab container control.when user click on tab history should be saved and it should be display on browser back button click event. I got a one blog post from my friend jalpesh  I got a basic idea about how we done. My requirement is something different like one page there is a tab container control are putted with three different type of tab like tab1,tab2 and tab3 now in tab1 content I want to load another user control which have four different type of tab like childtab1,childtab2,childtab3 and childtab4 I want to maintain Ajax tab container browser history on browser back button for child and parent tab so I make it possible using following way.
Historymain
Put script manager on Parent page like
<asp:ScriptManager id="scriptManager" runat="server" EnableHistory="true" OnNavigate="scriptManager_Navigate">   </asp:ScriptManager>
Now parent page contain scriptmanager as well as tabcontainer control.and child page(User Control) contain tabcontainer control.now one thing you notice there we use one script manager for both page so how can we get script manager on child page(User Control).To achieve this we have to define one property for script manager on child page(User Control) and add  Event handler for onvavigaet event of script manager when initializecomponent of child page(user control).following is code for that in Child page(user control)
private ScriptManager scriptManager { get { return AjaxControlToolkit.ToolkitScriptManager.GetCurrent(this.Page); } } 
Add event handler for onnavigate vent for scriptmanager using
override protected void OnInit(EventArgs e)
       {
           InitializeComponent();
       }
private void InitializeComponent()
       {
           scriptManager.Navigate += new EventHandler<HistoryEventArgs>(scriptManager_Navigate);
       } 
now on OnActiveTabChanged Event of ajaxtabcontainer of parent page we make a code for save history point in collection using addhistorypoint method of scriptmanager. we have save history point for both pages mean Parent page which contain Tab1,Tab2 and Tab3 and Child page(User Control) means its contain Child1,Child2,Child3 and Child4 etc. and one child page we can say one user control is there on Page. So we can achieve out goal for saving history by save history point value with tabcontainer name. so for that we make below code on ActiveTabChanged event of tabcontainer on parent page as well as Child Page(User Control)
Parent Page
protected void ajxTab_ActiveTabChanged(object sender, EventArgs e)
        {
           if(scriptManager.IsInAsyncPostBack && !scriptManager.IsNavigating)
           {
               scriptManager.AddHistoryPoint("historyPoint", string.Format("{0}#{1}","ajxTab", ajxTab.ActiveTabIndex.ToString()),ajxTab.ActiveTab.HeaderText);
           }
        }
Child Page(User Control)
protected void subajxTab_ActiveTabChanged(object sender, EventArgs e)
        {
            if (scriptManager.IsInAsyncPostBack && !scriptManager.IsNavigating)
            {
                scriptManager.AddHistoryPoint("historyPoint",string.Format("{0}#{1}","subajxTab",subajxTab.ActiveTabIndex.ToString()), subajxTab.ActiveTab.HeaderText);
            }
        } 
when browser back button is clicked scriptmanager  Navigate event is fire so we can check on scriptmanager navigate event if historypoint is not null then set activeTabIndex for that tab.this scriptmanager navigate event is implemented on both page parent and child page(User Control) if parent page ajax tab name we found after splitting historypoint value then we set parent page tabcontainer control activeTabIndex else child page (User Control)activeTabIndex index following is code  is for scriptmanager Navigate event for both page.
Parent Page
protected void scriptManager_Navigate(object sender, HistoryEventArgs e)
{
string state = e.State["historyPoint"];
if (state != null)
{
string[] arrstring = state.Split('#');
if (arrstring[0] == "ajxTab")
ajxTab.ActiveTabIndex = Convert.ToInt32(arrstring[1]);
}
else

ajxTab.ActiveTabIndex = 0;
}

Child Page
void scriptManager_Navigate(object sender, HistoryEventArgs e)
       {
           string state = e.State["historyPoint"];
           if (state != null)
           {
               string[] arrstring = state.Split('#');
               if (arrstring[0] == "subajxTab")
                   subajxTab.ActiveTabIndex = Convert.ToInt32(arrstring[1]);
           }
           else
               subajxTab.ActiveTabIndex = 0; 

       }
I tried my best to explain this in detail if any one could to  get some point please feel free to contact me by putting comment I will try my best to explain as soon as possible.Thank You for reading. Stay Turned for more.