Database connectivity using silverlight

Silverlight is a new cross-browser, cross-platform implementation of the .NET Framework for building and delivering the next generation of media experiences and Rich Interactive Applications(RIA) for the web. It runs in all popular browsers, including Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Opera. The plugin required to run Silverlight is very small in size hence gets installed very quickly.

It is combination of different technolgoies into a single development platform that allows you to select tools and the programming language you want to use. Silverlight integrates seamlessly with your existing Javascript and ASP.NET AJAX code to complement functionality which you have already created.

Silverlight aims to compete with Adobe Flash and the presentation components of Ajax. It also competes with Sun Microsystems’ JavaFX, which was launched a few days after Silverlight.

In this article I m going to discuss how to do database connectivity and show data in DataGrid using Silverlight Enables Web Service.

As you all know just create a new project using Silverlight Application.

image1

Figure 1.

And by default “Add a new Web to the solution for hosting the control” radio button is checked. And click OK.

image2

Figure 2.

Add a new LINQ to SQL class in App_Code folder.

image3

Figure 3.

And using server explorer drag and drop your table in DataClass. And you will see like this.

image4

Figure 4.

Now add a new Silverlight-enabled WCF Service in Web Project.

image5

Figure 5.

Now let’s write some code on Service.cs. I am wriring all code here

using System;
using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.Collections.Generic;

using System.Text;

[ServiceContract(Namespace = “”)]

[AspNetCompatibilityRequirements(RequirementsMode =AspNetCompatibilityRequirementsMode.Allowed)]

public class Service

{

[OperationContract]

public List<Vendor> GetVendors()

{

DataClassesDataContext db = new DataClassesDataContext();

var mVendors = from vendor in db.Vendors

select vendor;

return mVendors.ToList();

}

}

I am fetching all data from my Vendor table. You can put your condition according to your requirment.

NOTE – I am putting my database file in APP_Data folder. If you want use my Vendot data.

Now add service reference in References folder.

image6

Figure 6.

Now let’s drag and drop DataGrid on Page.xaml, and bind data using DisplayMemberBinding property.

<UserControl xmlns:my=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data” x:Class=”DatabaseConnectivity.Page”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

Width=”800″ Height=”300″ Loaded=”UserControl_Loaded”>

<Grid x:Name=”LayoutRoot” Background=”White” ShowGridLines=”True”>

<Grid.RowDefinitions>

<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”*” />

</Grid.ColumnDefinitions>

<my:DataGrid x:Name=”VendorDataGrid” AlternatingRowBackground=”Beige”

AutoGenerateColumns=”False”

Width=”800″ Height=”300″

Grid.Row=”1″ Grid.Column=”1″

CanUserResizeColumns=”True”>

<my:DataGrid.Columns>

<my:DataGridTextColumn Header=”VendorId” Width=”50″  DisplayMemberBinding=”{BindingVendorId}” FontSize=”11″ />

<my:DataGridTextColumn Header=”First Name” Width=”120″  DisplayMemberBinding=”{BindingVendorFName}” FontSize=”11″ />

<my:DataGridTextColumn Header=”Last Name” Width=”120″ DisplayMemberBinding=”{BindingVendorLName}” FontSize=”11″ />

<my:DataGridTextColumn Header=”City” Width=”120″ DisplayMemberBinding=”{BindingVendorCity}” FontSize=”11″ />

<my:DataGridTextColumn Header=”State” Width=”120″ DisplayMemberBinding=”{BindingVendorState}” FontSize=”11″ />

<my:DataGridTextColumn Header=”Country” Width=”120″ DisplayMemberBinding=”{BindingVendorCountry}” FontSize=”11″ />

<my:DataGridTextColumn Header=”Join Date” Width=”120″ DisplayMemberBinding=”{BindingPostedDate}” FontSize=”11″ />

</my:DataGrid.Columns>

</my:DataGrid>

</Grid>

</UserControl>
And this code on Page.xaml.cs

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{

ServiceReference1.ServiceClient webService = new ServiceReference1.ServiceClient();

webService.GetVendorsCompleted += newEventHandler<DatabaseConnectivity.ServiceReference1.GetVendorsCompletedEventArgs>(webService_GetVendorsCompleted);

webService.GetVendorsAsync();

}

void webService_GetVendorsCompleted(Object sender, ServiceReference1.GetVendorsCompletedEventArgs e)

{

VendorDataGrid.ItemsSource = e.Result;

}

Now debug your project and you will get this error message.

image7

Figure 7.

For remove this error message you need to go in propery of Web Project and Do “Use Dyanamic Ports = False”.

image8

Figure 8.

And now set Web Project as startup project and TestPage as set as start page. And debug now. Result will look like this.

image9

Figure 9.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s