MultiView Example in ASP.NET using C#
MultiView control in ASP.NET acts as a container for group of view controls. You can see the all view in a single MultiView control in a single web page. You will use the more than one View in a MultiView control. Your one or more operation will be performed in a single page. In this example we make three View in a MultiView control. When user selects the view from DropDownList it will be shown in MultiView control.Exanple1:
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></title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:DropDownList ID=”DropDownList1″ runat=”server” AutoPostBack=”True”
onselectedindexchanged=”DropDownList1_SelectedIndexChanged”>
<asp:ListItem Value=”0″>one</asp:ListItem>
<asp:ListItem Value=”1″>two</asp:ListItem>
<asp:ListItem Value=”2″>three</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<hr />
<asp:MultiView ID=”MultiView1″ runat=”server”>
<asp:View ID=”one” runat=server>
<h2>This is First Contain</h2>
<br />
<asp:Calendar ID=”Calendar1″ runat=”server”></asp:Calendar>
<br />
<asp:Button ID=”Button1″ runat=”server” Text=”Button” />
</asp:View>
<asp:View ID=”two” runat=server>
Name: <asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox><br />
City: <asp:TextBox ID=”TextBox2″ runat=”server”></asp:TextBox>
<br />
<asp:Button ID=”Button2″ runat=”server” Text=”Button” />
</asp:View>
<asp:View ID=”third” runat=server>
<asp:RadioButtonList ID=”RadioButtonList1″ runat=”server”>
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList>
<br />
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>
Default.aspx.cs
————————
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = Convert.ToInt16(DropDownList1.SelectedValue);
}
}
Example 2:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 361px;
height: 275px;
margin-left: 40px;
}
.example1 {
-moz-border-radius: 15px;
border-radius: 15px;
font-family: Georgia;
color: #003366;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnl1" runat="server" CssClass="example1" BorderColor="Maroon" BorderWidth="2px" Width="450px">
<asp:Menu
ID="Menu1"
Width="450px"
runat="server"
Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False"
OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem ImageUrl="Images/selectedtab.GIF"
Text=" " Value="0"></asp:MenuItem>
<asp:MenuItem ImageUrl="Images/unselectedtab.GIF"
Text=" " Value="1"></asp:MenuItem>
<asp:MenuItem ImageUrl="Images/unselectedtab.GIF"
Text=" " Value="2"></asp:MenuItem>
</Items>
</asp:Menu>
<asp:MultiView
ID="MultiView1"
runat="server"
ActiveViewIndex="0" >
<asp:View ID="Tab1" runat="server" >
<table width="600" height="400" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
<br />
<br />
<img alt="" class="style1"
src="Images/Chrysanthemum.jpg" />
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab2" runat="server">
<table width="600px" height="400px" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
<br />
<br />
<img alt="" class="style1" src="Images/Desert.jpg" />
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab3" runat="server">
<table width="600px" height="400px" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
<br />
<br />
<img alt="" class="style1" src="Images/Hydrangeas.jpg" />
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</asp:Panel>
</div>
</form>
</body>
</html>
Aspx.cs Code:
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
for(int i=0;i<Menu1.Items.Count; i++)
{
if(i==Convert.ToInt32(e.Item.Value))
{
Menu1.Items[i].ImageUrl="Images/selectedtab.GIF";
}
else
{
Menu1.Items[i].ImageUrl="Images/unselectedtab.GIF";
}
}
Example 3:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title></title>
<style type="text/css">
.example1 {
-moz-border-radius: 15px;
border-radius: 15px;
font-family: Georgia;
color: #003366;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="height: 39px">
<asp:Button ID="addpost" runat="server" Text="Add Post"
onclick="addpost_Click" style="margin-left: 516px"/>
</div>
<center>
<asp:Panel ID="Pnl1" runat="server" Visible="False" CssClass="example1"
BorderColor="Maroon" BorderWidth="2px" Width="493px">
<br />
<asp:Menu
ID="Menu1"
Width="480px"
runat="server" CssClass="example1"
Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False"
OnMenuItemClick="Menu1_MenuItemClick" BackColor="#003366" BorderStyle="Double"
BorderWidth="2px">
<Items>
<asp:MenuItem Text="Upload Text " Value="0"></asp:MenuItem>
<asp:MenuItem Text="Upload Image " Value="1"></asp:MenuItem>
<asp:MenuItem Text="Upload Video " Value="2"></asp:MenuItem>
<asp:MenuItem Text="Upload File " Value="3"></asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#CCFFFF" BorderStyle="Dashed" BorderWidth="2px"
ForeColor="#FF66FF" />
<StaticMenuItemStyle BorderColor="#FFCCCC"
BorderStyle="Solid" BorderWidth="2px" BackColor="#003366"
ForeColor="White" />
<StaticSelectedStyle BackColor="White" ForeColor="#336699" />
</asp:Menu>
<asp:MultiView
ID="MultiView1"
runat="server"
ActiveViewIndex="0" >
<asp:View ID="Tab1" runat="server" >
<table>
<tr>
<td colspan="2" class="style8"><strong>Upload Texts</strong></td>
</tr>
<tr>
<td class="style3">
Title</td>
<td>
<asp:TextBox ID="txt_title" runat="server" Height="23px" Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style3">KeyWords</td>
<td>
<asp:TextBox ID="txt_keyword" runat="server" Height="23px" Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style3">
Description</td>
<td>
<asp:TextBox ID="txt_desc" runat="server" Height="42px" TextMode="MultiLine"
Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td>
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab2" runat="server">
<table>
<tr>
<td colspan="2" class="style8"><strong>Upload Images</strong></td>
</tr>
<tr>
<td>
Title</td>
<td>
<asp:TextBox ID="txt_image_title" runat="server" Height="23px" Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td>KeyWords</td>
<td>
<asp:TextBox ID="txt_image_keyword" runat="server" Height="23px" Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Description</td>
<td>
<asp:TextBox ID="txt_image_desc" runat="server" Height="42px" TextMode="MultiLine"
Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Upload Image</td>
<td>
<asp:FileUpload ID="FileUpload_image" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab3" runat="server">
<table>
<tr>
<td colspan="2" class="style8"><strong>Upload Videos</strong></td>
</tr>
<tr>
<td class="style4">
Title</td>
<td>
<asp:TextBox ID="txt_video_title" runat="server" Height="23px" Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style4">KeyWords</td>
<td>
<asp:TextBox ID="txt_video_keyword" runat="server" Height="23px" Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style4">
Description</td>
<td>
<asp:TextBox ID="txt_video_desc" runat="server" Height="42px" TextMode="MultiLine"
Width="220px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style4">
Upload Video</td>
<td>
<asp:FileUpload ID="FileUpload_video" runat="server" />
</td>
</tr>
<tr>
<td class="style4">
</td>
<td>
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
<br />
</asp:Panel>
</center>
</div>
</form>
</body>
</html>
Aspx.cs Code
protected void addpost_Click(object sender, EventArgs e){
Pnl1.Visible = true;
}
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
for (int i = 0; i < Menu1.Items.Count; i++)
{
if (i == Convert.ToInt32(e.Item.Value))
{
Menu1.Items[i].Value = i.ToString(); ;
}
}
}
|
|
|
|
|
|
No comments:
Post a Comment