SharePoint Applications Using Windows Azure : Create and Deploy a Silverlight Web Part That Consumes the WCF Service

Return to the Visual Studio solution and right-click it.

Select Add and then click New Project.

Select Silverlight Application and provide a name for the application (such as SLMortgageApplication). You don’t need an additional website to host the Silverlight application, so clear this check box and click OK.

After you have created the project, add a service reference to the project by using the same WCF service endpoint that you used in the earlier exercise. To do this, right-click the project, select Add Service Reference, add the Windows Azure service URI in the Address field, and click Go. When the service has loaded, provide a namespace (such as AzureMortgageService) and click Add.

Next, right-click the project, select Add, and then click Class. Provide a name for the class (such as MortgageDetails) and then amend the default class code as shown in the bolded code in the following listing:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SLMortgageApplication
{
    public class MortgageDetails
    {
        public string Offering {get; set;}
        public string Rate { get; set; }
        public string APR { get; set; }
        public string Change { get; set; }
        public string Trend { get; set; }
    }
}

Right-click the MainPage.xaml and select View Designer. The UI for this application will be straightforward and will contain a label (lblTitle), a datagrid (datagrdAzureMortgageData), and a button (btnGetData).

In the XAML view, amend the XAML as shown in the bolded code in the following code listing. When the code has been amended, your UI should look similar to the graphic that follows the code:

<UserControl x:Class="SLMortgageApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="315" xmlns:sdk=
      "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <Grid x:Name="LayoutRoot" Background="White" Width="315">
        <Button Content="Get Data" Height="23" HorizontalAlignment="Left"
          Margin="12,250,0,0" Name="btnGetData" VerticalAlignment="Top" Width="75"
          Click="btnGetData_Click" />
        <sdk:DataGrid AutoGenerateColumns="True" Height="177"
          HorizontalAlignment="Left" Margin="12,54,0,0"
          Name="datagrdAzureMortgageData" VerticalAlignment="Top" Width="291" />
        <sdk:Label Height="21" HorizontalAlignment="Left" Margin="12,19,0,0"
          Name="lblTitle" VerticalAlignment="Top"
          FontSize="12" FontWeight="Bold"
          Width="174" Content="Contoso Mortgage Rates" />
    </Grid>
</UserControl>

Right-click the MainPage.xaml file and select View Code. Amend the code-behind as shown in the bolded code here:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml;
using System.Xml.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using SLMortgageApplication.AzureMortgageService;

namespace SLMortgageApplication
{
    public partial class MainPage : UserControl
    {
        double[] returnMortgageData = new double[6];
        double mortgateAPR = .18;
        double[] pastMortgageRates = new double[6];

        List<MortgageDetails> listOfMortgageData = new List<MortgageDetails>();
        List<Double> returnDblData = new List<Double>();

        string strTrend = "";
        string[] strResults = new string[6];

        public MainPage()
        {
            InitializeComponent();
        }
        private void btnGetData_Click(object sender, RoutedEventArgs e)
        {
            pastMortgageRates[0] = .39;
            pastMortgageRates[1] = .58;
            pastMortgageRates[2] = .44;
            pastMortgageRates[3] = .34;
            pastMortgageRates[4] = .62;
            pastMortgageRates[5] = 1.22;

            AzureServiceClient myProxy = new AzureServiceClient();
            myProxy.getDailyInterestRateAsync();
            myProxy.getDailyInterestRateCompleted += new
              EventHandler<getDailyInterestRateCompletedEventArgs>(
              myProxy_getDailyInterestRateCompleted);
        }
        void myProxy_getDailyInterestRateCompleted(object sender,
           getDailyInterestRateCompletedEventArgs e)
        {
            var query = from mort in e.Result
                        select mort;
            int i = 0;
            foreach (var item in e.Result)
            {
                returnDblData.Add(query.ElementAt(i));
                strResults[i] = returnDblData.ElementAt(i).ToString();
                i++;
            }
            int j = 0;
            foreach (var item in returnDblData)
            {
                MortgageDetails tempObj = new MortgageDetails();

                if (j == 0)
                {
                    tempObj.Offering = "30 YR Fixed";
                }
                else if (j == 1)
                {
                    tempObj.Offering = "15 YR Fixed";
                }
                else if (j == 2)
                {
                    tempObj.Offering = "3 YR ARM";
                }
                else if (j == 3)
                {
                    tempObj.Offering = "5 YR ARM";
                }
                else if (j == 4)
                {
                    tempObj.Offering = "7 YR ARM";
                }
                else if (j == 5)
                {
                    tempObj.Offering = "10 YR ARM";
                }
                tempObj.Rate = strResults[j];
                tempObj.APR = (double.Parse(strResults[j]) + mortgateAPR).ToString();
                tempObj.Change = (double.Parse(strResults[j]) -
                   pastMortgageRates[j]).ToString();
                tempObj.Trend = calculateTrend(double.Parse(strResults[j]),
                   pastMortgageRates[j]);

                returnMortgageData.Add(tempObj);
                j++;
            }
            datagrdAzureMortgageData.ItemsSource = returnMortgageData;
        }
        private string calculateTrend(double currentMortgageRate,
           double pastMortgageRate)
        {
            double mortgageTrend = 0.00;
            mortgageTrend = currentMortgageRate - pastMortgageRate;
            if (mortgageTrend > 0.00)
            {
                strTrend = "+";
            }
            else if (mortgageTrend < 0.00)
            {
                strTrend = "-";
            }
            else if (mortgageTrend == 0.00)
            {
                strTrend = "NC";
            }
            return strTrend;
        }
    }
}

Notice that retrieving the return data from the WCF service in Silverlight is a little different than simply assigning the return data to an array of doubles as you did earlier. Because Silverlight is asynchronous, you need to include an Async and a Completed event (as opposed to one event that attached to a button, as was the case in the Web Part you built earlier), as in the following code snippet:

...

AzureServiceClient myProxy = new AzureServiceClient();
          myProxy.getDailyInterestRateAsync();
          myProxy.getDailyInterestRateCompleted += new EventHandler
             <getDailyInterestRateCompletedEventArgs>(
             myProxy_getDailyInterestRateCompleted);
...

You’ll also notice that in the Silverlight example, you’re using an in-memory object, or custom class, to help manage the copying of the return data into a DataGrid. This is because System.Data is not a supported library in Silverlight, so you cannot bind data in the same way you would in the Web Part.

When you have finished adding the code, press F6 to ensure that you can build without any errors.

Add the XAP file to a document library in SharePoint, copy the shortcut to that XAP file, add a Silverlight Media Web Part to SharePoint, and then use the shortcut to the XAP file to load the Silverlight application from the document library.

The result of the Silverlight Web Part looks like the graphic shown here. You can see that the UI is slightly different—a little cleaner—and though the code looks a little different, the result is the same.