Introducing Two-Way Data Binding using Silverlight 2.0, WCF and LINQ to SQL

This is my fourth article in a series focusing on Silverlight 2.0 development using Visual Studio 2008. Technically, we will have Silverlight 2.0 controls accessing a regular WCF Service and do an INSERT operation against the database using the “LINQ to SQL” model.

Contributed by Jagadish Chaterjee
Rating:

/ 6
November 19, 2008

Rate this Article:
MEH MEH++

SEARCH ASP FREE

Developing a Silverlight 2.0 page to demonstrate Insert functionality

Let us start with a new solution:

Create a new Visual Studio 2008 solution.
Add a new WCF Service project named "DemoEmpService."
Change "Service1" to "EmpService" everywhere in the project (steps are shown in my previous articles).
Add a "LINQ to SQL Classes" item to the project ("DemoEmp.dbml").
Using "Server Explorer," drag and drop "Emp" and "Dept" tables as shown in the following Fig 01.

Modify "IEmpService.vb" as shown below:

' NOTE: If you change the interface name "IService1" here, you must also update the reference to "IService1" in Web.config.

<ServiceContract()> _

Public Interface IEmpService

<OperationContract()> _

Sub Add(ByVal objEmp As Emp)

End Interface

Implement the same in "EmpService" (service) class as follows:

Imports System.Data.Linq

Public Class EmpService

Implements IEmpService

Public Sub New()

End Sub

Public Sub Add(ByVal objEmp As Emp) Implements IEmpService.Add

Using ctxt As New DemoEmpDataContext

'adding a new row

ctxt.GetTable(Of Emp).InsertOnSubmit(objEmp)

'saving rows added

ctxt.SubmitChanges()

End Using

End Sub

End Class

Add a new "Silverlight" project ("DemoSL") to the solution. This in turn will add a "DemoSL.Web" project (Silverlight hoster application) to the solution. Detailed steps are provided in previous articles.
Add a new "Silverlight user control" ("Page2.xaml") to the "DemoSL" project and modify "Application_Startup" in "App.xaml" as follows:

Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup

Me.RootVisual = New Page2()

End Sub

Developing a Silverlight 2.0 page to demonstrate Add functionality, continued

This is a continuation from the previous section.

Modify "Page2.xaml" as follows:

<UserControl x:Class="DemoSL.Page2"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</UserControl>

The above code creates the following screen:

In the code behind, modify the "Page2" class as follows:

Partial Public Class Page2

Inherits UserControl

Public Sub New

InitializeComponent()

End Sub

Private Sub btnAdd_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnAdd.Click

Me.lblMsg.Text = "Communicating..."

Dim objService As New EmpService.EmpServiceClient

AddHandler objService.AddCompleted, AddressOf AddEmployeeCompleted

objService.AddAsync(New EmpService.Emp With {.Empno = Me.txtEmpno.Text, .Ename = Me.txtEname.Text, .Sal = Me.txtSal.Text, .Deptno = Me.txtDeptno.Text})

End Sub

Private Sub AddEmployeeCompleted(ByVal sender As Object, ByVal e As System.ComponentModel.AsyncCompletedEventArgs)

Me.lblMsg.Text = "Added Successfully!"

End Sub

End Class

Press F5 and you should be able to add new employee information (row) to the database using the Silverlight 2.0 page along with WCF and LINQ to SQL.

If you run into any problems, I dedicated few sections to troubleshooting in my previous article. Please go through all of the troubleshooting steps in my previous article. If you do that, you should have no problems. If you need a complete walk-through, consider reading my previous two articles.

Developing a Silverlight 2.0 page to demonstrate Add functionality: Using two-way binding

In previous sections, we used controls which are not really bound to any of our business objects (such as the "Emp" class or any of its properties). I managed to create my own "Emp" object in the code behind and assigned all properties with textbox values.

We can also achieve the same result by directly binding the controls to our business objects. The "One-Way" binding simply fills controls with properties information related to the business object. However, the values in the controls will not be assigned back to the properties of the business object. The "Two-way" binding works in both directions (properties to controls and vice versa).

All of this will happen in the presentation layer (Silverlight application). For this, we need not modify any of our existing WCF Service or LINQ to SQL.

Add a new "Silverlight User control" (Page3.xaml) and modify the code as follows:

<UserControl x:Class="DemoSL.Page3"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</UserControl>

You must observe "Binding" specifications for textbox controls in the above XAML. Modify the code behind as follows:

Partial Public Class Page3

Inherits UserControl

Private objEmp As EmpService.Emp

Public Sub New()

InitializeComponent()

objEmp = New EmpService.Emp

Me.LayoutRoot.DataContext = objEmp

End Sub

Private Sub btnAdd_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnAdd.Click

Me.lblMsg.Text = "Communicating..."

Dim objService As New EmpService.EmpServiceClient

AddHandler objService.AddCompleted, AddressOf AddEmployeeCompleted

objService.AddAsync(objEmp)

End Sub

Private Sub AddEmployeeCompleted(ByVal sender As Object, ByVal e As System.ComponentModel.AsyncCompletedEventArgs)

Me.lblMsg.Text = "Added Successfully!"

End Sub

End Class

You must observe the "DataContext" property which is being set to the "LayoutRoot" control. Make sure to modify "App.xaml" as follows so that it will start Page3 as the root.

Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup

Me.RootVisual = New Page3()

End Sub

Explaining two-way binding

Let us have a look at the textboxes' definitions:

The most important property (say attribute) to examine in all of the above textboxes is the "Text" with "Binding" specification. The binding specification includes the word "Binding" followed by a property name and the "Mode," which is "TwoWay."

Once the "Mode" is provided as "TwoWay" and the user has modified any text in the textboxes, the business object (say "Emp" object in this case) automatically reflects the changes. Similarly, if business object values are modified, it would automatically be reflected in the controls.

The business object will generally be assigned to a container control with the help of the "DataContext" property. Once the container control receives the object, it passes the object to all of its child controls and each of the child controls pull whatever information they require (using the Binding specification).

In our case, the DataContext property is set in code-behind as follows:

Private objEmp As EmpService.Emp

Public Sub New()

InitializeComponent()

objEmp = New EmpService.Emp

Me.LayoutRoot.DataContext = objEmp

End Sub

All of the information in "objEmp" is automatically carried to textboxes and vice versa (which is two-way binding).

In my upcoming articles, we will see more and more examples of Silverlight 2.0 development together with LINQ to SQL and WCF. I hope you enjoyed the article; any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com