ComponentOne MultiPage for ASP.NET AJAX: MultiPage for ASP.NET AJAX Task-Based Help > Client-Side Tasks for C1MultiPage > Using Arbitrary Buttons for Navigation

Using Arbitrary Buttons for Navigation

This topic will show you how to use the MoveFirst, MoveLast, MoveNext, and MovePrevious client-side methods to create a customizable navigation system for the C1MultiPage control.

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 "http://www.google.com"

      C1PageView2 "http://www.msn.com"

      C1PageView3 "http://www.componentone.com"

4.   Click OK to close the C1MultiPage Designer Form.

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

      Button1 "First"

      Button2 "Next"

      Button3 "Previous"

      Button4 "Last"

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 moveFirst()

            {

                $find('<%= C1MultiPage1.ClientID %>').moveFirst();

            }

           

            function movePrevious()

            {

                $find('<%= C1MultiPage1.ClientID %>').movePrevious();

            }

           

            function moveNext()

            {

                $find('<%= C1MultiPage1.ClientID %>').moveNext();

            }

           

            function moveLast()

            {

                $find('<%= C1MultiPage1.ClientID %>').moveLast();

            }

               </script>

 

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="First" Width="80px" OnClientClick="moveFirst();return;" UseSubmitBehavior=false/>

 

<asp:Button ID="Button2" runat="server" Text="Previous" Width="80px" OnClientClick="movePrevious();return;" UseSubmitBehavior=false/>

 

<asp:Button ID="Button3" runat="server" Text="Next" Width="80px" OnClientClick="moveNext();return;" UseSubmitBehavior=false/>

 

<asp:Button ID="Button4" runat="server" Text="Last" Width="80px" OnClientClick="moveLast();return;" UseSubmitBehavior=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.