Creating Business Apps Made Easy

The latest version of Silverlight has just been released by Microsoft. There
are a lot of new features in this new version for graphics manipulation, pixel
shader effects and 3D. However, one of the most exciting things in this release
is the built-in capability to create line of business applications much more
easily with a number of great features and a few new or enhanced controls.
Silverlight 3 finally gets to the point where it can actually go ahead and
replace traditional Web based LoB apps with a much smarter Rich Internet
Application (RIA). This new article series will show you how you can create a
database driven application in Silverlight 3 using different features and
controls. In this first part, we'll take a look at some of the controls
available in Silverlight 3 and how you can retrieve and update records in a
database.

To go along with this article you will need the following installed on your
machine: Silverlight 3 RTW, Visual Studio 2008 SP1 or Visual Web Developer 2008
SP1, Silverlight 3 SDK and Silverlight 3 Controls Toolkit. You can find all of
these from the official Silverlight site at www.silverlight.net. Once all of
these have been installed, open up Visual Studio or Visual Web Developer, called
VS for both from now on. Create a new Silverlight Application project and when
prompted to create a web project, simply accept the defaults and go ahead. For
instance, in my case I created a Silverlight project named SL3DataSample and it
created a SL3DataSample.Web project along with it. Do remember that ASP.NET is
not required to host a Silverlight application. You can do it from any Web page
— HTML, PHP, Java or anything else. However, in our case, we will use the
ASP.NET project to provide a Windows Communication Foundation (WCF) endpoint to
allow data viewing and updating. You can also provide any type of SOAP endpoint
to get this working.

To work with a database, you can either connect to an existing database or
even more simply, if you have SQL Express installed on your machine, simply drop
an MDF file into the App_Data folder of the Web project. Either way, right click
the Web project and add a new Linq to SQL class and name it something similar to
the database. In my case, I used the NorthWind sample database and named the
Linq class as NW.DBML. Now go to the Database Explorer window and drop a table
in the designer pane. I dropped in the Suppliers table from NorthWind. Now comes
an important part. Select the designer pane and in the Properties window, set
the Serialization Mode= Unidirectional. This will allow the data to flow
automatically from the database to the client. Now again in the Web project, add
a new WCF Service item and call it DataService.svc. This will create the
following files: IDataService.cs, DataService.svc and DataService.svc.cs. First
open the IDataService.cs file and add the following by replacing the DoWork
function already present.

Silverlight Datagrid displaying data from the database through WCF. Note that the data is sorted on two columns.

List GetSupplierByName(string Name);



void SaveSupplier(Supplier s);

This creates two methods that make up the contract of the WCF service. Now
open the DataService.svc.cs file and select the iDataService definition and
“Implement Interface...” from the SmartTag menu. Once the method stubs appear you
can go ahead and create the following code:

public List GetSupplierByName(string Name)

{

NWDataContext db = new NWDataContext();

var suppliers = from s in db.Suppliers

where s.CompanyName.Contains(Name) || s.ContactName.Contains(Name)select s;

return suppliers.ToList();

}

This method will now return a list of suppliers whose company name or contact
name contains the name searched for. The final step in the Web project is to
change the WCF binding. Search for the IDataService in the Web.config file and
change the binding value to basicHttpBinding to ensure SOAP binding for
Silverlight.

We can now finally go to the Silverlight project and start creating a UI to show
the data. For this, select the MainPage.xaml and drop in a DataGrid control from
the toolbox on the XAML page and add the x:Name=“dgData” attribute. Add a
Service Reference to the WCF and name it DataService. Open the code behind file
for the page and add the following code:

DataServiceClient ws;

public MainPage()

{

InitializeComponent();

ws = new DataServiceClient();

ws.GetSupplierByNameCompleted +=

new EventHandler (ws_GetSupplierByNameCompleted);

ws.GetSupplierByNameAsync("");

}

void ws_GetSupplierByNameCompleted(object sender,
GetSupplierByNameCompletedEventArgs e)

{

dgData.ItemsSource = e.Result;

}

Also add a using SL3DataSamples. DataService; to the top of the page. Run the
page to see the data returned and shown in the Silverlight 3 DataGrid control.
Note that you get a number of features out of the box-for instance sorting
multiple, rearranging the columns and even editing (although the data will not
be saved back to the server for now). Now let's also add some filtering
functions in by modifying the XAML file like this:

/>

Also add the event handler for the button code behind, like this:

private void btnFilter_Click(object sender,
RoutedEventArgs e)

{

ws.GetSupplierByNameAsync(txtNameFilter.Text);

}

Run the page to see full data. Enter some text in the text box and press the
button to filter data. Now we'll add a simple DataForm control to the page to
have master detail functionality and save data back to the server. Drop in a
DataForm from the toolbox just below the DataGrid and name it dfForm and set a
couple of other properties. Also add a SelectionChanged event to the DataGrid
like shown:

Add the following line to the ws_GetSupplierByName Completed Event:

dfForm.ItemsSource = e.Result;

And the following to the dgData_SelectionChanged event:

dfForm.CurrentIndex = dgData.SelectedIndex;

Run the app again to see the result. You can click on a row in the data grid
to see it reflected in the Dataform below. You can also navigate using the
navigation buttons and edit or add entries. To save the data back however, you
need to do two more changes. In the DataService.svc.cs add the following:

public void SaveSupplier(Supplier newSupp)

{NWDataContext db = new NWDataContext();

var q = from s in db.Suppliers

where s.SupplierID == newSupp.SupplierID

select s;

if (q.Count() == 0) // New Supplier - so Insert

db.Suppliers.InsertOnSubmit(newSupp);

else // Existing Supplier - so Modify {Supplier supp = q.First();

supp.SupplierID = newSupp.SupplierID;

supp.CompanyName = newSupp.CompanyName;

supp.ContactName = newSupp.ContactName;

supp.ContactTitle = newSupp.ContactTitle;

supp.Address = newSupp.Address;

supp.City = newSupp.City;

supp.Country = newSupp.Country;

supp.Fax = newSupp.Fax;

supp.HomePage = newSupp.HomePage;

supp.Phone = newSupp.Phone;

supp.PostalCode = newSupp.PostalCode;

supp.Region = newSupp.Region;

}

}

Modify the DataForm to add the properties: CommitButtonContent="Save Data"
EditEnding="dfForm_EditEnding". Also add the event handler as:

private void dfForm_EditEnding

(object sender, DataFormEditEnding EventArgs e)

{ if (e.EditAction == DataFormEditAction.Commit)

{ Supplier s = (Supplier)dfForm.CurrentItem;

ws.SaveSupplierCompleted += new EventHandler ComponentModel.AsyncCompleted EventArgs>(ws_SaveSupplier Completed);

ws.SaveSupplierAsync(s);

}

}

void ws_SaveSupplier Completed(object sender, System.ComponentModel.
AsyncCompletedEventArgs e)

{

MessageBox.Show("Saved Data");

}

Run this version and you will be able to use the DataForm to edit existing
data and add new records and save it back to the server as well! As you can see,
by using these controls you can easily start creating data driven pages.

In the coming issues, we'll see how you can make a scalable, n-tier based
Silverlight 3 line of business application and perform some advanced features
without writing much code.