Multiview with view control in web application

Multiview in asp.net

Here by this article we learn how to use Multiview and View in asp.net

Multiview is very usefull you can use it instead of content pages for master pages.

First

Write this code in asp.net first page

Default.aspx:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>View Control Example</title>
</head>
<body>

<div id=”header”>
<h1>
ASP.NET Multiview
</h1>
</div>
<div id=”sidebar”>
<div id=”nav”>

</div>
</div>
<div id=”content”>
<div class =”itemContent” >
<div>

<asp:Label ID=”Label1? runat=”server” Font-Bold=”True”

Font-Size=”Medium”

Font-Underline=”True” Text=”View and MultiView Controls Example”></asp:Label>
<br />
<br />
<asp:Button id=”Button1? runat=”server” Text=”Click Me to See View1?

OnClick=”Button1_Click” BackColor=”Black” ForeColor=”#00CCFF” />

<asp:Button id=”Button2? runat=”server” Text=”Click Me to See View2?

OnClick=”Button2_Click” BackColor=”Black” ForeColor=”#00CCFF” />

<asp:Button id=”Button3? runat=”server” Text=”Click Me to See View3?

OnClick=”Button3_Click” BackColor=”Black” ForeColor=”#00CCFF” />

<asp:MultiView id=”MultiView1? runat=”server” ActiveViewIndex=0>
<asp:View id=”View1? runat=”server”>
<a style=”font-family: ‘Times New Roman’, Times, serif”>I am Dwayne</a> <br />
<br />
<asp:Image ID=”Image1? runat=”server” Height=”132px” ImageUrl=”dwaynejohnson.jpg” Width=”92px” />
<br />
</asp:View>
<asp:View id=”View2? runat=”server”>
<a style=”font-family: ‘Times New Roman’, Times, serif” >I am Nikhil</a>
<br />
<br />
<asp:Image ID=”Image2? runat=”server” ImageUrl=”My pic.jpg”/>
</asp:View>
<asp:View id=”View3? runat=”server”>
<a style=”font-family: ‘Times New Roman’, Times, serif”>I am a progress bar</a>
<br />
<br />

<asp:Image ID=”Image3? runat=”server”ImageUrl=”Loading1.gif” />
</asp:View>
</asp:MultiView>

Declaration:

Here we are creating three buttons for three views(under MultiView Control)

All buttons are changing the view and evrey view is having another contents

Here you have to paste three images in your solution explorer I have used here

1- dwaynejohnson.jpg

2- My pic.jpg

3- Loading1.gif

We have created One MultiView control and three View controls under Multiview control.

Note: You can use many View controls under MultiView controls as per your requirements.

Under view controls we are using image controls

You can use anycontrol which you want in place of image control.

Second:

Now add this code

Default.aspx.cs:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
MultiView1.Visible = false;
}
protected void Button1_Click(object sender, EventArgs e)
{
MultiView1.Visible = true;
MultiView1.SetActiveView(View1);
}
protected void Button2_Click(object sender, EventArgs e)
{
MultiView1.Visible = true;
MultiView1.SetActiveView(View2);
}
protected void Button3_Click(object sender, EventArgs e)
{
MultiView1.Visible = true;
MultiView1.SetActiveView(View3);
}
}

Declaration:
Here on the page loading the Multiview is invisible
When you click the first button it will show the first view control
When you click the second button it will show the second view control
When you click the third button it will show the third view control
SetActiveView is using for set the active view.

Interface:

Conclusion:

Here we learn how to use MultiView control in asp.net which works like a master page and its content pages.

If you feel help then contact me I will be happy to help you …

Thanks

Nikhil Kumar