Source view of MULTIVIEW.ASPX
DotNet Funda: Code Viewer
multiview.aspx | multiview.aspx.cs
Close Window  
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left:10px;" valign="middle">
                asp:MultiView control</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                MultiView is a simpler way to declare multiple views and show only one at a time.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
    <div class="ArticleContents">
        MultiView is a simpler way to declare multiple views (&lt;asp:View&gt; is a separate control that is used as a child control of MultiView control) and show only one at a time. It has no default interface like Calendar, you get only whatever you add in its different views.
        When it is rendered on the page, it is implemented through the HTML tag you place inside views.
        <p>
            You can navigate through views either by setting its <span class="DemoCP">ActiveViewIndex</span> property or by putting buttons with preset command names.
            To Navigate through different views, you need to put Buttons/LinkButton/ImageButton on the views with CommandName as NextView(to navigate to next view) and PrevView(to navigate to previous view).
        </p>
        
        Following are some important properties that are very useful.
        <table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
            <tr>
                <td class="DemoCP">ActiveViewIndex</td>
                <td>
                    Gets or sets the active view index.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">OnActiveViewChanged</td>
                <td>
                    Method name that fires when Active View Changed (When you click Next or Previous buttons). 
                </td>
            </tr>
        </table>
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle">
                    DEMO : MultiView
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/multiview.aspx" target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:MultiView ID="MutliView1" runat="Server" ActiveViewIndex="0" OnActiveViewChanged="AutoSelectDropDown">
                        <asp:View ID="View1" runat="server">
                            <table style="border:1px solid #c0c0c0;">
                                <tr style="background-color:#c0c0c0;">
                                    <th>
                                        Header of View 1
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:TextBox ID="textBox1" runat="Server"></asp:TextBox>
                                        <asp:Button ID="btnSubmit" runat="Server" Text="Submit" OnClick="SubmitFrom1stView" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <hr />
                                        Navigate Views:<br />
                                        <asp:Button ID="cmdNext1" runat="server" Text="Next View >" CommandName="NextView" Font-Size="8pt" />
                                    </td>
                                </tr>
                            </table>
                        </asp:View>
                        <asp:View ID="View2" runat="Server">
                            <table style="border: 1px solid #c0c0c0;">
                                <tr style="background-color: #c0c0c0;">
                                    <th>
                                        Header of View 2
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Image ID="img1" runat="Server" ImageUrl="~/images/samples/NewAdvance.gif" AlternateText="DotNetFunda.com" />
                                    </td>
                                </tr>
                                <tr>
                                    <td><hr />
                                        Navigate Views:<br />
                                        <asp:Button ID="Button4" runat="server" Text="< Prev View" CommandName="PrevView" Font-Size="8pt" /> |
                                        <asp:Button ID="Button1" runat="server" Text="Next View >" CommandName="NextView" Font-Size="8pt"  />
                                    </td>
                                </tr>
                            </table>
                        </asp:View>
                         <asp:View ID="View3" runat="Server">
                            <table style="border: 1px solid #c0c0c0;">
                                <tr style="background-color: #c0c0c0;">
                                    <th>
                                        Header of View 3
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Image ID="Image1" runat="Server" ImageUrl="~/images/samples/DotNetFunda3.gif" AlternateText="DotNetFunda.com" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <hr />
                                        Navigate Views:<br />
                                        <asp:LinkButton ID="Button2" runat="server" Text="< Previous" CommandName="PrevView" /> | 
                                        <asp:LinkButton ID="Button3" runat="server" Text="Next >" CommandName="NextView" />
                                    </td>
                                </tr>
                            </table>
                        </asp:View>
                         <asp:View ID="View4" runat="Server">
                            <table style="border: 1px solid #c0c0c0;">
                                <tr style="background-color: #c0c0c0;">
                                    <th>
                                        Header of View 4
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Image ID="Image2" runat="Server" ImageUrl="~/images/samples/DotNetFunda2.gif" AlternateText="DotNetFunda.com" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <hr />
                                        Navigate Views:<br />
                                        <asp:Button ID="Button5" runat="server" Text="< Prev View" CommandName="PrevView" Font-Size="8pt" />
                                    </td>
                                </tr>
                            </table>
                        </asp:View>
                    </asp:MultiView>
                </td>
                <td>
                    Navigate Views: <asp:DropDownList ID="dropViews" runat="Server" OnSelectedIndexChanged="ChangeTheViews" AutoPostBack="true"></asp:DropDownList>
                    <asp:Label ID="lblMessage" runat="server" ForeColor="Blue" EnableViewState="false"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <pre>
