Develop Business Apps with Silverlight 3

Learn how to add, edit or delete data in a database from the Silverlight application using the RIA Services SDK from Microsoft

Tuesday, October 06, 2009

Print

Comment

Email

Digg

Del.icio.us

Reddit

Twitter

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:

<dataFormToolkit:DataForm x:Name="dfDataForm" 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:

<Button x:Name="btnSubmit" Content="Save to Server" 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.

Page(s)   1