RIA Services with Silverlight 4: Part I


What is .NET RIA Services?

Microsoft .NET RIA Services simplifies the traditional n-tier application pattern by bringing together the ASP.NET and Silverlight platforms. The RIA Services provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations. It also provides end-to-end support for common tasks such as data validation, authentication and roles by integrating with Silverlight components on the client and ASP.NET on the mid-tier.

System Requirements: Visual Studio 2010 Ultimate, Silverlight 4 Beta

Let's start now...first of all make a new project using Silverlight Business Application using .NET Framework 4.

image1.gif

Image1.

Solutions Explorer will have layout like this.

image2.gif

Image2.

You can run the project and page will look like this.

image3.gif

Image3.

Click on Login.

image4.gif

Image4.

Click Register now.

image5.gif

Image5.

Now let's add ADO.NET Entity Data Model in Web Project.

image6.gif

Image6.

And choose data content.

image7.gif

Image7.

image8.gif

Image8.

image9.gif

Image9.

NOTE: After adding data model you have to build your web project this is mandatory. And after that add a new Domain Service Class in Services folder.

image10.gif

Image10.

Now you can see you data model in available data context...check you entity name and you can enable editing also.

image11.gif

Image11.

You service will have this code.

[EnableClientAccess()]
public class CustomersDomainService : LinqToEntitiesDomainService<NORTHWNDEntities1>
    {

        // 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 'Customers' query.
    public IQueryable<Customer> GetCustomers()
        {
            return this.ObjectContext.Customers;
        }

    public void InsertCustomer(Customer customer)
        {
            if ((customer.EntityState != EntityState.Detached))
            {
                this.ObjectContext.ObjectStateManager.ChangeObjectState(customer, EntityState.Added);
            }
            else
            {
                this.ObjectContext.Customers.AddObject(customer);
            }
        }

public void UpdateCustomer(Customer currentCustomer)
        {
            this.ObjectContext.Customers.AttachAsModified(currentCustomer, this.ChangeSet.GetOriginal(currentCustomer));
        }

 public void DeleteCustomer(Customer customer)
        {
            if ((customer.EntityState == EntityState.Detached))
            {
                this.ObjectContext.Customers.Attach(customer);
            }
            this.ObjectContext.Customers.DeleteObject(customer);
        }
    }

We are done with data model and service work here now we are moving on class work.

There are 2 ways to show entity data on page. First drag and drop data control on page and fill item source. Let see second one first.

image12.gif

Image12.

image13.gif

Image13.

It adds two namespace on .xaml page.

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"

and page adds following code.

<sdk:DataGrid AutoGenerateColumns="False" Height="200" ItemsSource="{Binding ElementName=customerDomainDataSource, Path=Data}" Margin="6,105,6,0" Name="customerDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn x:Name="addressColumn" Binding="{Binding Path=Address}" Header="Address" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="cityColumn" Binding="{Binding Path=City}" Header="City" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="companyNameColumn" Binding="{Binding Path=CompanyName}" Header="Company Name" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="contactNameColumn" Binding="{Binding Path=ContactName}" Header="Contact Name" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="contactTitleColumn" Binding="{Binding Path=ContactTitle}" Header="Contact Title" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="countryColumn" Binding="{Binding Path=Country}" Header="Country" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="customerIDColumn" Binding="{Binding Path=CustomerID, Mode=OneWay}" Header="Customer ID" IsReadOnly="True" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="faxColumn" Binding="{Binding Path=Fax}" Header="Fax" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="phoneColumn" Binding="{Binding Path=Phone}" Header="Phone" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="postalCodeColumn" Binding="{Binding Path=PostalCode}" Header="Postal Code" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="regionColumn" Binding="{Binding Path=Region}" Header="Region" Width="SizeToHeader" />
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>

<riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my1:Customer, CreateList=true}" Height="0" LoadedData="customerDomainDataSource_LoadedData" Name="customerDomainDataSource" QueryName="GetCustomersQuery" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:CustomersDomainContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

Now drag and drop domain context on page and run the application.

image14.gif

Image14.

Now let's try to show data manually.

Drag and drop data grid data control on page.

<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="370"></RowDefinition>
                    <RowDefinition Height="20"></RowDefinition>
                    <RowDefinition Height="210*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <sdk:DataGrid AutoGenerateColumns="true" RowDetailsVisibilityMode="VisibleWhenSelected" Name="dataGrid1" Width="500" Margin="70,81,70,149" Grid.RowSpan="3" />
                <sdk:DataPager Height="26" HorizontalAlignment="Center" Grid.Row="1" Name="dataPager1" PageSize="10" VerticalAlignment="Top" Width="200"   />
            </Grid>  

private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            context.Load(context.GetCustomersQuery());
            view = new PagedCollectionView(context.Customers);
            dataPager1.Source = view;
            dataGrid1.ItemsSource = view;
        }


image15.gif

Image15.

I think we done with this. In next article we'll see how to do user login and registration using RIA.

Up Next
    Ebook Download
    View all
    Learn
    View all