Sunday, September 5, 2010

MultiView example: how to use MultiView control in asp.net





MultiView is a Standard ToolBox Control. Here i present a very simple use of MultiView control. 

Simple Use 
First create a Web Form name MultiView.aspx. Then add a MultiView control. In this example I use MultiView for present 5 beautiful forest images. When someone clicks the NextImage button, then he can see the next image. I also place a label control for showing the current image number. Here is the source code of MultiView.apx page.



<%@ 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 Page_Load(object sender, System.EventArgs e) {
        if(!Page.IsPostBack){
            MultiView1.ActiveViewIndex = 0;
           }
    }
    void NextImage(object sender, System.EventArgs e)
    {
        MultiView1.ActiveViewIndex += 1;
    }
    protected void Page_PreRender(object sender, System.EventArgs e) {
        Label1.Text = "Beautiful Forest Image: " + (MultiView1.ActiveViewIndex + 1).ToString() + " of " + MultiView1.Views.Count.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>MultiView Control Simple Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Font-Size="Large" ForeColor="Crimson"></asp:Label>
        <br /><br />
        <asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="View1" runat="server">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Forest1.jpg" />
                <br />
                <asp:Button ID="Button1" runat="server" Text="Next Image" OnClick="NextImage" />
            </asp:View>
            <asp:View ID="View2" runat="server">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Forest2.jpg" />
                <br />
                <asp:Button ID="Button2" runat="server" Text="Next Image" OnClick="NextImage" />
            </asp:View>
            <asp:View ID="View3" runat="server">
                <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/Forest3.jpg" />
                <br />
                <asp:Button ID="Button3" runat="server" Text="Next Image" OnClick="NextImage" />
            </asp:View>
            <asp:View ID="View4" runat="server">
                <asp:Image ID="Image4" runat="server" ImageUrl="~/Images/Forest4.jpg" />
                <br />
                <asp:Button ID="Button4" runat="server" Text="Next Image" OnClick="NextImage" />
            </asp:View>
            <asp:View ID="View5" runat="server">
                <asp:Image ID="Image5" runat="server" ImageUrl="~/Images/Forest5.jpg" />
            </asp:View>
        </asp:MultiView>
  
    </div>
    </form>
</body>
</html>
  

No comments:

Post a Comment