Developing Your First Silverlight Application Using Visual Studio 2008

WPF, WCF, WWF, CardSpaces and Silverlight are the next generation components from Microsoft which revolutionize the current .NET Framework with great new and innovative architectures covering all tiers. I will not look into details of architectures of these new components as Microsoft has already added great content on its MSDN.

If you have not configured IIS after installing Visual Studio 2008 beta 2, it is highly advised to run the following (for proper mappings and automated IIS configuration):

ServiceModelReg.exe /i /x

Once Visual Studio 2008 beta 2 is installed, you need to install Microsoft Silverlight 1.1 SDK (Alpha) (available at this Microsoft site) and Microsoft Silverlight Tools for Visual Studio 2008 beta (Alpha) (available at this Microsoft Silverlight site).

The entire source code for this article is available in the form of a downloadable zip file. The solution was developed using Microsoft Visual Studio 2008 Beta 2 and Microsoft Silverlight 1.1 Alpha on Microsoft Windows Server 2003 Enterprise Edition with Microsoft SQL Server 2005 Enterprise Edition. I didn’t really test it in any other environment. I request that you post in the discussion area if you have any problems in execution.

Creating an ASP.NET 3.5 Web Service using Visual Studio 2008 beta

As I would like to have the whole source code in a single Visual Studio 2008 solution, we need to start with creating a blank Visual Studio 2008 solution (and add projects) as follows:

• Open Microsoft Visual Studio 2008 Beta 2.

• Go to File || New Project.

• In the “New Project” dialog box, select the “Blank Solution” template available in “Visual Studio Solutions” of “Other Project types” (as shown in Fig 1).

• Provide the name “SilverlightSampleWithWebService” and click OK to create the blank solution.

Once the blank solution is created, we need to proceed with the ASP.NET web service. The following are the steps you need to take to create the ASP.NET web service:

• Right click on “Solution Explorer,” click on “Add” and select “Add Project” (as shown in Fig 2).

• In the “New Project” dialog box, open “Visual Basic” project types and select “Web.” The respective templates for “Web” will be shown on the right side.

• Select the “ASP.NET Web Service Application” template.

• Fill in the “Name” as “NorthwindService.”

• Make sure that “.NET Framework 3.5” is selected at the top.

• Once everything looks like the following screen shot (Fig 3), click OK.

• Rename “Service1.asmx” to “ProductService.asmx.”

• Right click on “ProductService.asmx” and select “View Markup” (Fig 4).

• Modify the script so that it looks like the following:

<%@ WebService Language="VB" CodeBehind="ProductService.asmx.vb" Class="NorthwindService.ProductService" %>

• Go to Project || NorthwindService Properties (Fig 5).

• Within the project properties, select the “Web” tab, select “Use IIS Web Server” and click on “Create Virtual Directory” (as shown in Fig 6).

Creating an ASP.NET 3.5 Web Service using Visual Studio 2008 beta: source code

Once the project is created (as shown in the previous section), modify “ProductService.vb” to match the following:

Imports System.Web.Services

Imports System.Web.Services.Protocols

Imports System.ComponentModel

Imports System.Data.SqlClient

' To allow this Web Service to be called from script, using ASP.NET AJAX,
uncomment the following line.

<System.Web.Script.Services.ScriptService()> _

<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _

