asp.net c# tutorials and examples code for web developers

How to use MultiView control in asp.net

MultiView and View Server Control
MultiView is an asp.net web server control. View control is also an asp.net web server control. but view control always be contained within multiview control. both multiview and view control act as a container for other controls and markup. only one view can be defined as active view in multiview. multiview ActiveViewIndex property specify the active view within view collections of a multiview. only active view control is rendered to the page.

we can navigate views by setting the multiview ActiveViewIndex property value. ActiveViewIndex property hold the specified view's index number. multiview control can include navigation buttons that we can add to each view.

we can create a navigation button by adding any Button, LinkButton or ImageButton server control to each view. for that we need to set the CommandName and CommandArgument properties of each views. reserved CommandName values are NextView, PrevView, SwitchViewByID and SwitchViewByIndex. NextView and PrevView corresponding CommandArgument have no values. SwitchViewByID CommandArgument value is ID of the view to switch to. SwitchViewByIndex CommandArgument value is index number of the view to switch to.

you can create a multi page form using multiview and view controls. but Wizard control is better for creating a multiple page form that need to fill step by step. multiview and view control provide support similar to the wizard control. wizard has more built in UI elements than multiview control. so multiview is better choice if we want to display view based on condition rather than sequence.

following example source code demonstrate us that how can we use multiview and view controls in asp.net. in this web form we create a multiview control and five view controls within it. each view display a beautiful image using Image server control. we also put a button control on each view to navigate views. when user click the navigation button, the multiview control display next view.
MultiView.aspx
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, System.EventArgs e) {
        if(!Page.IsPostBack){
            MultiView1.ActiveViewIndex = 0;
           }
    }
    void NextImage(object sender, System.EventArgs e)
    {
        MultiView1.ActiveViewIndex += 1;
    }
    protected void Page_PreRender(object sender, System.EventArgs e) {
        Label1.Text = "Beautiful Forest Image: " + (MultiView1.ActiveViewIndex + 1).ToString() + " of " + MultiView1.Views.Count.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>MultiView Control Simple Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Font-Size="Large" ForeColor="Crimson"></asp:Label>
        <br /><br />
        <asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="View1" runat="server">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Forest1.jpg" />
                <br />
                <asp:Button ID="Button1" runat="server" Text="Next Image" OnClick="NextImage" />
            </asp:View>
            <asp:View ID="View2" runat="server">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Forest2.jpg" />
                <br />
                <asp:Button ID="Button2" runat="server" Text="Next Image" OnClick="NextImage" />
            </asp:View>
            <asp:View ID="View3" runat="server">
                <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/Forest3.jpg" />
                <br />
                <asp:Button ID="Button3" runat="server" Text="Next Image" OnClick="NextImage" />
            </asp:View>
            <asp:View ID="View4" runat="server">
                <asp:Image ID="Image4" runat="server" ImageUrl="~/Images/Forest4.jpg" />
                <br />
                <asp:Button ID="Button4" runat="server" Text="Next Image" OnClick="NextImage" />
            </asp:View>
            <asp:View ID="View5" runat="server">
                <asp:Image ID="Image5" runat="server" ImageUrl="~/Images/Forest5.jpg" />
            </asp:View>
        </asp:MultiView>
    
    </div>
    </form>
</body>
</html>
Related asp.net example