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.

Solutions Explorer will have layout like this.



Image2.

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



Image3.

Click on Login.



Image4.

Click Register now.

Image5.

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



Image6.

And choose data content.



Image7.



Image8.



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.

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



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.



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.

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.

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