Silverlight 2 Web Service Part II - User Defined Type

In this example we will use the TwoWay mode because we want to be able to change the value of the underlying object. To get feedback when errors occur in the data binding, for instance if you type in an erroneous value in a TextBox control and we want to display a message to the user, we need to activate two properties that handle errors. The two properties we need to set are ValidatesOnExceptions and NotifyOnValidationError. We also want to use the TextChanged event. We will get back to these events shortly.

<!-- TwoWay binding -->
<TextBox Name="txtName" Grid.Column="2" Grid.Row="3"
Margin="20, 2, 2, 2" Height="Auto" Width="200"
HorizontalAlignment="Left" Text="{Binding Name, Mode=TwoWay,
ValidatesOnExceptions=true, NotifyOnValidationError=true}"
TextChanged="TextBox_TextChanged"></TextBox>
<TextBox Name="txtPrice" Grid.Column="2" Grid.Row="4"
Margin="20, 2, 2, 2" Height="Auto" Width="70"
HorizontalAlignment="Left" TextAlignment="Right" Text="{Binding Price,
Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
TextChanged="TextBox_TextChanged"></TextBox>
<TextBox Name="txtSize" Grid.Column="2" Grid.Row="5"
Margin="20, 2, 2, 2" Height="Auto" Width="70"
HorizontalAlignment="Left" TextAlignment="Right" Text="{Binding Size,
Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
TextChanged="TextBox_TextChanged" ></TextBox>
<TextBox Name="txtWeight" Grid.Column="2" Grid.Row="6"
Margin="20, 2, 2, 2" Height="Auto" Width="70"
HorizontalAlignment="Left" TextAlignment="Right" Text="{Binding Weight,
Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
TextChanged="TextBox_TextChanged" ></TextBox>

Add a reference to the Web Service

The first thing we need to do is to add a reference to the Web Service.

1. Right click on the References folder in the WebService project.
2. Select Add Service Reference in the context menu.
3. Click on the Discover button. This searches the solution for available services. Alternatively you can write the address to the service in the Address field.
4. Select the wsData service in the list of services.
5. Name the namespace DataService in the Namespace field.
6. Click on the OK button to crate the necessary proxy classes for the Web Service.

A proxy to the service should appear under the Service References folder in the Solution Explorer. Click on the Show All Files button in the Solution Explorer to see all the files added to the proxy. There will also be a ServiceReferences.ClientConfig file added to the project root folder. This file configures the connection to the Web Service.

The event methods

Now that we have a proxy to the Web Service we can begin to write the logic to handle the calls to the Web Service methods. The first thing we need to do is to add a couple of using statement to the Page.xaml.cs page. The following using statements are needed:

DataService: Makes it easier to access the Web Service classes.

System.Windows.Browser: To gain access to the HtmlPage class needed to get the current port.

System.ServiceModel: To gain access to the EndpointAddress and the BasicHttpBinding classes needed when creating the Web Service proxy object in code. We will override the settings in the ServiceReferences.ClientConfig file. We need to do that to prevent the Web Service from stop working when the port changes.

using WebService.DataService;
using System.Windows.Browser;
using System.ServiceModel;

Code in the Constructor

Because we use numeric values in the controls we might want to get a uniform presentation of such values, therefore we will set the current culture of the application to en-US. When I wrote the application I realized that the decimal delimiter was different when displaying values through code and when using binding. This happened because I have Swedish settings in Windows, and to counter for that and set a culture in code I use the CurrentCulture property of the Thread object.

public Page()
{
InitializeComponent();
System.Threading.Thread.CurrentThread.CurrentCulture = new
System.Globalization.CultureInfo("en-US");
}

Code in the Button_Click event

Next we will create an EndpointAddress object to define where the Web Service is located. We do this to ensure that we can call the service even if the port changes. You could change this endpoint address and base the URL on the current Silverlight page so that it will work wherever you deploy it.

private void Button_Click(object sender, RoutedEventArgs e)
{
System.ServiceModel.EndpointAddress endpoint = new
EndpointAddress("http://localhost:" +
HtmlPage.Document.DocumentUri.Port + "/wsData.svc");
}

Next we need to create a proxy object that will handle the call to the service. On the proxy object we will create an event handler for the GetProductCompleted event that will fire when the call returns from the service method call. It is named after the GetText method we created earlier in the Web Service class.

The default time out is 60 seconds, which might be a tad long, so we will change that to 30 seconds using the OperationTimeout property of the proxy object.

All calls to Web Services need to be done asynchronously so we will call the GetTextAsync method on the proxy object. When calling a method asynchronously we need to have a callback method present, in our case it is the proxy_GetProductCompleted method.

private void Button_Click(object sender, RoutedEventArgs e)
{
System.ServiceModel.EndpointAddress endpoint = new
EndpointAddress("http://localhost:" +
HtmlPage.Document.DocumentUri.Port + "/wsData.svc");

wsDataClient proxy = new wsDataClient(new BasicHttpBinding(), endpoint);
proxy.GetProductCompleted += new EventHandler
<GetProductCompletedEventArgs>(proxy_GetProductCompleted);
proxy.InnerChannel.OperationTimeout = TimeSpan.FromSeconds(30);
proxy.GetProductAsync();
}

Callback method code

We need to write the code that updates the page controls in the callback method. We will use the controls we defined earlier in the Page.xaml page. Note that we use the DataContext property of the Grid to assign the values to the bound controls. We also use the Product objects' properties directly when assigning values to the labels. The product object is passed in to the event method through the GetProductCompletedEventArgs parameter. We also set the error message lable to reflect if any Web Service connection error has occurred.

void proxy_GetProductCompleted(object sender, GetProductCompletedEventArgs e)
{
Product product = (Product)e.Result;
lblErrorMessage.Text = "";
try
{
//Data bound through binding expression in Page.xaml
ProductDetails.DataContext = product;

//Data bound through through code
lblProductNumber.Text = product.ProductNumber;
lblName.Text = product.Name;
lblPrice.Text = product.Price.ToString();
lblSize.Text = product.Size.ToString();
lblWeight.Text = product.Weight.ToString();
}
catch { lblErrorMessage.Text = "Error calling Web Service"; }
}

The BindingValidationError event method code

We need to write some code to reflect if any binding error has occurred while changing values in the textboxes, to achieve this we activate the BindingValidationError event that we created earlier for the grid. We will cast the ValidationErrorEventArgs parameter back to a Product object that we can use to extract information. We will also let the textbox retain focus. Remember that the binding evaluation occur at different stages for different controls; for instance it will be fired when a user checks a checkbox, but only after a textbox loses its focus.

private void ProductDetails_BindingValidationError(object sender,
ValidationErrorEventArgs e)
{
lblErrorMessage.Text =
"The value has not changed \nThe stored value is still: " +
((Product)ProductDetails.DataContext).Price.ToString();
txtPrice.Focus();
}