// MultiView ///////////////////////////////
&lt;asp:MultiView ID="MutliView1" runat="Server" ActiveViewIndex="0" OnActiveViewChanged="AutoSelectDropDown"&gt;
    &lt;asp:View ID="View1" runat="server"&gt;
        &lt;table style="border:1px solid #c0c0c0;"&gt;
            &lt;tr style="background-color:#c0c0c0;"&gt;
                &lt;th&gt;
                    Header of View 1
                &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:TextBox ID="textBox1" runat="Server"&gt;&lt;/asp:TextBox&gt;
                    &lt;asp:Button ID="btnSubmit" runat="Server" Text="Submit" OnClick="SubmitFrom1stView" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;hr /&gt;
                    Navigate Views:&lt;br /&gt;
                    &lt;asp:Button ID="cmdNext1" runat="server" Text="Next View &gt;" CommandName="NextView" Font-Size="8pt" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/asp:View&gt;
    &lt;asp:View ID="View2" runat="Server"&gt;
        &lt;table style="border: 1px solid #c0c0c0;"&gt;
            &lt;tr style="background-color: #c0c0c0;"&gt;
                &lt;th&gt;
                    Header of View 2
                &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Image ID="img1" runat="Server" ImageUrl="~/images/samples/NewAdvance.gif" AlternateText="DotNetFunda.com" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;hr /&gt;
                    Navigate Views:&lt;br /&gt;
                    &lt;asp:Button ID="Button4" runat="server" Text="&lt; Prev View" CommandName="PrevView" Font-Size="8pt" /&gt; |
                    &lt;asp:Button ID="Button1" runat="server" Text="Next View &gt;" CommandName="NextView" Font-Size="8pt"  /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/asp:View&gt;
     &lt;asp:View ID="View3" runat="Server"&gt;
        &lt;table style="border: 1px solid #c0c0c0;"&gt;
            &lt;tr style="background-color: #c0c0c0;"&gt;
                &lt;th&gt;
                    Header of View 3
                &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Image ID="Image1" runat="Server" ImageUrl="~/images/samples/DotNetFunda3.gif" AlternateText="DotNetFunda.com" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;hr /&gt;
                    Navigate Views:&lt;br /&gt;
                    &lt;asp:LinkButton ID="Button2" runat="server" Text="&lt; Previous" CommandName="PrevView" /&gt; | 
                    &lt;asp:LinkButton ID="Button3" runat="server" Text="Next &gt;" CommandName="NextView" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/asp:View&gt;
     &lt;asp:View ID="View4" runat="Server"&gt;
        &lt;table style="border: 1px solid #c0c0c0;"&gt;
            &lt;tr style="background-color: #c0c0c0;"&gt;
                &lt;th&gt;
                    Header of View 4
                &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Image ID="Image2" runat="Server" ImageUrl="~/images/samples/DotNetFunda2.gif" AlternateText="DotNetFunda.com" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;hr /&gt;
                    Navigate Views:&lt;br /&gt;
                    &lt;asp:Button ID="Button5" runat="server" Text="&lt; Prev View" CommandName="PrevView" Font-Size="8pt" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/asp:View&gt;
&lt;/asp:MultiView&gt;




// Server Side Event ///////////////////////////
protected void Page_Load(object sender, EventArgs e)
    {
        // fires only when Form is posted back
        if (!IsPostBack)
        {
            dropViews.DataSource = MutliView1.Views;
            dropViews.DataTextField = "ID";
            dropViews.DataBind();
        }
    }

    // Fires when 1st view button is clicked
    protected void SubmitFrom1stView(object sender, EventArgs e)
    {
        lblMessage.Text = "&lt;hr /&gt;TextBox Value is: &lt;b&gt" + textBox1.Text + "&lt;/b&gt;";
    }

    // Fires when DropDown selected index changes
    protected void ChangeTheViews(object sender, EventArgs e)
    {
        MutliView1.ActiveViewIndex = dropViews.SelectedIndex;
    }

    // Fires when Active Window changes. 
    // When Next or Previous button is clicked.
    protected void AutoSelectDropDown(object sender, EventArgs e)
    {
        dropViews.SelectedIndex = MutliView1.ActiveViewIndex;
    }
                    </pre>
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        </div>
    <br />
    
    <script language="javascript" type="text/javascript">
        function GiveAlertToUser()
        {
            alert("Hi Dear, Client side method worked.");
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Go Top