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.
|
