C#: Web Multi-view Control
By: Zack Turnbow
Introduction
At some point in developing web sites or web applications, there will come a time when a requirement of having tab functionality like there is for a Windows application. Before ASP.NET, JavaScript had to be used to achieve this. But when ASP.NET 2.0 came out, a new set of controls were introduced to give the ability of having tab functionality for the web. With the new controls of a multi-view and view when combined with a few basic buttons, the tab can be created.
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
Scenario
There is a need for an employee to have easy access to their general information and their paycheck information. Instead of creating two separate pages to show this information, a tab will be needed to flip back and forth from one set of information (General) to the other (Paycheck).
Implementation
On a new aspx page, a DIV section needs to be created to hold the button controls that will be acting as tabs. Inside the DIV, add to buttons. To make sure that the buttons look like tabs and not buttons, set the border style to no border and the border width to 0px. Now to let the user know which tab that is currently being view, there needs to be two different background colors for the buttons. Pick contrasting colors so it’s fairly easy to tell the difference. In the article, Gainesboro will be the active tab and Silver will be the inactive tab.
Now that the buttons are formatted correctly, find the Multi-view control in the toolbox and drag it onto the page. Next find and drag the View control inside the Multi-view control. Add another View control under the first one.
From here, add the controls that will be needed to display the information that pertains to each tab. These controls will go inside the View control that represents the tab.
After all of the controls are laid out, it is time to add the tab functionality with a little C# code. For the Page_Load event, we need to tell the page what tab to show first. This can be achieved by setting the ActiveViewIndex property by entering in the following:
where mvMain is the name of the Multi-view control. You can run the application and the first tab will be rendered.
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
Finally, to wire up the actual tab functionality, a click event needs to be created for each of the buttons (tabs). There are three tasks that need to be completed inside these click events. First, change the ActiveViewIndex of the Multi-view to the appropriate tab, 0 for the first tab and 1 for the other. For the other two, this is where the two contrasting colors come into play. For the tab that is becoming active, set the background color of the button (tab) to the active color and then set the inactive button to the inactive color.
cmdEmployeeMain.BackColor = System.Drawing.Color.Gainsboro;
cmdEmployeePaycheck.BackColor = System.Drawing.Color.Silver;
Run the application to test the functionality. This very simple technique can be extended to other uses. To reduce the post-backs, these controls can be wrapped in an AJAX update panel. Another possibility would be to create a custom control and give the ability to add tabs dynamically.
What have we learned?
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
How to use the Multi-view, View, and buttons to create a tab like control.
Attachments
|
|