How to create a WCF RIA application that supports data filteration and paginations?

SheoNarayan
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 9656 red flag
Rating: 5 out of 5  
 1 vote(s)

In this article, we are going to learn how to work with WCF RIA Services in Silverlight.

Working with WCF RIA Services in Silverlight

As Silverlight application presentation tier exists on the client side, WCF RIA Services helps us to easily build N-tier RIA application by bridging the gap between the presentation tier and the middle or data tier. WCR RIA Services is a technology built upon WCF.

(More about WCF RIA Services - here)

How to create a WCF RIA application that supports data filteration and paginations.

This article is the continuation of my last article in Silverlight controls series, read last article here.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.

To create WCF RIA Service application, we need to follow below steps.

1. File > New Project > Select “Silverlight Business Application”, write name of the application, specify path and click OK

You should see two projects created (I had given the project name as RIABusinessApplication so I have another project added called RIABusinessApplication.Web apart from RIABusinessApplication).

All these projects should have pre-written code that is ready to be tested.

2. Run it and you should see the sample application created for you.

3. Add ADO.NET Entity Framework in the .Web project.

My solution structures look like below.

4. Build your project.

5. Add a Domain Service Class in the .Web project. My domain service class name is DomainServiceClass.cs

In the Dialogue box, check Enable client access checkbox, select the DataContext of the ADO.NET Entity Framework you just added from the DropDown and click the Table name checkbox. Also select the Enable Editing checkbox, that allows you to perform CRUD operation through WCF RIA Services. Click OK.

6. Have a look at the Domain Service class just created and you should see all the relevant method for the table you had selected that allows you to perform CRUD operation.

7. Go to the Views folder of the BusinessApplication project and and add a new Silverlight page (PersonalDetailPage.xaml).

<navigation:Page xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="RIABusinessApplication.Views.PersonalDetailPage"

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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

d:DesignWidth="640" d:DesignHeight="480"

Title="PersonalDetailPage Page"

Style="{StaticResource PageStyle}">

<Grid x:Name="LayoutRoot">

<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">

<StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">

<TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"

Text="{Binding Path=Strings.PersonalDetailTitle, Source={StaticResource ApplicationResources}}"/>

</StackPanel>

</ScrollViewer>

<StackPanel>

<sdk:DataGrid x:Name="DataGrid1" AutoGenerateColumns="True" />

<Rectangle Width="250" Height="10" Fill="Black"/>

<sdk:DataGrid x:Name="DataGrid2" AutoGenerateColumns="True" />

<sdk:DataPager PageSize="3" x:Name="DataPager1" />

</StackPanel>

</Grid>

</navigation:Page>

8. Copy-paste the code from Home.xaml file into the newly created xaml file so that the existing layout will be maintained. You may like to add the Title in the Page directive. (My new page xaml code looks like above)

9. You may like to add a new item into Assets > Resources > ApplicationSettings.resx for the HeaderText of the newly created .xaml file. Change this file (Binding Path …) accordingly so that this page will have the header text what you have kept into the .resx file.

10. Now drag-drop a DataGrid from the toolbar and give a name and make sure that AutoGenerateColums is true. (Displayed in the above code snippet)

11. Go to the Code behind of the newly created .xaml file and refer the .web project (Do not be surprised, you will be able to add the reference of the web project here).

using RIABusinessApplication.Web;

using System.Windows.Data;

12. If you see all the files/folder of the Business Application project by clicking on Show All Files icon from the Solution, you will notice that you have Generated_Code folder with some .cs file

13. Now go to the Domain Service class (in my case DomainServiceClass.cs) and update few lines of code to support data filtration and paging.

// TODO:

// Consider constraining the results of your query method. If you need additional input you can

// add parameters to this method or create additional query methods with different names.

// To support paging you will need to add ordering to the 'PersonalDetails' query.

public IQueryable<PersonalDetail> GetPersonalDetails()

{

return this.ObjectContext.PersonalDetails.OrderBy(p => p.FirstName);

}

public IQueryable<PersonalDetail> GetPersonalDetailsByFirstName(string firstNameStartsWith)

{

return this.ObjectContext.PersonalDetails.Where(p => p.FirstName.StartsWith(firstNameStartsWith));

}

In the first method we are sorting the collection to enable paging and in the second method we are filtering the records whose first name starts with a certain character.

14. Now write following code in the Code behind of the newly created .xaml file.

public PersonalDetailPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(PersonalDetailPage_Loaded);

}

void PersonalDetailPage_Loaded(object sender, RoutedEventArgs e)

{

DomainServiceClass context = new DomainServiceClass();

DataGrid1.ItemsSource = context.PersonalDetails;

context.Load(context.GetPersonalDetailsByFirstNameQuery("S"));

DomainServiceClass context1 = new DomainServiceClass();

PagedCollectionView view = new PagedCollectionView(context1.PersonalDetails);

DataGrid2.ItemsSource = view;

DataPager1.Source = view;

context1.Load(context1.GetPersonalDetailsQuery());

}

Where DomainServiceClass is the context created under .web.g.cs file.

15. Now go to MainPage.xaml file and add a Link for the newly created .xaml file. You will to copy-paste the HyperLinkButton control and change accordingly.

<Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>

<HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}"

NavigateUri="/PersonalDetailPage" TargetName="ContentFrame" Content="{Binding Path=Strings.PersonalDetailTitle, Source={StaticResource ApplicationResources}}"/>

16. Now run the application. You should see the output something like this

Notice that in the above picture we have first GridView that has filtered records and the second GridView that has paginated records.

Hope this article was useful. Thanks for reading and hoping that you liked it.

Keep an eye on forth coming articles on Silverlight. To read my series of articles, click here.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)