View Example in ASP.NET using C#

In this article we will introduce with View control in ASP.NET using C#.

View Example in ASP.NET using C#

View control in ASP.NET is used to show the child components or controls. Basically we use the View control in MultiView control. MultiView control is used to show the many View in web page. In this example we use MultiView.
It has three View controls each View control has some child controls. When user select the View from DropDownList it will be displayed the child controls.

View.aspx (Design Page):

View.aspx (source code):

<%@ Page Title="" Language="C#" MasterPageFile="~/RoseindiaMaster.master" 
AutoEventWireup="true"
CodeFile="View.aspx.cs" Inherits="View" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
.style2
{
font-size: x-large;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div style="width: 360px">
<h2 style="color: Green">View in ASP.NET 4 , C#</h2>
Select View :
<asp:DropDownList ID="drp" runat="server" AutoPostBack="True" 
OnSelectedIndexChanged="drp_SelectedIndexChanged" Width="120px">
<asp:ListItem Value="0">View 1</asp:ListItem>
<asp:ListItem Value="1">View 2</asp:ListItem>
<asp:ListItem Value="2">View 3</asp:ListItem>
</asp:DropDownList>
<br /><hr />
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<strong><span class="style2">-----This is first view----- </span></strong>
<br /><br />
<asp:HyperLink ID="link1" runat="server" NavigateUrl="http://www.devmanuals.com/"
Text="Devmanuals.com" />
</asp:View>
<asp:View ID="View2" runat="server">
<strong><span class="style2">-----This is second view----- </span></strong>
<br /><br />
<asp:Calendar ID="calender1" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66"
BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="#663399" Height="200px" ShowGridLines="True" Width="344px">
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" />
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
</asp:Calendar>
<br />
Time:<% = DateTime.Now.ToString() %>
</asp:View>
<asp:View ID="View3" runat="server">
<span class="style2"><strong>-----This is third view----- </strong></span><strong>
<br class="style2" /></strong>
<br />
Name:
<br />
<asp:TextBox ID="TextBox" runat="server" />
<br />
<br />
<asp:Button ID="button1" runat="server" Text="Submit" />
</asp:View>
</asp:MultiView>
</div>
</asp:Content>

View.aspx.cs (C# code file):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class View : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void drp_SelectedIndexChanged(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = Convert.ToInt32(drp.SelectedValue);
}
}

Output:

When we select the View 1 form DropDownList it will displayed like this:

When we select the View 2 form DropDownList it will displayed like this:

When we select the View 3 form DropDownList it will displayed like this: