Multiview and Wizard controls of ASP. net2.0

Prepared by Liao Yunxiao

In Asp.net 1.1, if you want to create a wizard ApplicationProgramIt is troublesome. For example, a user registration application requires several steps. After filling out a form in a step, you can click "Next" to go to the next step, you can also use the "previous" function to return to the previous page. In Asp.net 2.0, two new controls are introduced: multiview and Wizard wizard controls, which greatly facilitates user use. In this article, we will take vs.net 2005 as an example to illustrate how to use these two controls to create an application. Two examples are given: online survey and user registration, readers can use this article to deepen their understanding of the two controls. In these two examples, we will also use a new control masterpage in Asp.net 2.0. For specific usage, see otherArticle.

First, we first use VB.net to create a new website project and add a masterpage template page. The design is as follows:

Template page

We can see that for our application demonstration, two connections are listed on the left of the template page on the previous page, which are online investigation and registration. Now we will introduce how to use the multiview control. The so-called multiview control is used to display the page content in several parts, and the navigation function of each part is used to connect pages, such as "previous" and "Next. Let's take a look at the attributes of the multiview control:

1) activeviewindex the default value of this attribute is 1. to display the page in step 1, set the value to 0.

2) views: A multiview control contains multiple views objects. controls can be placed in each view object. Note that in each view object, the name ID of the placed control must be unique; otherwise, an error occurs.

Note that the multiview control does not provide any automatic buttons. To implement the "Next" and "previous" buttons, you must add them by yourself.

Next we will design a simple application of this online survey. For the sake of simplicity, we will use the database to store user options under actual conditions. This survey consists of the following four steps:

1) on the first page, users are allowed to enter personal information.

2) on the second page, select your favoriteProgramming Language

3) on the third page, enter your favorite organization

4) The first three pages are displayed.

First, we add a blank page, select the created template page as the template, and drag a multiview control to the page. After the multiview control is added, drag four View Controls to it and add related controls to each view control, as shown in

Add related controls

Time: From: Tianji yesky

Note that the next and previous buttons are placed in each view control to facilitate page navigation. In addition, you can set the commandname attribute for each button, as shown in the following table. Command Name Nextview Navigate to the next page. Prevview Navigate to the previous page Switchviewbyid When the command name attribute is set to switchviewbyid, you must set the command argument attribute. For example, commandargument = "view1" indicates that when you click this button, the page with the ID view1 is redirected. In this example, we set the command name attribute of each button to nextview or preview.CodeThe structure is as follows (see the attachment for the code ): <Asp: multiview id = "multiview1" runat = "server" activeviewindex = "0"> <Asp: View id = "view1" runat = "server"> ... </ASP: View> <Asp: View id = "view2" runat = "server"> ... </ASP: View> </ASP: multiview> To run our application, the first step is to enter personal information, such: Enter personal information Click "Next" to go to the next page: Page Click the next button to go to the 3rd pages. The last 4th pages are as follows. You can see the information you entered on previous pages: Output In order to finally output the information entered before the user, write the following code in the event in the finished button of the 3rd pages (View: Partial class survey Protected sub btnfinish_click (byval sender as object, Byval e as system. eventargs) handles btnfinish. Click Lblfirstname. Text = txtfirstname. Text Lbllastname. Text = txtlastname. Text Lblemailid. Text = txtemail. Text If rdovb. Checked then Lbllanguage. Text = "VB" Elseif rdocsharp. Checked then Lbllanguage. Text = "C #" Elseif rdojava. Checked then Lbllanguage. Text = "Java" End if If rdomicrosoft. Checked then Lblorganization. Text = "Microsoft" Elseif rdosun. Checked then Lblorganization. Text = "Sun Microsystems" Elseif rdoibm. Checked then Lblorganization. Text = "IBM" End if End sub

Wizard Control

In Asp.net 2.0, the wizard control is more convenient than the multiview control. The wizard control has already set buttons such as the previous step, the next step, and the completion button. In the design view, you can view the page content of each step as needed, unlike the multiview control, in the design view, all the steps involved in a page are displayed. The following describes important properties and events of the wizard control:

Activestepindex-displays the first steps in the Wizard. The default value is 0 when the page is loaded.

Displaysidebar-when this attribute is set to true, all steps of the entire process are displayed on the page.

Displaycancelbutton-when this attribute is set to true, a Cancel button is displayed on each page. To handle canceled events, you can write code in cancelbuttonclick ().

Important events

Activestepchanged. --- events triggered when switching from one step to another

Previusbuttonclick.-events triggered when you press the "previous" button

Nextbuttonclick. --- the event triggered when you press "Next ".

Finishbuttonclick. ----- events triggered when the "finish" button is completed

Cancelbuttonclick. ----- events triggered when the "cancel" button

Next, we will recreate a blank page and use the previous template page as the template page. Drag and Drop a wizard control to the page. In the control's wizardsteps attribute, click and a new window is displayed, as shown in.

Wizardsteps attributes

Here, add steps through "add. After adding several steps, click OK. Return to the wizard control, select and click the smart sensing tag in the upper-right corner of the wizard control. In the displayed window, select the page of each step from the "Step" drop-down list, add related controls to the page of each step. Here, we have designed four steps. The page of the first step is shown in. For the pages and codes of other steps, see the code in the attachment:

Procedure

Finally, in the event of the finish button on the last page, write the following code to display the user input in the previous steps:

Protected sub wizard+finishbuttonclick (byval sender as object, Byval e as system. Web. UI. webcontrols. wizardnavigationeventargs) Handles wizard1.finishbuttonclick Lblfirstname. Text = txtfirstname. Text Lbllastname. Text = txtlastname. Text Lblemailid. Text = txtemail. Text Lblusername. Text = txtusername. Text If rdodaily. Checked then Lblnewsletters. Text = "Daily Updates" Elseif rdoweekly. Checked then Lblnewsletters. Text = "weekly summary" Elseif rdonothanks. Checked then Lblnewsletters. Text = "no thanks" End if End sub

When you run the program, you first see the first registration step, as shown in figure

Registration Procedure

Next, press the next button to enter the second page, as shown in figure

Second page

Finally, on the second to last page, click Finish to display the final summary page, showing the content entered by the user in the previous steps.

Summary Page

Summary

This article briefly introduces how to use the multiview and Wizard controls for simple development in Asp.net 2.0. As you can see, the use of the wizard control is easier and more convenient in writing applications with consecutive steps such as user registration.