Silverlight 2 Grid : LINQ to SQL + WebService

Last 2 days went like some carnival, lots of mail exchanges and forums post..Silverlight 2 finally came out of shell after wait of last few painful months,but it was fun playing with those RC and Betas.

Silverlight Grid was till the day bit out of focus for me,rather overall Data binding part I was not touching, so I decided its good time now to start doing something good in this arena.

We don’t have DataSet ?, We are not able to get System.Data namespace, I am not good at WCF but I know asmx services, Is WCF is the only way for data binding?

So many questions from last couple of days..here is my answer in bits and pieces which I will be empowering with more post in coming days.

So lets get ready to Bind a simple DataGrid in Silverlight Project.[I assume you know all pre-requisites from Software point of view, if not explore more on http://silverlight.net/GetStarted/ ]

Open a new instance of Silverlight project, it will look like :

Note : With Silverlight 2 now you have “Silverlight.js” file for creating better installed experiences and other customizations.

Step 1 : Add LINQ to SQL

Right click on Web Project and say Add New Item, you will get following window where you need to select LINQ to SQL template and give some name to it.[e.g MyDatabse.dbml]

Now take on table from database,I took Cust from Northwind database.

Step 2 : Invoke WebService [ asmx one..and not WCF]

We need to add a WebService so as to pass data from LINQ to SQL to Silverlight Grid, one point to be taken note of is that,Silverlight rather data binding in Silverlight is now a days like other applications,more generic oriented and not dependent on old modals like DataSet etc, so all work will now managed by List<Type>.

Code will be like :

        [WebMethod]
        public List<Cust> DBConnect()
        {
            MyDatabaseDataContext db = new MyDatabaseDataContext(); //LINQ to SQL instance
            var temp = from cust in db.Custs
                            where cust.CustName.Length > 0
                            select cust;//LINQ Query
            return temp.ToList(); // Result in form of List<Type>
        }

Step 3 : Add Service Reference & Program the Silverlight Grid

Now your logic is ready which will send a List<Type> with data to your silverlight application, now put a Grid on canvas which will look like :

<data:DataGrid x:Name="MyGrid"
        GridLinesVisibility="Horizontal"
        HeadersVisibility="Column"
        RowBackground="AliceBlue"
        IsReadOnly="True"
        CanUserResizeColumns="False"
        Margin="0,5,0,0">
</data:DataGrid>

and write code to create proxy of that service in your code behind file here it is, Page.xaml.cs and code will be :

public partial class Page : UserControl
   {
       public Page()
       {
           InitializeComponent();
           this.Loaded += new RoutedEventHandler(Page_Loaded);
       }

       void Page_Loaded(object sender, RoutedEventArgs e)
       {
           MyService.DBConSoapClient svrc = new MyService.DBConSoapClient();
           svrc.DBConnectCompleted += new EventHandler<SLDBDemo.MyService.DBConnectCompletedEventArgs>(svrc_DBConnectCompleted);
           svrc.DBConnectAsync();           
       }

       void svrc_DBConnectCompleted(object sender, SLDBDemo.MyService.DBConnectCompletedEventArgs e)
       {
           MyGrid.ItemsSource = e.Result;
       }

}

I hope the code is very straightforward and self explanatory..So now save and just run it !! it will look like in Browser as :

So..our first Silverlight 2 Program is ready !! and that too its Data Binding Demo,so now get ready for more demos soon, will back here very soon with more. Thanks !

Vikram.