This is the first post in a series to demonstrate how to use the standard MSFT technologies to implement a CRUD data application in Silverlight. This post is beginners stuff - there’s nothing advanced here. Most readers with some experience of Silverlight will learn nothing from this post, but I want to start at the beginning so those of you who are relatively new to Silverlight can see how analogous building such an app in Silverlight is to say building it in ASP.NET, Win Forms or WPF.
This app is built on Visual Studio 2008 SP1, SQL Server 2008, Silverlight 2.0 and the Silverlight Toolkit using C#.
The finished code for part 1 is here.
Database preparation:
I have a database in SQL Server with the following table definition:
With the following data:
Steps:
1. Create the Silverlight application project SimpleCRUDApp
2. Add an ASP.NET web app to host the Silverlight project
3. Replace the user control in Page.xaml with the following XAML that will be used to display the persons data in a list box. Note: you’ll have to update the namespace in the x:Class declaration of the user control tag if you named your project something other than SimpleCRUDApp
<UserControl x:Class="SimpleCRUDApp.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid x:Name="LayoutRoot" Background="Azure" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="top" Margin="50,20,0,0" >
<Border Background="LightBlue" Width="200" Height="225" BorderBrush="CornflowerBlue" BorderThickness="3" CornerRadius="10" >
<ListBox x:Name="lstPersons" Background="AliceBlue" HorizontalAlignment="Center" Margin="0,10,0,0" MaxHeight="200" MaxWidth="150" VerticalAlignment="Top" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}" FontSize="16" />
<TextBlock Text="{Binding LastName}" FontSize="16" Margin="5,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</StackPanel>
<Border x:Name="bWorking" VerticalAlignment="Center" HorizontalAlignment="Center" Background="green" Height="50" Width="200" Visibility="Collapsed" >
<TextBlock Text="WORKING..." Foreground="White" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
</UserControl>
The list box above has an item template to bind text blocks to the FirstName and LastName properties of the list box bound objects to display their values to the user. The FirstName and LastName properties match the names of the fields in the Person table definition in the Database preparation section above.
4. Add an ADO.NET Entity Data Model to the SimpleCRUDApp.Web project and choose to generate the model from the database, selecting your database and the Person table (see the Database preparation section above)
5. Add a Silverlight enabled WCF service to the SimpleCRUDApp.Web project
6. Replace the generated DoWork() function with the following code and build the SimpleCRUDApp.Web project
[OperationContract]
public List<Person> GetPeople()
{
CRUDEntities ctx = new CRUDEntities();
var people = from p in ctx.Person
select p;
return people.ToList();
}
The function returns a list of Person records from the database in the form of the entity framework generated Person entities.
7. Add a service reference to the SimpleCrudApp project, click the Discover button and expand the Services tree view to ensure our GetPeople function has been detected. Click OK.
8. In the Page.xaml.cs file in the SimpleCrudApp project replace the constructor with the following code
public Page()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(Page_Loaded);
}
void Page_Loaded(object sender, RoutedEventArgs e)
{
LoadPeople();
}
private void LoadPeople()
{
bWorking.Visibility = Visibility.Visible;
CRUDSvc.CRUDSvcClient proxy = new SimpleCRUDApp.CRUDSvc.CRUDSvcClient();
proxy.GetPeopleCompleted += new EventHandler<SimpleCRUDApp.CRUDSvc.GetPeopleCompletedEventArgs>(proxy_GetPeopleCompleted);
proxy.GetPeopleAsync();
}
void proxy_GetPeopleCompleted(object sender, SimpleCRUDApp.CRUDSvc.GetPeopleCompletedEventArgs e)
{
lstPersons.ItemsSource = e.Result;
bWorking.Visibility = Visibility.Collapsed;
}
The above code does the following things:
· Once the page has been initialized in the constructor, it sets up an event handle to fire when the client has loaded the page
· Once loaded the app shows the “working” message (in the bWorking border XAML control), creates a service proxy for the CRUD service and sets up the event handler that will be fired once the call to the GetPeople function in the service has completed. REMEMBER: all calls to web services in Silverlight are asynchronous – you have no option for synchronous calls – so all calls to a service will be set up similar to this.
· The app then calls the GetPeople service function.
· In the event handler for the GetPeople function, the list of person records (a list of entity framework generated Person entities) returned as the result of the service function call are bound to the items source property of the XAML list box in Page.xaml.
· As the list box has an item template that displays the FirstName and LastName properties in text blocks of the objects bound to the list box, the first and last name will be displayed for each Person entity.
9. Run the solution and you should see the following screen where the first and last names of the records in the Person table in our SQL Server database are displayed successfully.
What have we covered?
We have covered using the Visual Studio templates for creating the different core components that are needed to create a basic forms over data business application in Silverlight.
-
A Silverlight application with web application to host it
-
An entity framework model to handle data access and entity generation on the server side and DTOs for the client. (Yes this leads to the discussion of where do business objects exist vs use of simple DTOs for data transfer in distributed apps - but that is a more complex discussion for a later post)
-
A WCF service to enable the communication between the Silverlight client and the server. One option for the communication mechanism - there are others to explore in later posts.
-
How to hook up the calling of the asynchronous WCF services in the Silverlight client.
What's next?
The next post will move on to show how we add the functionality to create records in our CRud application.
Later posts will complete all parts of the CRUD application, will then migrate the application into an MVVM model and then start to address some of the more complex aspects of enterprise application development in Silverlight.