📄 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.
Share Now :
