Develop Business Apps with Silverlight 3

Last month, we took a detailed look at how you can use the .NET RIA Services

SDK for Silverlight to quickly create a Silverlight application that can not

only talk to the database on the server to retrieve data, but also do more

advanced things like sorting, filtering and paging with a minimal amount of

code. This time we'll continue on from where we left to add the ability to

modify data by inserting, updating or deleting records using the same RIA

Services.

Let's pick up the project that we used last month and build upon it. Our

project, named SLRIA, has a Domain Data Source called prodDataSource which talks

to the NWDomainService in the SLRIA.Web application. The domain service itself

talks to a LINQ class that works with the Products, Suppliers and Categories

tables in the NorthWind database. The Silverlight page also contains a DataGrid

control called dgData that is bound to the domain data source and has a text

filter as well as a data pager control attached to provide filtering and paging

capabilities.



To allow the application to manipulate data you can actually go ahead and use
the DataGrid control . The control allows you to change data within each record

directly. However, this is usually a cumbersome method and what we'd like to do

is to create a Master-Child form to allow richer data editing and addition. For

this, we'll use DataForm control from the Silverlight Controls Toolkit.

Simply drop a DataForm control from the toolbox in VS under the DataGrid. You

will then need to configure it like this:

Header="Product Details" AutoEdit="False" CurrentItem="{Binding ElementName=dgData,

Path=SelectedItem}" />

This creates a new data entry control called dfDataForm with a header and

editing disabled by default. It is also bound to the selected record in the data

grid. On running the application, you will see a new data entry form at the

bottom of the screen. You can click on any record in the data grid and the

record details will show up in the form below correctly. This lets you perform a

simple Master-Details view quite easily.

You might also want to change some data. For this, click the pencil icon on

the top right of the form and change some data in the editable record. Click on

any other field in the record and you will see that the header of the form shows

a small Asterix. This signifies that the record is “dirty” and needs to be

committed to the database. You will also note that, if you change the record in

the form, the change is immediately reflected in the grid above as well. You can

cancel any change you have made by clicking the button in the form. But before

we see how the changes are written back to the server, let's take a look at some

more things that you can do with the form.

A simple DataForm control that displays the record selected in the grid above and also allows you to edit the data shown.	Editing a record shows that the item is 'dirty' while also synchronizing with the grid. Note the '*' next to the header in the image.

Currently, you can only view or edit the data in a record selected in the

Data grid. However, it would also be nice to be able to navigate records within

the form itself as well as be able to add new records or delete any existing

records.

To do this, modify the DataForm definition by adding the following attribute:

CommandButtonsVisibility="Add,Edit,Delete"

Now, when you run the application, you will see three icons in the form —

pencil (edit), + (add), - (delete). You can go ahead and add a bunch of other

buttons as well such as, navigation or confirmation buttons. The easiest way to

do this is to change the attribute to look like this:

CommandButtonsVisibility="All"

You will notice that all the buttons other than edit are disabled. This is

because we have only bound the current item in the data form to the selected

item of the grid. The form has no clue about the collection of records and their

structure to be able to navigate, add or delete from them. To rectify this

issue, add the following attribute to the data form definition:

ItemsSource="{Binding Data, ElementName=prodDataSource}"

Now run the application and you will see that all features are enabled. You

can navigate records, edit them, add a new one and even delete records. Not only

that, the Data grid also remains in sync with the actions you perform in the

data form. So go ahead and do some of them now.

Different command button customizations that work once the form is bound to the data source.	Saving back to the server requires you to commit the changes and submitting the data.

Once you have changed some data around, go and verify these changes in the

source database. You will see that none of these changes have actually hit the

database itself! You must remem



ber that Silverlight is a client side application and so is the data form. It is
actually the domain data source control that needs to send the data back to the

server.

To do this, you must commit all changes that you made in the form to the

domain data source and then submit these changes back to the server. To do this,

simply add a button below the data form like this:

Click="btnSubmit_Click" />

And add the following in the click event handler:

dfDataForm.CommitEdit();



prodDataSource.SubmitChanges();

Now when you run the application, make whatever changes you wish and then

finally click the button. This will submit all the changes in a batch back to

the server.

The DataForm control is quite powerful in the manner that you can really

customize a number of things in it. There are different templates like the

ReadOnly, NewItem, Edit and Header that let you customize the display of each of

these.

You can also select from a number of different bound field types to show

textboxes, checkboxes, calendars, drop downs and a complete custom field type.

This allows you to create complex and feature rich data bound data forms quite

easily. However, this is beyond the scope of this article and not something

we'll delve into. Next month, we'll look at validating the data being sent to

the server and how to give a message back to the user.