Share via

Silverlight 4 + RIA Services - Ready for Business: Consuming Data in the Silverlight Client

  • Article

To continue our series, let’s see where the fun comes in my look at how easy that is to consume from the client.  First just to help you understand what is happening behind the covers, let’s look at a code-behind solution.  In View\Home.xaml put a simple DataGrid on the form.

  <sdk:DataGrid Name="dataGrid1" Height="152" Width="692" />

Then add these lines of code to Home.xaml.cs

 

   1: var context = new DishViewDomainContext();

  2: this.dataGrid1.ItemsSource = context.Restaurants;

  3: 

  4: context.Load(context.GetRestaurantsQuery());

  5:

 

In line 1, we create a DishViewDomainContext… notice this is the automatically generated (via an MSBuild task) from the DishViewDomainService on the server. 

In line 2, Notice we have a Restaurants property – we provide this because there is at least one query method that returns restaurants.  Notice the cool binding magic, we have not yet populated this data from the server, but we go ahead and bind it.  This avoids any kind of complex callback logic. 

In line 4, we explicitly load the data.. this is the network call, so we want to make sure it is clear to the developer when this happening.   As an argument we pass exactly which query method (and any arguments) to use.

Now we run it and we get our data..

image_thumb[20]

Very painless, but it gets even easier ;-)

Go and in delete this code and the Xaml..  Then notice the DataSources window

image_thumb[80]

image_thumb[22]

Notice this is simply a visual representation of exactly what we were doing in code.

image_thumb[23]

Notice i can change what default UI to generate and which query method to use.

 

Dragging Restaurants to the form and bingo, we have our data.

image_thumb[26]

 

Run it and we have our data… what could be easier?

image_thumb[28]

Click on the column headers – notice sorting works!  There is no code you had to write on the client or server to enable it.  This just comes for free out of returning an IQuerable. 

Now let’s add paging..

First we drag and drop the DataPager control to the form, then do a bit of layout and we end up with something that looks nice

image_thumb[29]

But we still need to wireup the DataPager to the same underlying DataSource.  This is easy enough done by draging and dropping the same Restaurant element from the DataSources window to the DataPager.  You will now you did this right if the DataPager becomes enabled. 

image_thumb[32]

 

image_thumb[34]

 

Notice that paging works great!  No code needed on the client or the server, again, all done through using that simple Linq query we wrote on the server. But what about paging AND sorting… do they work well together?  Will it just sort the page of data that is loaded locally?  The answer of course is that sorting and paging compose nicely together and the sort is actually sent all the way to the data tier and executed there in a very efficient way.

 

Now let’s add filtering.  With just a bit more work in the UI, we can add a way to filter by postal code.

 <sdk:Label Name="label1" Content="Postal Code:" FontSize="14" Margin="0,0,462,13" />

<TextBox Height="23" HorizontalAlignment="Left" Margin="110,12,0,0" Name="postalCodeTextbox" VerticalAlignment="Top" Width="120" />

image_thumb[36]

Then we need to wire this up to the query.  Of course we want the filter applied as close to the data as possible.  We don’t want to download all the entities locally, then filter, nor do we want to pull them all to the middle-tier and then filter.  What we want is for the filter to be applied at the database level.  Luckily this is very easy to do with LINQ composition. 

First we select the DomainDataSource in the Document Outline view.

image_thumb[37]

 

image_thumb[38]

image_thumb[40]

Operator – typically you should set this to “Contains”.  If you use the default of “IsEqualTo” the first load (when there is no filter) will result in no results returned. 
PropertyPath – this is the property on the entity that you are filtering on… Just type in the simple name. 
Value – this is where to get the value to compare from.  It is easiest to do UI-to-UI binding to the TextBox’s Text property.

image_thumb[42]

Here is the dialog once we are done:

image_thumb[44]

