🎛️ ASP.NET UI Controls & Layout Management

Estimated reading: 5 minutes 312 views

ASP.NET – MultiView & View Controls – Beginner’s Guide to Switching UI Sections Dynamically

Introduction – What Are ASP.NET MultiView and View Controls?

In ASP.NET Web Forms, the MultiView and View controls allow you to display multiple sections of content on a single page—one at a time. Think of it like a tab system or step-by-step wizard where only one view is visible at any given moment.

These controls help simplify complex forms or UIs by:

Grouping related content in different views
Controlling visibility of views using C#
Allowing easy navigation between views (like steps)

In this guide, you’ll learn:

What MultiView and View controls are and why they’re useful
How to create multiple views in a form
How to switch views using buttons in C#
Full working code example with line-by-line explanations and output

ASP.NET Web Forms File Structure

File Name	Role
`MultiViewDemo.aspx`	The markup file with MultiView, View, and navigation buttons
`MultiViewDemo.aspx.cs`	Code-behind file with logic to switch views

Step 1: Markup File – `MultiViewDemo.aspx`

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultiViewDemo.aspx.cs" Inherits="MultiViewDemo.MultiViewDemo" %>

<html>
<body>
  <form id="form1" runat="server">
    
    <h3> ASP.NET MultiView Example</h3>

    <!-- Navigation Buttons -->
    <asp:Button ID="btnView1" runat="server" Text="Show View 1" OnClick="btnView1_Click" />
    <asp:Button ID="btnView2" runat="server" Text="Show View 2" OnClick="btnView2_Click" />
    <asp:Button ID="btnView3" runat="server" Text="Show View 3" OnClick="btnView3_Click" />
    <br /><br />

    <!-- MultiView Control -->
    <asp:MultiView ID="multiViewMain" runat="server" ActiveViewIndex="0">

      <!-- View 1 -->
      <asp:View ID="view1" runat="server">
        <h4>This is View 1</h4>
        <asp:Label ID="lblView1" runat="server" Text="Welcome to the first view!" />
      </asp:View>

      <!-- View 2 -->
      <asp:View ID="view2" runat="server">
        <h4>This is View 2</h4>
        <asp:Label ID="lblView2" runat="server" Text="This is the second view." />
      </asp:View>

      <!-- View 3 -->
      <asp:View ID="view3" runat="server">
        <h4>This is View 3</h4>
        <asp:Label ID="lblView3" runat="server" Text="Now you're seeing view three." />
      </asp:View>

    </asp:MultiView>

  </form>
</body>
</html>

Explanation of Controls

Control/Attribute	What It Does
`<asp:MultiView>`	Main container that holds multiple `<View>` sections
`ActiveViewIndex="0"`	Sets which view to show by default (0 = View1)
`<asp:View>`	Represents a single section or page of content
Navigation Buttons	Used to switch between views using C# logic

Step 2: Code-Behind File – `MultiViewDemo.aspx.cs`

public partial class MultiViewDemo : System.Web.UI.Page
{
    protected void btnView1_Click(object sender, EventArgs e)
    {
        // Show View 1
        multiViewMain.ActiveViewIndex = 0;
    }

    protected void btnView2_Click(object sender, EventArgs e)
    {
        // Show View 2
        multiViewMain.ActiveViewIndex = 1;
    }

    protected void btnView3_Click(object sender, EventArgs e)
    {
        // Show View 3
        multiViewMain.ActiveViewIndex = 2;
    }
}

Code Explanation for Beginners

Code/Line	What It Means
`multiViewMain.ActiveViewIndex`	Changes which View is currently shown (0, 1, or 2)
`btnView1_Click`, etc.	These methods are triggered when their respective buttons are clicked
`ActiveViewIndex = 1`	Will make the second view (`View2`) visible

Output Preview in Browser

On First Load:

[Show View 1] [Show View 2] [Show View 3]
↓
This is View 1
Welcome to the first view!

After Clicking “Show View 2”:

[Show View 1] [Show View 2] [Show View 3]
↓
This is View 2
This is the second view.

After Clicking “Show View 3”:

[Show View 1] [Show View 2] [Show View 3]
↓
This is View 3
Now you're seeing view three.

Only one view is displayed at a time. The others are hidden based on the ActiveViewIndex.

Summary – Recap & Takeaways

ASP.NET MultiView and View controls are perfect for organizing pages with:

Multiple steps (e.g., registration wizard)
Tab-like sections (e.g., profile, settings, billing)
Dynamic content areas that change based on user action

Key Learnings:

MultiView holds several View sections
You control which view is shown using ActiveViewIndex
Buttons can switch between views using simple C# logic
View content is preserved between switches (thanks to ViewState)

Use MultiView when you want to reduce page reloads and organize related content in one place.

Frequently Asked Questions (FAQs)

Can I have more than 3 Views inside a MultiView?
Yes. You can have as many Views as you want—just update the ActiveViewIndex to switch.

What’s the difference between Panel and View?
A Panel is always visible (unless you hide it), but Views inside a MultiView work exclusively—only one can be visible at a time.

Does each View remember its contents when hidden?
Yes. ASP.NET maintains ViewState for all Views inside the MultiView unless disabled.

Can I put other controls (TextBox, Button) inside each View?
Absolutely! Each View can contain any valid ASP.NET control.

« Previous Next »

Share Now :