Silverlight RIA Service using ADO.NET Entity Data Model: Part II

This article demonstrates how to use RIA services with ADO.NET Entity Data Model and how to use page navigation in Silverlight.

First of all as usual make a new Silverlight project and put name of project and location. By default is creates 2 project like this.



Image1.

There are two projects created there one is works as client and another one web project works as server.

Now add data model in web project and configure it to database.



Image2.



Image3

Click Next.



Image4.

Click Next. And choose database objects and click finish.



Image5

Now let's start working on client project.

First of all we have to fetch data on a grid. So declare some namespace on page.

xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
xmlns:dataform="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"
xmlns:my1="clr-namespace:RIAExample.Web.Services"
xmlns:my2="clr-namespace:RIAExample.Controls"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

here is DomainDataSurce

<riaControls:DomainDataSourceAutoLoad="True" d:DesignData="{d:DesignInstancemy:Customer,CreateList=true}"Height="0"LoadedData="customerDomainDataSource_LoadedData" Name="customerDomainDataSource"LoadSize="10"QueryName="GetCustomersQuery" Width="0">

<riaControls:DomainDataSource.DomainContext>
<my1:CustomerDomainContext />
</riaControls:DomainDataSource.DomainContext>

Filtering based on customer id with text box value

<riaControls:DomainDataSource.FilterDescriptors>
      <riaControls:FilterDescriptor
      PropertyPath="CustomerID"
      Operator="StartsWith" Value="{BindingElementName=customerIDText, Path=Text}">
      </riaControls:FilterDescriptor>
</riaControls:DomainDataSource.FilterDescriptors>

<riaControls:DomainDataSource.GroupDescriptors>
      <riaControls:GroupDescriptorPropertyPath="CustomerID" />
</riaControls:DomainDataSource.GroupDescriptors>--></riaControls:DomainDataSource>

DataGrid part

<my2:BusyIndicator x:Name="busyIndicator1" Width="400"IsBusy="{BindingElementName=customerDomainDataSource, Path=DomainContext.IsLoading}" />

<sdk:DataGridAutoGenerateColumns="False"ItemsSource="{BindingElementName=customerDomainDataSource, Path=Data}"
Name="customerDataGrid"RowDetailsVisibilityMode="VisibleWhenSelected"MinHeight="250"
Height="Auto">
      <sdk:DataGrid.Columns>
            <sdk:DataGridTemplateColumn Header="Customer ID">
                  <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                              <HyperlinkButton x:Name="CustomerIDHyperlink" Content="{Binding Path=CustomerID, Mode=OneWay}" Click="EditHyperlink_Click"></HyperlinkButton>
                        </DataTemplate>
                  </sdk:DataGridTemplateColumn.CellTemplate>
            </sdk:DataGridTemplateColumn>
            <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="postalCodeColumn" Binding="{Binding Path=PostalCode}" Header="Postal Code" Width="SizeToHeader" />
      </sdk:DataGrid.Columns>
      </sdk:DataGrid>
      <sdk:DataPager Height="26"HorizontalAlignment="right" Name="dataPager1"PageSize="10"VerticalAlignment="Top" Width="Auto" Source="{BindingElementName=customerDomainDataSource, Path=Data}" />

DataForm

<dataform:DataForm x:Name="dataForm1" Header="Customer Information"AutoGenerateFields="False"AutoEdit="False"AutoCommit="False"CurrentItem="{BindingSelectedItem,ElementName=customerDataGrid}" Margin="0,12,0,0"DeletingItem="dataForm1_DeletingItem">
      <dataform:DataForm.EditTemplate>
            <DataTemplate>
                  <StackPanel>
                        <dataform:DataField Label="Customer ID">
                              <TextBoxIsReadOnly
                              Text="{BindingCustomerID, Mode=OneWay}" />
                        </dataform:DataField>
                        <dataform:DataField Label="Company Name">
                              <TextBox Text="{BindingCompanyName, Mode=TwoWay}" />
                        </dataform:DataField>
                        <dataform:DataField Label="Contact Name">
                              <TextBox Text="{BindingContactName, Mode=TwoWay}" />
                        </dataform:DataField>
                        <dataform:DataField Label="Contact Title">
                              <TextBox Text="{BindingContactTitle, Mode=TwoWay}" />
                        </dataform:DataField>
                        <dataform:DataField Label="Country">
                              <TextBox Text="{Binding Country, Mode=TwoWay,NotifyOnValidationError=True,ValidatesOnExceptions=True }" />
                        </dataform:DataField>
                        <dataform:DataField Label="PostalCode">
                              <TextBox Text="{BindingPostalCode, Mode=TwoWay,NotifyOnValidationError=True,ValidatesOnExceptions=True }" />
                        </dataform:DataField>
                  </StackPanel>
            </DataTemplate>
      </dataform:DataForm.EditTemplate>
</dataform:DataForm>
<StackPanel Orientation="Horizontal"HorizontalAlignment="Right" Margin="0,12,0,0">
      <Button x:Name="submitButton" Width="75" Height="23" Content="Submit" Margin="4,0,0,0" Click="submitButton_Click"/>
</StackPanel>

Now run the application, result should be like this.


Image6.

Now if you enter some text in text box then result should be filter automatically.


Image7.

Now if you click on customer id and you want sent that id t another page then u have to write code like this.

<sdk:DataGridTemplateColumn Header="Customer ID">
      <sdk:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                  <HyperlinkButton x:Name="CustomerIDHyperlink" Content="{Binding Path=CustomerID, Mode=OneWay}" Click="EditHyperlink_Click"></HyperlinkButton>
            </DataTemplate>
      </sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>

private void EditHyperlink_Click(object sender, System.Windows.RoutedEventArgs e)
{
Customer currentEvent = customerDataGrid.SelectedItemasCustomer;
if (currentEvent != null)
{
NavigateToEditEvent(currentEvent.CustomerID);
}
}

private void NavigateToEditEvent(stringeventId)
{
NavigationService.Navigate(newUri("/Detail?CustomerID=" +
eventId, UriKind.Relative));
}

Detail page should be like this.




Image8.

Hope this will help. If you have any questions then download attached project or drop me a comment in www.c-sharcorner.com  comment section.