And the resulting Xaml:

         <riaControls:DomainDataSource Name="restaurantDomainDataSource" AutoLoad="True" 

                                      d:DesignData="{d:DesignInstance my:Restaurant, 

                                                     CreateList=true}" 

                                      Height="0"  Width="0" 

                                      LoadedData="restaurantDomainDataSource_LoadedData_1" 

                                      QueryName="GetRestaurantsQuery">

            <riaControls:DomainDataSource.FilterDescriptors>

                <riaControls:FilterDescriptor Operator="Contains" 

                                              PropertyPath="PostalCode" 

                                              Value="{Binding ElementName=postalCodeTextbox, Path=Text}" />

            </riaControls:DomainDataSource.FilterDescriptors>

            <riaControls:DomainDataSource.DomainContext>

                <my:DishViewDomainContext />

            </riaControls:DomainDataSource.DomainContext>

        </riaControls:DomainDataSource>

image_thumb[47] 

Notice no code changes at all, and no changes to the business logic in the DomainService in particular.

Comments

  • Anonymous
    March 16, 2010
    Love this stuff. However, the "Data Sources" window is not recognizing DomainContexts when using a WCF RIA Services Client library along with a simple Silverlight Application.

  • Anonymous
    March 16, 2010
    Meant "..when using a WCF RIA Services Class Library". Did test my RC install using a Silverlight Business Application, and the Data Sources window is correctly populated.

  • Anonymous
    March 16, 2010
    Hi Paul, May I know how you are using the WCF RIA Services Class Library with your simple Silverlight Application? In which project that the Data Source Window doesn't work to you? Could you please also check is the code generation (i.e. the .g.cs/vb file in the hidden Generated_Code folder) works correctly in the project that you expect to see the Data Source Window works? Thanks, Xiaoying Guo Program Manager, Visual Studio Business Applications Tooling

  • Anonymous
    March 21, 2010
    Is it possible to utilizing a datasource control in a MVVM setup ?

  • Anonymous
    March 26, 2010
    Brad - Nice series We really need to see prototypes for LoB using MVVM. Putting domainDS in xaml is really not good practice, very difficult to debug and validate data flow, and difficult to have fine grained control Additionally, we have had a very difficult time with DataForm control, controlling visibility of buttons, detecting change / no change / comboboxes. We are using MVVM, with a M wrapping RIA on client side. Our app is a LoB with ~700 tables, and > 2000 stored procs. More complex, real world apps would be appreciated.

  • Anonymous
    March 27, 2010
    I have the same problem as Paul, no matter what I do the Data Sources window is never populated. Also, I find myself restarting vs2010 many times before the add new domain service wizard is populated with the entities of my entity framework model....

  • Anonymous
    March 30, 2010
    I am facing the same issue as Paul & Timothy, following these RIA Silverlight tutorials in VS2010RC seems quite frustrating. Have you solved it? Also this makes me wonder should I keep following this series or not. WCF ria services is considered the hottest tech, if its this difficult to get the tutorial working, I bet it would be much more problematic when using it for own projects... Many people left many good words on the older SL3 RIA series, Should I follow that first?

  • Anonymous
    April 01, 2010
    I have the same problem as Paul, Timothy and others: no matter what I do the Data Sources window is never populated. Here are my steps:

  1. Start VS 2010 Ultimate RC (10.0.30128.1 RC1Rel, .NET 4.0.30128 RC1Rel, Hotfix: KB976272, Silverlight 4 Tools 10.0.30303, Silverlight 4 Toolkit November 2009)
  2. Download and open the 'Ready for Business'-Sample from Brad
  3. build and run it => ok
  4. open 'Data Sources' panel (SHIFT-ALT-D) You find this under the menu 'Data/Show Data Sources' Attention: it's only visible, when the SL-Project is selected, there is no menu entry when the Web-Project is selected). => I cannot see any associated data sources in the 'Data Sources' panel!! I installed VS 2010 Ultimate RC on a XP and Windows 7 PC (32bit). Same situation! I had the same problem in the Preview and Beta2 Releases. I also wrote in the blogs to find a solution:
  5. http://forums.silverlight.net/forums/p/164300/371111.aspx#371111
  6. http://www.silverlight.net/learn/videos/all/ria-services-support-visual-studio-2010 Because there was no solution, I was waiting now for the new release, but it's still not working. What I also checked:

  • Anonymous
    April 05, 2010
    This is insane. I also cannot get the datasources panel to populate and there is NO answer anywhere on the web. How can we follow these tutorials if we can't even get through the first example!!!!!

  • Anonymous
    April 05, 2010
    Hi Greg / Hombianer / Jian / Timothy, Paul's problem has been resolved, which only happened in Class Library, which I guess was different from yours. Could you please also try the following?

  1. Create a Silverlight 3 projects, and use the similar way to add some objects into the DataSource Window or web services with List of data returned into the client project, and see if the Data Source Window works.
  2. Create a Silverlight Business Application, and open the MainPage.xaml, and see if the Data Source Window populate some pre-created types. You may need to build the project before you see the stuff in the Data Source Window. Please let me know as much as possible what your experience looks like in the above scenarios. It will help us to detect if it's because something wrong with the VS installation or a bug in the RIA Services Data Binding. Thanks! Xiaoying
  • Anonymous
    April 07, 2010
    Hi Xiaoying How can I create a SL 3 project in VS2010? And what you mean with 'use the similar way to add some objects'? As I wrote I build the application and run it AND than I opend the DataSource window. I had also no success add the DomainService manually. In the meantime I migrate the IssueTracker-Demo-Apps from David Poll to VS2010 RC: http://www.davidpoll.com/2009/11/19/silverlight-4-and-building-business-applications-pdc09-cl19/ In this project the DataSource window list all entries and I can drag&drop them into xaml-pages! Summary:
  • Create own SL BizApp (create EDMX, create DomainService, generate DomainService, …) => empty DataSource window
  • Open Brad’s App: => empty DataSource window
  • Migrated IssueTracker from David => DataSource window has entites! Hombianer

  • Anonymous
    April 07, 2010
    Hi Hombianer, Silverlight 3 is integrated with VS2010, so as long as you install the VS2010, you should be able to create a Silverlight 3 project through the project template of Silverlight Application, and then selecting Silverlight 3 as the Silverlight Version in the follow-up wizard. Then could you please try to add some object data sources into the Data Source Window (you can add some system types by unchecking the "Hide System Assemblies" in the wizard) and see if it works? Besides, if you create a new Silverlight Business Application (instead of Silverlight Application and check WCF RIA Services) and build the project (you don't need to add any other thing here since the Silverlight Business Application template has already contains some entities), do you see the Data Source Window populate anything? By the way, it may be not related, do you install VS2008 side by side with VS2010? When installing VS2010, did you use the default settings or customize the configurations? Thanks, Xiaoying

  • Anonymous
    April 07, 2010
    Hi Xiaoying

  1. I created SL 3 Application as you proposed, added System.Windows.Application into DataSources window. Drag&Drop item from the DataSources window into SL Designer - this works!
  2. Created SL4 Business App, build project => no items in Data Source Window. Add manually objects: BusinessApplication1.Web User and RegistrationData. Drag&Drop item from the DataSources window into SL Designer. What is strange: In Brad's sample application, the other objects Restaurant and Plate are not selectable in the DataSource window wizard!
  3. Yes, I have installed VS2008 and 2010 side by side. Hombianer
  • Anonymous
    April 07, 2010
    Hi Xiaoying, Thanks for your supports.
  1. New SL3 app, create new User object data source though the Data Sources panel.  WORKING, can drag&drop User from Data Sources onto the xaml design panel
  2. New Business app, build, double click Mainpage.xaml, choose Data Sources. NOT WORKING, nothing in Data Sources panel. Jian

  • Anonymous
    April 08, 2010
    Thank you for more details Hombianer and Jian! We are setting up an enviornment with VS2008 and VS2010 side by side and see if we can repro the issue. Jian, I'd also appreciate if you could let me know more about your enviornment when you see the issue (OS, any other version of VS is installed besides VS2010, etc.). Hombianer, what do you mean by "In Brad's sample application, the other objects Restaurant and Plate are not selectable in the DataSource window wizard!"? Thanks, Xiaoying

  • Anonymous
    April 08, 2010
    Hi Xiaoying Im mean the 'Ready for Business'-Sample from Brad from this blog. Brad defined there two Domain Entities: Plate and Restaurant (see Data Sources - screeshot from this blog). I wanted to create this object in the Data Source Window with the wizard (choose DataSource Type: object, select the objects from the reference assembly). Hombianer

  • Anonymous
    April 08, 2010
    Hi all, Thanks to the help from Hombianer, we found a bug in RC release that Data Binding and Live IntelliSense feature assemblies are not installed correctly if the VS2010 is not instealled into the default system root. If this is your case, and you see the Data Source Windows doesn't populate the DomainContext in a RIA Services project, please try to copy the assemblies under $(ProgramFiles)Microsoft Visual Studio 10.0Common7IDEExtensionsMicrosoftRiaTools to your VS installation folder. If this isn't your case but you see the problem, or after you try this it still doesn't work, please let me know. Thanks! Xiaoying

  • Anonymous
    April 08, 2010
    Hi Xiaoying, Thanks for your support.. Today, I formatted c drive and reinstalled OS, and VS2010RC (full installation, installed to D DIRVE). Problem is still there...Nothing in data source panel... Just read a post saying that intalling VS to the default directory will solve the problem, can you comfirm on that? BTW, I think its better to redirect us (not only the ones here) reporting to a single problem solving site (such as https://connect.microsoft.com/VisualStudio/feedback/details/520414/wcf-ria-services-datasource-panel-not-populating?wa=wsignin1.0, this one is closed already) rather than discuss this issue in the tutorial posts. The tutorial itself is a wonderful learning source, really great work. Keeping posting info here will pollute it and distract other readers.. Jian

  • Anonymous
    April 09, 2010
    Hi Jian, We've created a bug for this and will fix that in RIA Services RTW. For now, please try the following workaround: copy the assemblies under your system root $(ProgramFiles)Microsoft Visual Studio 10.0Common7IDEExtensionsMicrosoftRiaTools to your VS installation folder. For example, if your system root is C:, while you install VS in D:Program FilesMicrosoft Visual Studio 10.0, then copy the dlls under C:Program FilesMicrosoft Visual Studio 10.0Common7IDEExtensionsMicrosoftRiaTools to D:Program FilesMicrosoft Visual Studio 10.0Common7IDEExtensionsMicrosoftRiaTools. You may need to create some folders in your D: disk if they are missing. If it still doesn't work, please let me know. Thanks, Xiaoying

  • Anonymous
    April 09, 2010
    WORKING PERFECTLY... GREAT JOB... :)

  • Anonymous
    April 21, 2010
    Hi Brad, I just migrated to VS 2010 Ultimate RTM + Silverlight 4 RC2 recently, so I thought it might not hurt spending some time reading your articles to freshen things up. Great job...Did some tests with RIA + Business App and EVERYTHING IS WORKING PERFECTLY :) Just to mention...I couldn't get access to main images from thumbnail images... but don't worry that's just a small detail... Thank's...

  • Anonymous
    April 28, 2010
    I had the same problem with the Data View not populating, extremely frustrating and rather hard to find an answer to. In any case I too installed VS 2010 in an alternate location. I compiled the RiaTools folder to th ecorrect location and everything works perfectly! Thanks Xiaoying!

  • Anonymous
    May 06, 2010
    Almost every blog has the same type of Grid binding example..............Is Grid the only control used in business applications ?  I think real world is lot more complex than displaying data in the grid, so please dare do something different.

  • Anonymous
    May 10, 2010
    Brad, great job and great tutorials. Thank you. Baba, we are here to learn SL4+RIA Services basics, not to learn how to customize a datagrid. You'll find a lot of examples for that, using Blend or "handwritten XAML", all over the web. BTW, the datagrid is the default control for viewing lists but VS2010 allows us to change this default control and even use a custom one.