<System.Web.Services.WebServiceBinding
(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

<ToolboxItem(False)> _

Public Class ProductService

Inherits System.Web.Services.WebService

<WebMethod()> _

Public Function GetProductInfo(ByVal ProductID As Integer) As Product

Using cn As New SqlConnection(ConfigurationManager.ConnectionStrings
("cnNorthwind").ConnectionString)

Using cmd As New SqlCommand("SELECT ProductID, ProductName, UnitPrice,
UnitsInStock, UnitsOnOrder,(SELECT sum(UnitPrice * Quantity) FROM dbo.
[Order Details] WHERE ProductID = a.ProductID) as SaleValue FROM
dbo.Products as a WHERE ProductID=" & ProductID, cn)

cmd.Connection.Open()

Using rdr As SqlDataReader = cmd.ExecuteReader

If rdr.Read() Then

Return New Product With {.ProductID = rdr(rdr.GetOrdinal("ProductID")),
.ProductName = rdr(rdr.GetOrdinal("ProductName")) & "", .UnitPrice = rdr
(rdr.GetOrdinal("UnitPrice")) & "", .UnitsInStock = rdr(rdr.GetOrdinal
("UnitsInStock")) & "", .UnitsOnOrder = rdr(rdr.GetOrdinal
("UnitsOnOrder")) & "", .SaleTillToDate = rdr(rdr.GetOrdinal("SaleValue"))
& ""}

Else

Return Nothing

End If

End Using

cmd.Connection.Close()

End Using

End Using

End Function

End Class

Make sure that the following attribute is added to the class (otherwise the “Error invoking Service” may be raised):

<System.Web.Script.Services.ScriptService()>

Modify “Web.Config” to include the following:

<connectionStrings>

<add name="cnNorthwind" connectionString="Data Source=.sql2k5;initial
catalog=Northwind;user id=sa;password=eXpress2005"/>

</connectionStrings>

Add a new class named “Product.vb” to the web service project (right click on project and select “Add new Item”). Modify it to match the following:

Public Class Product

Private _ProductID As Integer

Private _ProductName As String

Private _UnitPrice As Double

Private _UnitsInStock As Integer

Private _UnitsOnOrder As Integer

Private _SaleTillToDate As Integer

Public Property ProductID() As Integer

Get

Return _ProductID

End Get

Set(ByVal value As Integer)

_ProductID = value

End Set

End Property

Public Property ProductName() As String

Get

Return _ProductName

End Get

Set(ByVal value As String)

_ProductName = value

End Set

End Property

Public Property UnitPrice() As Double

Get

Return _UnitPrice

End Get

Set(ByVal value As Double)

_UnitPrice = value

End Set

End Property

Public Property UnitsInStock() As Integer

Get

Return _UnitsInStock

End Get

Set(ByVal value As Integer)

_UnitsInStock = value

End Set

End Property

Public Property UnitsOnOrder() As Integer

Get

Return _UnitsOnOrder

End Get

Set(ByVal value As Integer)

_UnitsOnOrder = value

End Set

End Property

Public Property SaleTillToDate() As Integer

Get

Return _SaleTillToDate

End Get

Set(ByVal value As Integer)

_SaleTillToDate = value

End Set

End Property

End Class

Adding a Silverlight Project to the Visual Studio 2008 solution

Once the web service is created, it is time to add a Silverlight Project to the existing solution. The following are the steps you need to take to accomplish this task:

• Go to File || Add || New Project

• Select the “Silverlight Project” template available in the “Silverlight” project types of “Visual Basic” (as shown in Fig 7).

• Give it the name “SilverlightTest” and click on OK.

• Right click on “SilverlightTest” project (in “Solution Explorer”) and select “Set as Startup Project” (as shown in Fig 8).

Adding a Silverlight Project to Visual Studio 2008 solution: hosting in IIS

Once the Silverlight Project is created, it needs to be hosted on the same web server as the web service (previously created). To turn the Silverlight project folder into a virtual directory, go through the following steps:

• Using Windows Explorer, find the “SilverlightTest” folder of our Visual Studio 2008 project, right click on it and select “Properties” (Fig 09).

• Go to the “Security” tab and add “ASP.NET Machine Account” user and “Network Service” user (along with full privileges) as shown below (Fig 10).

• Go to the “Web Sharing” tab, select “Share this folder” and make sure that the options are selected as shown below (Fig 11). Click on OK twice to apply the folder settings.

• Open the IIS snap-in, open the “SilverlightTest” web site, right click on the same and select “Properties” (Fig 12).

• Within the web site properties, select the “ASP.NET” tab and change the ASP.NET version to “2.0.50727”

• Within the same properties window, select “Directory Security” and click on “Edit.”

• Make sure that “Enable anonymous access” is checked (Fig 13).

• Click OK twice to apply all the properties.

Consuming the ASP.NET Web Service from the Silverlight application using the Visual Studio 2008 solution

Once the web service and Silverlight projects are developed and configured as shown in previous sections, we need to link the Silverlight application with the ASP.NET web service, consume the service and present the consumed information on the Silverlight Canvas.

Go through the following steps to achieve the same:

• Right click on the “SilverlightTest” project (in “Solution Explorer”) and click on “Add Web Reference.”

• In the “Add Web Reference” dialog, click on “Web Services on the Local Machine.”

• In the list of services, select “ProductService” by clicking on it (Fig 14).

• Provide "NorthwindService" as the “Web reference name” and click on the “Add Reference” button (Fig 15).

• In the code behind, modify the code so that it looks like the following:

Partial Public Class Page

Inherits Canvas

Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)

' Required to initialize variables

InitializeComponent()

Dim svcNorthwind As New NorthwindService.ProductService

Dim objProject As NorthwindService.Product = svcNorthwind.GetProductInfo(2)

Dim txtProductName As New TextBlock

With txtProductName

.Text = "Total sale value of Product '" & objProject.ProductName & "' is " & objProject.SaleTillToDate

.Width = "437"

.Height = "25"

.SetValue(Canvas.LeftProperty, 8)

.SetValue(Canvas.TopProperty, 8)

End With

Me.Children.Add(txtProductName)

End Sub

End Class

Hit F5 to execute the application and point the URL to

http://localhost/SilverlightTest/TestPage.html

Pointing to the URL manually as above (in the browser) is essential as the request to the web service must be from the same web server as the Silverlight project. Otherwise, it may raise issues related to “cross domain access.”

Even though you are pointing manually to the localhost, the Silverlight project can still be debugged in the same traditional manner. The URL must be pointed to the browser window which came up when F5 is hit (otherwise, you will have to attach the process for debugging).

If everything went well, you should see the output as follows (Fig 16):

I hope you enjoyed the article and any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com