MultiView and View Controls in ASP.NET 2.0: ASP Alliance


MultiView and View Controls in ASP.NET 2.0

page

by Jason N. Gaylord
Feedback

Average Rating:

Views (Total / Last 10 Days): 68841/ 43

Overview

In ASP.NET 1.x, the Panel control was used to segregate controls into groups. Many developers would use a Panel to hide or show controls for a particular purpose. For instance, if the user clicked on a particular button, a DataGrid may appear. However, if the user clicked on a different button, a graph may appear.

In ASP.NET 2.0, the MultiView and View controls were introduced. The MultiView control acts as a stand-alone Panel-like control, or can be a container for multiple Panel-like controls called Views. Using the new MultiView control with the View control allows developers an even easier way to toggle between "Panels."

Section 1: Using Panels in ASP.NET 1.x

Here is an example of how controls and content were hidden or shown with ASP.NET 1.x:

<%@ Page Language="VB" %>

<script runat="server">

    Sub Button1_Click(s as Object, e as EventArgs)
        Panel1.visible = true
        Panel2.visible = false
        Panel3.visible = false
    End Sub

    Sub Button2_Click(s as Object, e as EventArgs)
        Panel1.visible = false
        Panel2.visible = true
        Panel3.visible = false
    End Sub

    Sub Button3_Click(s as Object, e as EventArgs)
        Panel1.visible = false
        Panel2.visible = false
        Panel3.visible = true
    End Sub

</script>

<html>

<head>
<title>Panels in ASP.NET 1.x</title>
</head>

<body>

<form runat="server">
    <asp:Button id="Button1" runat="server" Text="Panel one" OnClick="Button1_Click" /> &nbsp;
    <asp:Button id="Button2" runat="server" Text="Panel two" OnClick="Button2_Click" /> &nbsp; 
    <asp:Button id="Button3" runat="server" Text="Panel three" OnClick="Button3_Click" />
    <br /><br />

    <asp:Panel id="Panel1" runat="server">
        Content Here (Panel 1)…
    </asp:Panel>

    <asp:Panel id="Panel2" runat="server" visible="false">
        Content Here (Panel 2)…
    </asp:Panel>

    <asp:Panel id="Panel3" runat="server" visible="false">
        Content Here (Panel 3)…
    </asp:Panel>
</form>

</body>

</html>

Section 2: Using MultiView and View in ASP.NET 2.0

Here is an example of how to accomplish the same using the MultiView and View controls within ASP.NET 2.0:

<%@ Page Language="VB" %>

<script runat="server">

    Sub Button1_Click(s as Object, e as EventArgs)
        MultiView1.SetActiveView(View1)
    End Sub

    Sub Button2_Click(s as Object, e as EventArgs)
        MultiView1.SetActiveView(View2)
    End Sub

    Sub Button3_Click(s as Object, e as EventArgs)
        MultiView1.SetActiveView(View3)
    End Sub

</script>

<html>

<head>
<title>Panels in ASP.NET 2.0 (as MultiView)</title>
</head>

<body>

<form runat="server">
    <asp:Button id="Button1" runat="server" Text="Panel one" OnClick="Button1_Click" /> &nbsp;
    <asp:Button id="Button2" runat="server" Text="Panel two" OnClick="Button2_Click" /> &nbsp; 
    <asp:Button id="Button3" runat="server" Text="Panel three" OnClick="Button3_Click" />
    <br /><br />

    <asp:MultiView id="MultiView1" runat="server" ActiveViewIndex=0>
        <asp:View id="View1" runat="server">
            Content Here (View 1)...
        </asp:View>
        <asp:View id="View2" runat="server">
            Content Here (View 2)...
        </asp:View>
        <asp:View id="View3" runat="server">
            Content Here (View 3)...
        </asp:View>
    </asp:MultiView>
</form>

</body>

</html>

Conclusion

Hopefully, you can see that using these new controls will cut back on code and make any coding necessary a bit cleaner. Even though these controls do not have the same "value" as the Membership or Web Parts controls, they are still very useful.

Product Spotlight