MultiView Control in ASP.NET

Sometimes while developing application we need to create a single page that can handle several different tasks. For example you want to create a page with multiple views and only one view can be shown at one time. This method reduce the page redirection in your web application,, because you are using multiple views at the same page. To do this we use MultiView Control in ASP.NET. MultiView gives us a way to declare multiple views and show only one at a time. It has no default user interface. In this project I am going to share a demo of using MultiView Control.

Free Download: MultiView : Demo Project

Source Code of Web Page

<form id=”form1″ runat=”server”>

<asp:LinkButton ID="linkBtn1" runat="server" OnClick="linkBtn1_Click">View 1

</asp:LinkButton>
<asp:LinkButton ID="linkBtn2" runat="server" OnClick="linkBtn2_Click">View 2

</asp:LinkButton>
<asp:LinkButton ID="linkBtn3" runat="server" OnClick="linkBtn3_Click">View 3

</asp:LinkButton>

<asp:MultiView ID="MultiView1" runat="server">

<asp:View ID="View1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Content 1 goes here"></asp:Label>
<asp:Image ID="Image1" ImageUrl="~/image/one.gif" runat="server"/>
</asp:View>

<asp:View ID="View2" runat="server">
<asp:Label ID="Label2" runat="server" Text="Content 2 goes here">
 </asp:Label>
<asp:Image ID="Image2" ImageUrl="~/image/two.jpg" runat="server"/>
</asp:View>

<asp:View ID="View3" runat="server">
<asp:Label ID="Label3" runat="server" Text="content 3 goes here"></asp:Label>
<asp:Image ID="Image3" ImageUrl="~/image/three.jpg" runat="server"/>
</asp:View>

</asp:MultiView>
</form>

Aspx.cs Page Code: 

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            SetDefaultView();
        }

    }
    private void SetDefaultView()
    {
        MultiView1.ActiveViewIndex = 0;
    }

    protected void linkBtn2_Click(object sender, EventArgs e)
    {
        MultiView1.ActiveViewIndex = 1;
    }
    protected void linkBtn3_Click(object sender, EventArgs e)
    {
        MultiView1.ActiveViewIndex = 2;
    }
    protected void linkBtn1_Click(object sender, EventArgs e)
    {
        MultiView1.ActiveViewIndex = 0;
    }