In this quick start guide, you will explore the functionality of the C1Pager control. You will create two pager controls and handle each of their PageIndexChanged events so that selecting a page index on one pager control will change the page index on the other control.

Complete the following steps:

1. Create a new ASP.NET  Website project.
2. Click the Design tab located below the Document window to switch to Design view.
3. Navigate to the Visual Studio Toolbox and double-click C1Pager to add the control to the page. Double-click it again to add a second control.
   The Web page contains two empty C1Pager controls, C1Pager1 and C1Pager2.
4. Set C1Pager1's properties as follows:
   • Set the Mode property to NumericFirstLast. This will create a pager with numbers and a 'first' button that will provide a shortcut to the first page and a 'next' button that will provide a shortcut to the last page.
   • Set the PageCount to "50". This is how many total pages the control will hold.
   • Set the PageButtonCount to "23". This specifies that only 23 pages of the 50 will appear on the control at any given time.
   • Set the AutoPostBack property to True. You'll be using a server-side event later in the quick start, so you'll the want the control to post back to the server when the event occurs.
5. Set C1Pager2's properties as follows:
   • Set the PageCount property to "50". This is how many total pages the control will hold.
   • Set the PageButtonCount property to "50". This specifies that all 50 pages of the 50 will appear on the control at any given time.
   • Set the AutoPostBack property to True. You'll be using a server-side event later in the quick start, so you'll the want the control to post back to the server when the event occurs.

   At this point, your project should appear similar to the following image:

   

6. In the Properties window, select C1Pager1 and click its Events button. Double-click PageIndexChanged to add the Pager1_PageIndexChanged event handler to Code view, and then add the following code to the event handler:

   To write code in Visual Basic

   Visual Basic	Copy Code
   C1Pager2.PageIndex = C1Pager1.PageIndex

   To write code in C#

   C#	Copy Code
   C1Pager2.PageIndex = C1Pager1.PageIndex;

7. Repeat the previous step with C1Pager2, but and then add the following code to the Pager2_PageIndexChanged event handler:

   To write code in Visual Basic

   Visual Basic	Copy Code
   C1Pager1.PageIndex = C1Pager2.PageIndex

   To write code in C#

   C#	Copy Code
   C1Pager1.PageIndex = C1Pager2.PageIndex;

8. In Design view, click C1Pager1's smart tag to open the C1Pager Tasks menu. From the Theme List, select midnight.

   Both C1Pager controls switch to the midnight theme. If you were to add any other ASP.NET Web Forms controls to the page, they too would adopt the midnight theme.

9. Press F5 to launch the Web site. At run time, the project will appear as follows:

   

10. On the top pager, click 10. Observe that both pagers switch to 10.

    

11. On the bottom pager, click 40. Observe that both pagers switch to 40. Also note that the top pager changed; whereas before it showed only an ellipses button and a 'last' button on the right side, now it also displays an ellipses button and a 'first' button on its left side.

    

Congratulations you have completed the Pager for ASP.NET Web Forms quick start!