Navigator : Home > Tutorials > Controls Tutorials > ...
Using a MultiView Control with Multiple Views in VB.NET
This tutorial will show you how to use the MultiView Control in conjunction with AJAX to create multi-step applications. VB.NET.
In this tutorial, we will discuss the ASP.NET MultiView Control using VB.NET. This control is a way for developers to avoid making several aspx files for a long process such as a detailed form. We will be creating a form with several views without changing pages utilizing the AJAX controls.
First you can start a new Web Application in Visual Studio 2008. To allow the MultiView control to load each view without reloading the page, we will need to place it inside of the <ContentTemplate> tags which are apart of the ASP.NET AJAX components. An example is showed below.
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
</ContentTemplate> </asp:UpdatePanel>
</form> |
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
Now we can add the MultiView control from the toolbox. This will add the <asp:MultiView> tag to the application in between the <ContentTemplate> tags. The ActiveViewIndex is an attribute that tells the server which view to display first. Now we will add multiple views by using the <asp:View> tags. Inside of each <asp:View> tag is where you will place the contents of each "page."
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
This is View1. Click the button to go to View 2. </asp:View> <asp:View ID="View2" runat="server">
This is View2. Enter your name and click the button to go to View 3.<br /> Name: <asp:TextBox ID="fld_Name" runat="server" /> </asp:View> <asp:View ID="View3" runat="server">
<asp:Literal ID="lit_Name" runat="server" /> This is View3. </asp:View> </asp:MultiView> <br /><br /> <asp:Button ID="but_Submit" runat="server" Text="Continue" onclick="but_Submit_Click" /> |
In our example, our first view will consist of text directing the using to click the continue button. The continue button is located outside of the MultiView so it appears to be on every view. The next page will have a TextBox where the user will be directed to enter their name. Finally, the last page will display the name they entered or alert the user that no name was entered.
Now we need to program the VB.NET behind the page for the MultiView form to function properly. In design view you can double-click the continue button or add the click event sub as showed below.
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
Protected Sub but_Submit_Click(ByVal sender As Object, ByVal e As EventArgs)
If MultiView1.ActiveViewIndex = 0 Then
MultiView1.SetActiveView(View2)
ElseIf MultiView1.ActiveViewIndex = 1 Then
MultiView1.SetActiveView(View3)
If [String].IsNullOrEmpty(fld_Name.Text) Then
lit_Name.Text = "You did not enter your name. "
Else
lit_Name.Text = "Hi, " & fld_Name.Text & ". "
End If
ElseIf MultiView1.ActiveViewIndex = 2 Then
MultiView1.SetActiveView(View1)
End If
End Sub |
The beginning IF statement determines which current view the visitor is on. The next view is displayed with the SetActiveView method from the MultiView object. The second IF statement displays the name or alerts the user that a name wasn't entered in the <asp:Literal> tag located in View3. Once the continue button has been clicked on the last page, the visitor is redirected to View1 to start the process all over again.
The MultiView controls can be used outside of the AJAX components but will force the page to reload to display a new view.
Looking for more .NET Tutorials? Click Here!