MultiView and View controls allow you to divide the content of a page into different groups, displaying only one group at a time. Each View control manages one group of content and all the View controls are held together in a MultiView control.
The MultiView control is responsible for displaying one View control at a time. The View displayed is called the active view.
The syntax for a MultiView control is:
<asp:MultView ID= "MultiView1" runat= "server"></asp:MultiView>
|
The syntax for a View control is:
<asp:View ID= "View1" runat= "server"></asp:View>
|
However, the View control cannot exist on its own. It would render error if you try to use it stand-alone. It is always used with a Multiview control as:
<asp:MultView ID= "MultiView1" runat= "server">
<asp:View ID= "View1" runat= "server"> </asp:View>
</asp:MultiView>
|
Example
- Create New Web Application
- Add New Form 'MultiView.aspx
- Add a MultiView to the form
- Click inside the multiview and add a html Table and click inside a <td> and add a view
- Add 2 or 3 more views in different <td>.
- Click inside each views and add html tables.
- Add some Controls inside the view
- Thats it
Here Comes my Example
MultiView.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button2_Click(object sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex >0)//we hav only 4 views inside the multiview
MultiView1.ActiveViewIndex -= 1;
else if (MultiView1.ActiveViewIndex <=0)
{
MultiView1.ActiveViewIndex = 3;
}
}
protected void Button3_Click(object sender, EventArgs e)
{
if (MultiView1.ActiveViewIndex <3)
{ MultiView1.ActiveViewIndex += 1;}
else if (MultiView1.ActiveViewIndex >=3)
MultiView1.ActiveViewIndex = 0;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MultiView1.ActiveViewIndex = 0;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>MultiView Control Simple Example</title>
<style type="text/css">
.style1
{
height: 23px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<table style="width: 100%;">
<tr>
<td>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Previous" />
</td>
</tr>
<tr>
<td>
<asp:MultiView runat="server" ID="MultiView1">
<asp:View ID="View1" runat="server">
<table style="width: 100%;">
<tr>
<td>
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View2" runat="server">
<table style="width: 100%;">
<tr>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View3" runat="server">
<table style="width: 100%;">
<tr>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" />
</td>
<td>
</tr>
</table>
</asp:View>
<asp:View ID="View4" runat="server">
<table style="width: 100%;">
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</tr>
<tr>
<td class="style1">
<asp:Button ID="Button3" runat="server" Text="Next" OnClick="Button3_Click"/>
</td>
<td class="style1">
</tr>
</table>
</div>
</form>
</body>
</html>
In my Example i have a MultiView with 4 views inside. And 2 buttons Next and Previous.
I the First view i have added a calender control, to the second a FileUploader Control, to the third i have a Checkbox and to the forth i have added a Button Control.
In the PageLoad event i have assigned the Multiview active index property to zero, i.e. first view.
When we click the next Button, It will check whether the index is last view's index or not.
- If No - Active index will be added by 1.
- If Yes - Activeindex will by set to the first view's Index.
When we click the Previous Button, It will check whether the index is first view's index or not.
- If No - Activeindex will be subracted by 1.
- If Yes - Activeindex will by set to the Last view's Index.
OutPut in Web Browser
PageLoad
View 1
Pressed Next Button
View 2
Pressed Next Again
View 3
Press Next
View 4
0 comments:
Post a Comment