ComponentOne MultiPage for ASP.NET AJAX: MultiPage for ASP.NET AJAX Task-Based Help > Client-Side Tasks for C1MultiPage > Selecting C1PageViews by ID

Selecting C1PageViews by ID

You can select a C1PageView with its ID on the client side using the SelectPageView method. To illustrate the utility of this method, this topic will show you how to use SelectPageView in combination with buttons to create a simple and customizable navigation system for your C1MultiPage.

Complete the following steps:

1.   Click C1MultiPage's smart tag () to open the C1MultiPage Tasks menu and select MultiPage Designer.

      The C1MultiPage Designer Form opens.

2.   Use the Add Child Item button  to add three pages to the C1MultiPage.

3.   Set the ContentUrl property of each page to the following:

      C1PageView1 ""

      C1PageView2 ""

      C1PageView3 ""

4.   Click OK to close the C1MultiPage Designer Form.

5.   Navigate to the Toolbox window and add three standard Button controls your project. Set the Text property of each button as follows:

      Button1 "Page 1"

      Button2 "Page 2"

      Button3 "Page 3"

6.   Set the UseSubmitBehavior property of each button to False. This will prevent the buttons from posting back to the server when clicked.




7.   Place the following JavaScript code beneath <HTML> tag:


<script type="text/javascript">


    function selectPage1()


        $find('<%= C1MultiPage1.ClientID %>').selectPageView("C1PageView1");


    function selectPage2()


        $find('<%= C1MultiPage1.ClientID %>').selectPageView("C1PageView2");


    function selectPage3()


    $find('<%= C1MultiPage1.ClientID %>').selectPageView("C1PageView3");





8.   Set the OnClientClick property in each of the <asp:Button> tags so that they call the JavaScript functions you created in the last step. Your markup should resemble the following:


<asp:Button ID="Button1" runat="server" Text="Page1" Width="80px" OnClientClick="selectPage1();return;" UserSubmitBehavior="False" />


<asp:Button ID="Button2" runat="server" Text="Page2" Width="80px" OnClientClick="selectPage2();return;" UserSubmitBehavior="False" />


<asp:Button ID="Button3" runat="server" Text="Page3" Width="80px" OnClientClick="selectPage3();return;" UserSubmitBehavior="False" />


9.   Run the project and use your custom buttons to navigate through the pages of the C1MultiPage control. Observe that the project doesn't refresh between page views.

Send comments about this topic to ComponentOne.
Copyright 1987-2010 ComponentOne LLC. All rights reserved.