This tutorial will show you how to use the MultiView Control in conjunction with AJAX to create multi-step applications. C#.
Using the MultiView Control in ASP.NET 3.5 with C#
This tutorial will show you how to use the MultiView Control in conjunction with AJAX to create multi-step applications. C#.
The ASP.NET MultiView control can be used for virtually
anything. Introduced in ASP.NET 2.0, the MultiView provides exactly
that - multiple views on one page, with one view being displayed at a
time. This provides a great advantage over Panels when trying to
develop a multi-step process, as you are not required to set the
visibility of each individual view for each step. Instead, you can just
set the currently active view. All controls within each view will be
accessible in the code-behind.
In this example, we will look at how we can create a multi-step
process with the MultiView control. The structure of the syntax is very
straightforward and logical:
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
This is View1. Click the button to goto View 2.
</asp:View>
<asp:View ID="View2" runat="server">
This is View2. Enter your name and click the button to goto 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>
|
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
Here, we have created three views within the multiview control. We
set the ActiveViewIndex to zero, to make the default view the first.
The
MultiView control should be used in conjunction with an UpdatePanel, as
this gives a much more fluid feel to the application and when moving
from View to View, only the View will be reloaded, instead of the
entire page. We implement AJAX in ASP.NET 3.5 like so:
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
This is View1. Click the button to goto View 2.
</asp:View>
<asp:View ID="View2" runat="server">
This is View2. Enter your name and click the button to goto 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" />
</ContentTemplate>
</form> |
Notice we also added a button to navigate through the views (or
steps). We have a textbox control on View2, and then a Literal control
on View3. We will reference both of these controls in the code-behind
and you will see that it is no different than referencing controls that
are simply placed onto a normal page:
protected void but_Submit_Click(object sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex == 0)
{
MultiView1.SetActiveView(View2);
}
else if (MultiView1.ActiveViewIndex == 1)
{
MultiView1.SetActiveView(View3);
if (String.IsNullOrEmpty(fld_Name.Text))
{
lit_Name.Text = "You did not enter your name. ";
}
else
{
lit_Name.Text = "Hi, " + fld_Name.Text + ". ";
}
}
else if (MultiView1.ActiveViewIndex == 2)
{
MultiView1.SetActiveView(View1);
}
|
Here, on the button click we check to see which view is currently
active and then navigate to the next view. We also reference the
controls like normal, and take the name from the TextBox and insert it
into the Literal.
|
