12,065,500 members (45,087 online)
This article describes a simple way to mimic the appearance of Microsoft’s Outlook sidebar within an ASP.NET 2.0 web application. The approach is based upon the use of the existing
MultiView control contained in the standard ASP.NET 2.0 toolbox, and does not require much time or effort to implement.
This article includes a sample web application that presents an example of the approach in use.
In order to begin, unzip the downloaded files and open the project provided. Within the project, you will find a simple ASP.NET 2.0 application written in VB.NET; the web application contains a single web page (Default.aspx).
The default.aspx page is built from a template table containing a sidebar, a header, and a main display area. In order to add a similar table to a project, create a new web page, open the “Layout” menu option, then select “Insert Table” from that option. The Insert Table dialog will then appear (Figure 1). From this dialog, select the “Template” option at the top of the dialog, then open the combo box to reveal the table options. Select the option showing “Header and Side”. When you click “OK”, a table in the format specified will be added to the open web page. You may wish to set the size properties for each of the table’s areas before adding any additional controls; it is typically easier to set up the proportions of the table when no controls are yet placed within its bounds. One thing you might want to do at this point is to set the sidebar area’s vertical alignment property to
Bottom. You can set the banner and main display area as you see fit.
Once the table is placed and you are happy with its arrangement, it is time to add the controls necessary to support the appearance of Microsoft Outlook.
Figure 1: Insert Table Dialog in Visual Studio 2005
Take a look at Outlook (figure 2) and note that the sidebar is really pretty simple. There are a set buttons at the bottom of the sidebar and, above the buttons, is a display area used to display the controls relevant to the button selected. Whenever a new button is clicked from the bottom of the sidebar, the contents of the sidebar’s display area are updated to show the selection’s control options.
At the top of the sidebar is a label that displays the contents of the sidebar. Whenever a new option is selected by clicking one of the buttons at the bottom of the sidebar, the label is updated to reflect the selection.
Inside the sidebar’s display area, there can be additional collapsible panels that may be expanded or contracted to reveal or hide the panel’s content. These are very simple to construct from the Microsoft multi-view panel as well, and a simple example of such a panel is included in the demonstration.
Figure 2: Microsoft Outlook With Sidebar Visible (on the left)
Once the table has been configured, drag a
Label from the toolbox and place it in the sidebar area of the table. Next, drag a
MultiView control under the
Label, and then drag three
View controls inside the
MultiView control. Lastly, drag three
Button controls into bottom of the sidebar area.
You may drag some other controls inside each of the view panels; I merely placed some checkbox and radio button lists into the views for the purposes of this demonstration. However, the
View control is a container control, and you may place any other control inside a
View control that you wish.
To demonstrate the collapsible panel, I constructed a simple user control that you will find in the demonstration project. The user control is entitled, “CollapsePanel.vb”; if you open it up for a look, you will see that it contains a single
Panel with its width set to 100%. Inside the panel, you will find a small table with three rows, the second row contains two table cells; in the left hand cell is a
Label, and in the right hand cell, there are two image button controls. The left button control is named, “
btnOpen”, and the right hand button control is named “
btnClose”. Each image button is assigned an arrow looking icon, one pointing down and one pointing to the right. The visibility of the “
btnClose” image button is set to
I placed a single
Label control in rows 1 and 3 and set the
Text property to “<hr/>” to draw a horizontal line above and below the title. Below the table, there is a single
MultiView control, and inside the
MultiView control is a single
View control. When a page loads this control, the
View control will default to show no panels at all. If you prefer to have the control load with the
Panel visible, you will need to set the active view index property of the
MultiView control to “0” or “View1” (our single panel) and swap the visibility between the two image button controls.
btnClose” click event handler will set the
MultiView control’s active index property to “-1” to hide the
View control. The event handler will also swap the visibility of the “
btnClose” button to
False and the “
btnOpen” button’s visibility to
True. The entire user control’s code-behind page is as follows:
Partial Class CollapsePanel Inherits System.Web.UI.UserControl Protected Sub btnOpen_Click(ByVal sender As Object, _ ByVal e As System.Web.UI.ImageClickEventArgs) _ Handles btnOpen.Click MultiView1.ActiveViewIndex = 0 btnOpen.Visible = False btnClose.Visible = True End Sub Protected Sub btnClose_Click(ByVal sender As Object, _ ByVal e As System.Web.UI.ImageClickEventArgs) _ Handles btnClose.Click MultiView1.ActiveViewIndex = -1 btnOpen.Visible = True btnClose.Visible = False End Sub End Class
Once this user control has been built, add it to one of the views in the default.aspx page.
The code for the main page is just about as simple as it is for the user control. Here again, the objective is merely to swap visible panels in response to button click events originating from the three buttons beneath the
MultiView control. Given it would be nice to open up one of the panels on page load, the page load event contains a little bit of code to handle that task. In this case, the page load looks like this:
Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Me.MultiView1.SetActiveView(View1) End If End Sub
Here, if the page is not a post back, the
MultiView control is configured to display view 1 of the three available views. You can set this value with an integer if you prefer. If you don’t want any of the panels to display on the initial page load, set the value to “-1” or do nothing as, by default, the
MultiView control will hide all of the views.
The only task remaining is to set the event handlers for the three button controls used to select each of the three separate views contained in the
MultiView control. That is accomplished with the following bit of code:
Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button1.Click Me.MultiView1.SetActiveView(Me.View1) Button1.Font.Bold = True Button2.Font.Bold = False Button3.Font.Bold = False txtHeader.Text = "Days" End Sub Protected Sub Button2_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button2.Click Me.MultiView1.SetActiveView(Me.View2) Button1.Font.Bold = False Button2.Font.Bold = True Button3.Font.Bold = False txtHeader.Text = "Tools" End Sub Protected Sub Button3_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button3.Click Me.MultiView1.SetActiveView(Me.View3) Button1.Font.Bold = False Button2.Font.Bold = False Button3.Font.Bold = True txtHeader.Text = "Cars" End Sub
This is also pretty simple. In each event handler, the
MultiView control's set active
View is passed the
View to be displayed; the
MultiView control is only capable of displaying a single
View control at a time, so you need not write any additional code to hide the other
Views as you would have to do if you were to implement a similar project with a
After setting the current
View, the selected button’s text is bolded and the unselected buttons have the bolding removed, and lastly, the text box containing the sidebar’s header text is updated to reflect the current selection.
That wraps it up. If you build and run the web application, you should see the following in your browser: (figure 3)
Figure 3: Demonstration Web Application
If you click on each of the buttons, you should see the content of the sidebar update. If you select the “Cars” button, you should see the collapsible panel user control, and if you click on its icon, you should see it reveal and hide the contents of its
MultiView control: (figures 4 and 5)
Figure 4: Collapsible Panel Closed
Figure 5: Collapsible Panel Opened