Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

MultiView Control & Views – ASP Lab 014

1. About MultiView Control & View Control

In ASP 4.0, MultiView and View Control both works together to group the controls in a logical way. One or more View control can stay inside a MultiView Control and at a time MultiView control can show one View. Web Page Designer place neededcontrols inside the View and at runtime, MultiView control can decide which view to show. ActiveViewIndex property of the MultiView Control sets a specific View Control in visible state, or one can also use the method SetActiveView. If we decide not to show any view at all, we can set the ActiveViewIndex Property to -1. In this lab, we will explore how MultiView, and View controls work together.

1: Setup MultiView Controls with Views

In this section, we will setup the form with a MultiView Control and equip that with two child View Controls. The steps are below:

Step 1 - ASP Add Multi-View Control
Step 1 – ASP Add Multi-View Control

1) Open the WebSite from our previous Lab or you can create a new one. Then, add a form called 10_MultiView_View.aspx. In this form, place a Free Text via the source view, as shown.
2) In design view, you can check how the free text appears. After viewing, move to source view.
3) From the Toolbox, pick the MultiView Control and drag it to the already opened design view of the Aspx file.
4) Drop the control as shown in the Step Chart above. The added control is highlighted in the source view after the drop.
5) Switch to the design view and observe how Visual Studio shows the control. At this moment, the MultiView Control does not contain any child view in it. Switch to the Source View again.
6) Pick the View Control from the Toolbox and drag it to the source view.
7) Drop the control inside the asp:MultiView tag.
8) Likewise, you can drag & drop one more View Control inside the MultiView Control. Name the View Controls as shown in the picture.
9) Switch to the design view and you can see MultiView Control now contains two views on it. The control names (Id) are shown in the design view as well.
10) Drag & drop two button controls above the MultiView Control and set the properties as marked in this step number 10.
11) Observe how the ASP 4.0 form looks now. We setup our MultiView Control with two views in it.

2: Show the View via ActiveViewIndex Property

In this step, we will setup the view control with child controls and see how to show a specific view at runtime. The step chart is below:

Step 2 - Setup View Control and ActiveViewIndex Property
Step 2 – Setup View Control and ActiveViewIndex Property

1) First, switch to design view of the Web Form. Pick the Button control from the Toolbox and drag it to the Design view.
2) Drop the control on the View Control named, ButtonView.
3) Repeat the same step for adding two more controls. Now, the ButtonView View contains three buttons on it.
4) Set the properties of the buttons as shown here.
5) Drag and Drop three CheckBox Controls to the second View Control.
6) Set the properties as shown in the picture. At this stage, we have our View Controls also ready.
7) Next handle the Click events for the buttons Button View and CheckBox View.
8) Adding a Line break (Br) tag will help in showing the Button Controls and MultiView controls in two separate lines. Note, this is helpful when we run the Web form.
9) In the code behind, we set the ActiveViewIndex property to 0 on the Page Load handler. So, when the page is displayed, MultiView Control shows the ButtonView. In the event handlers for the CheckBox View Button and ButtonView button, we make use of this ActiveViewIndex property to decide which view to show. All set. Now, run the WebForm.
10) The WebForm shows the ButtonView View as we set ActiveViewIndex as 0 in the Page Load.
11) Click on the CheckBox View button to do the PostBack.
12) Button Click handler flips the View to CheckBox View as we set ActiveViewIndex as 1. So the browser now displays the second view, which is a pack of checkboxes.

MultiView Control – Code Reference

10_MultiView_View.aspx

10_MultiView_View.aspx.cs

Categories: ASP 4.0

Tags: , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.