[Silverlight entry series] Using mvvm to enable datapager paging control to implement server-side Paging

In the previous article, we implemented how to enable the datapager control in silverlight4 to implement server-side paging instead of client paging, in the server-side WCF Ria service, we implement a function to retrieve the total number of pages and a function to retrieve data by page number. Today, I will add that the front-end part is implemented in the mvvm mode. It is also relatively simple.

View/XAML

Let's take a look at the XAML.CodeWe implement a DataGrid and a datapager with a busyindicator. When the DataGrid loads data, a progress bar is automatically displayed and the following controls are grayed out. This is bound to isbusy of viewmodel, the specific implementation is my other articleArticle. Code:

 <  Usercontrol  X: Class  = "Mysilverlightapplication"  
Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
Xmlns: x  = "Http://schemas.microsoft.com/winfx/2006/xaml" 
Xmlns: d  = "Http://schemas.microsoft.com/expression/blend/2008"  
Xmlns: I  = "Http://schemas.microsoft.com/expression/2010/interactivity"  
Xmlns: MC  = "Http://schemas.openxmlformats.org/markup-compatibility/2006"  
MC: ignorable  = "D"  
D: Height  = "Auto"  D: width  = "Auto"  Xmlns: SDK = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  Xmlns: Toolkit  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  >  
  <  Grid  X: Name  = "Layoutroot"  Background  = "White"  >  
  < Toolkit: headeredcontentcontrol  Name  = "Headeredcontentcontrol1"  Width  = "Auto"  >  
  <  Toolkit: busyindicator  Name  = "Busyindicator1"  Isbusy  ="  {Binding isbusy}  "  Displayafter = "0"  Busycontent  = "Fetching data ..."  >  
  <  SDK: DataGrid  Autogeneratecolumns  = "False"  Gridlinesvisibility  = "NONE"  Width  = "Auto"  Horizontalalignment  = "Stretch"  Verticalalignment = "Stretch"  Borderthickness  = "0, 0, 0"  Selectionmode  = "Single"  Name  = "Dgvrecentupdated"  Isreadonly  = "True"  >  
  <  SDK: DataGrid. Columns  >  
  < SDK: datagridtextcolumn  Header  = "Productid"  Binding  ="  {Binding productid}  "  Visibility  = "Collapsed"     />  
  <  SDK: datagridtextcolumn  Header  = "Product name" Binding  ="  {Binding name}  "  Width  = "120"     />  
  <  SDK: datagridtextcolumn  Header  = "Product Desc"  Binding  ="  {Binding DESC}  " Width  = "120"  />  
  </  SDK: DataGrid. Columns  >  
  </  SDK: DataGrid  >  
  </  Toolkit: busyindicator  >  
  </ Toolkit: headeredcontentcontrol  >  
  <  SDK: datapager  Height  = "25"  Horizontalalignment  = "Stretch"  Name  = "Datapager1"  Source  ="  {Binding pagercontext}  "  Verticalalignment = "Bottom"  Width  = "Auto"     >  
  <  I: interaction. triggers  >  
  <  I: eventtrigger  Eventname  = "Pageindexchanged"  >  
  < I: invokecommandaction  Command  ="  {Binding setresultsbypagercommand}  "  Commandparameter  ="  {Binding pageindex, elementname = datapager1, mode = oneway}  "  />  
  </  I: eventtrigger  >  
  </ I: interaction. triggers  >  
  </  SDK: datapager  >  
  </  Grid  >  
  </  Usercontrol  > 

Note the source binding of datapager. The pageindexchanged event is bound to the command. The parameter of the Bound event is the page number of the pageindex-request.

View model viewmodel

First, bind the pageindexchanged event.Setresultsbypagercommand :

 //  In viewmodel Constructor  
  Setresultsbypagercommand  =     New  Delegatecommand (setresultsbypager, cansetresultsbypager );

  //  ....  
  
  Private    Int  _ Pagesize  =     10  ;

  Public  Icommand setresultsbypagercommand {  Get  ;  Set  ;}

  Public     Void  Setresultsbypager ( Object  Param)
{
  //  Call the WCF Ria service to obtain the data of the current page number.  
  Performquery  <  Myentity  >  (
Mydomaincontext. getdataquery (  "  234  "  , _ Pagesize,
Convert. toint32 (PARAM)  +    1  ),  //  This is the current page number.  
  Getmydatacomplete );  //  Update the DataGrid model in this event. The automatic notification page is displayed.  
  }

  Private     Bool  Cansetresultsbypager (  Object  Param)
{
 Return     True  ;
} 

Then implement the source-pagercontext bound to datapager:

 Private  List  <  Int  >  Pageritemscount;
  Private  Pagedcollectionview _ pagercontext;

  Public  Pagedcollectionview pagercontext
{
  Get 
{
  If  (Pageritemscount  =     Null  )
Pageritemscount  =     New  List  <  Int  >  ();

  If  (_ Pagercontext =     Null  )
{
Pagedcollectionview PCV  =     New  Pagedcollectionview (pageritemscount );
PCV. pagesize  =     1  ;

_ Pagercontext  =  PCV;
}
  Return  _ Pagercontext;
}
 Set  
{
  If  (Pagercontext  =  Value)
  Return  ;

_ Pagercontext  =  Value;
Notifypropertychanged (  "  Pagercontext  "  );  //  Datapager will be automatically refreshed 
  }
} 

The last step is to initialize datapager, or get the total number of pages from the server where you need the data and load the datapager source. For example:

 Mydomaincontext. gettotalpages (  "  123  "  ,
_ Pagesize, S  =>  
{
  If  (  !  S. haserror)
{
  If  (Pageritemscount ! =     Null  )
Pageritemscount. Clear ();

  For  (  Int  I  =     1  ; I  <=  S. value; I  ++  )
Pageritemscount. Add (I );

Pagedcollectionview PCV =     New  Pagedcollectionview (pageritemscount );
PCV. pagesize  =     1  ;

Pagercontext  =  PCV;  //  Refresh the source bound to datapager  
  Setresultsbypager (  0  ); //  Force jump to the first page. This step can also be omitted. If you load this view during initialization.  
  }
  Else  
{
  //  An error occurred in the notification.
  //  If (loadingcompletefailed! = NULL)
  //  Loadingcompletefailed (this, new resultsargs (S. Error ));  
  }

},  Null ); 

The entire logic is: obtain the total number of pages from the server> bind to the source of datapager when asynchronous completion> automatically trigger indexchanged> load data on the specified page from the server and display> Users can navigate to the previous page next page ....

In this way, we do not have any code in *. XAML. CS, And the mvvm mode is very refreshing! (BTW: next article describes how to automatically hide the page control datapager when there is only one page)

(Note:: It is unnecessary to bind the pagesize attribute and currentindex attribute of datapager to viewmodel. The pageindex of datapager will automatically manage the current page number. There is no need to set pagesize because we calculate the number of pages on the server !)

Domain datasource Control

If you use toolkitDomaindatasource ControlTo handle paging, sorting, filtering... ignore this article, because every time it is take = 100, only the data on this page is taken, but this control is not in mvvm mode, please note)

More powerful server-side paging/sorting/filtering/search-mvvm-friendly

View my article entitylist/domaincollectionview/domaincollectionviewloader