0

Upgrading from the AjaxControlToolkit Collapsible Panel using jQuery in Asp.Net WebForms: Remembering the Panel State across postbacks.

by Jon 7. April 2011 22:11

In 06?/07 the AjaxControlToolkit was the Jewel in the Crown in the Microsoft Web Development Platform , an easy way to do Ajax for Asp.Net Web Forms.  It was really easy rapid development, tightly integrated into Visual Studio and it was Open Source, it was new and cool and quick to use.  Things changed, the cool kids moved onto other things, and people discovered that although it had its advantages the AjaxControlToolkit to wasted lots of bandwidth, constricted you to a particular look and feel, and had the potential to introduce bugs you couldn’t fix.  The current state of play is the toolkit hasn’t seen a new release since September 2009, and frameworks and browsers progressed massively.

There are lot of sites and systems that still use ASP.Net WebForms and many of them use the AjaxControlTookit to fill UI gaps.  We still use this toolkit in our day job system and I decided that we need to swap out the functionality the toolkit provides to jQuery.  The two controls I needed to replace were the Collapsible Panel and the Accordion.  There were examples online on doing both but I couldn’t find any examples that persisted postback.  I needed a collapsible panel that I can expand and contract with AJAX/JQuery but when the user presses a button that posts back to the server I want the server to return the page in the same state before the postback, i.e. still expanded, or still collapsed.  I also need jQuery/a Pattern that can easily be swapped out and to keep the UI experience consistent so I can update multiple pages and controls in one refactor sweep.

Surviving Postback: Collapsible Panel , using jQuery

The following snippet of code is a drop in replacement for the AjaxControlToolkit Collapsible Panel, it has been written to be a simple replacement for he AJAX extender but using jQuery and a small amount of code behind to return the panel in the correct state on postback.  This is what you need to do if you want to create the sample in Asp.Net Webforms from scratch on a separate page but it is even easier to replace and customise all your collapsible panels in your existing application.

Include jQuery in your Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
 

Add a Hidden Field to your Page/Control to store the Expanded State

<asp:HiddenField ID="ExpandState" runat="server" />

There is a Panel that shows some header information

<asp:Panel ID="Panel_Title" runat="server" Height="15px">
    <asp:Label ID="Label_Expander" runat="server" style="float: left" Text="Edit (Show...)" />
    <asp:Image ID="Image_Expander" runat="server" ImageUrl="/images/dn.gif" style="float: right" />
</asp:Panel>

 

There is a Panel that shows some content

<asp:Panel ID="Panel_Content" runat="server" style="overflow:hidden">
    This is some Content
</asp:Panel>
 

Add some jQuery to Expand and Contract the Content Panel when a user clicks on the Title Panel

<script type="text/javascript">
    $(document).ready(function () {

        // When a user clicks on the Title Panel
        $("#<%= Panel_Title.ClientID%>").click(function () {

            // Toggle the Panel_Content Visibility
            $("#<%= Panel_Content.ClientID%>").slideToggle(300, function () {

                // When the Content Panel has completed its animation check to see if the Content Panel is visible
                if ($("#<%= Panel_Content.ClientID%>").is(":visible")) {

                    // Set the HiddenValue Expanded State to 'Expanded' and Update the UI
                    $("#<%= ExpandState.ClientID %>").val("Expanded");
                    $("#<%= Label_Expander.ClientID %>").html("Edit (Hide...)");
                    $("#<%= Image_Expander.ClientID %>").attr("src", "/images/up.gif");

                } else {

                    // Reset the Hidden Value and reset UI back to its original State
                    $("#<%= ExpandState.ClientID %>").val("");
                    $("#<%= Label_Expander.ClientID %>").html("Edit (Show...)");
                    $("#<%= Image_Expander.ClientID %>").attr("src", "/images/dn.gif");

                }

            });

        });

    });
</script>

 

In your code behind add this code in the page/control load:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' Serverside Expander Code
    If Me.ExpandState.Value = "Expanded" Then
        Label_Expander.Text = "Edit (Hide...)"
        Image_Expander.ImageUrl = "/images/up.gif"
        Panel_Content.Style.Clear()
    Else
        Label_Expander.Text = "Edit (Show...)"
        Image_Expander.ImageUrl = "/images/dn.gif"
        Panel_Content.Style.Add("display", "none")
    End If
End Sub
 

Surviving Postback: AjaxControlToolkit Accordion, using jQuery

The following snippet of code is a drop in replacement for the AjaxControlToolkit Accordion, you can simply replace the AJAX extender with the jQuery and add a small amount of code behind always show the correct panel on postback.  This accordion only shows one panel at a time. This is what you need to do if you want to create the sample in Asp.Net Webforms from scratch but it was written so it is really simple to swap out your old Accordions.

Include jQuery in your Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

 

Add a Hidden Field to your Page/Control to store the clientid of the currently Expanded Panel.  The value of this hidden field is “” when there is no expanded panel

<asp:HiddenField ID="ExpandedClientID" runat="server" />

 

Any Number of Title and Content Panels

<asp:Panel class="TitlePanel" ID="Panel_Title1" runat="server" Height="15px">
    <asp:Label ID="Label_Expander1" runat="server" style="float: left" Text="Title 1" />
</asp:Panel>
<asp:Panel runat="server" ID="Panel_Content1" class="ContentPanel">
    Content 1
</asp:Panel>
<asp:Panel class="TitlePanel" ID="Panel_Title2" runat="server" Height="15px">
    <asp:Label ID="Label_Expander2" runat="server" style="float: left" Text="Title 2" />
</asp:Panel>
<asp:Panel runat="server" ID="Panel_Content2" class="ContentPanel">
    Content 2
</asp:Panel>

 

Add the following jQuery code

<script type="text/javascript">
    $(document).ready(function () {

        //toggle the component with class ContentPanel when the corresponding Title is clicked
        $(".TitlePanel").click(function () {

            // The Content Panel we want to manipulate is the Next One after this
            var ThisNextContentPanel = $(this).next(".ContentPanel");

            // Toggle This Content Panel
            ThisNextContentPanel.slideToggle(300, function () {

                // and then Hide the Other Content Panels
                $(".ContentPanel").not(ThisNextContentPanel).hide(200);

                // Set the Selected Panel to the Hidden Variable
                $("#<%= ExpandedClientID.ClientID %>").val(ThisNextContentPanel.attr('id'));

            });

        });

    });
</script>

 

Add the follow code behind to make sure we only display the correct panel on each postback:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    ' Show/Hide Panel_Content1
    If Panel_Content1.ClientID = ExpandedClientID.Value Then
        Panel_Content1.Style.Clear()
    Else
        Panel_Content1.Style.Add("display", "none")
    End If

    ' Show/Hide Panel_Content2
    If Panel_Content2.ClientID = ExpandedClientID.Value Then
        Panel_Content2.Style.Clear()
    Else
        Panel_Content2.Style.Add("display", "none")
    End If
End Sub

 

And that's it, we are now several steps closer to dropping the AjaxControlToolkit from our code base Smile

Tags: , , , ,

AjaxControlToolkit | vs2010 | jQuery

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading


Powered by BlogEngine.NET 2.0.0.36
Original Design by Laptop Geek, Adapted by onesoft, and finally some tiny tweaks by JonAlb