Thursday, October 16, 2008

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 :

SoultionExplorer

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]

LINQTOSQL

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

DBML

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>.

WebASMX

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 :

OutPut

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.

4 comments:

Ka Chuen said...

I got exception throw out on svrc.xxxAsync();
xxx = my service method
I have no idea what goes wrong!

Vikram Pendse said...

Hi ka cheun,

Should not be a problem, working very well, I even tried out it using crossdomain [Hosted service on other domain], check out if there any issue with the service.

jeff_tj said...

I don't see System.Web nor System.Web.Services under the Page.Xaml.cs project and when I tried to add it to references I received

---------------------------
Microsoft Visual Studio
---------------------------
You can't add a reference to System.Web.dll as it was not built against the Silverlight runtime. Silverlight projects will only work with Silverlight assemblies.
---------------------------
OK
---------------------------

However I do see it under the Project_Silverlight.Web project portion.

Vikram Pendse said...

Hi Jeff_tj,

Yes, you need to set reference of that service from Silverlight Project so as to consume it and need to create proxy of the same, then you will have access to corresponding WebMethods which you have written, same applies for all services let it be ASMX or WCF or even Silverlight-Enable WCF service. Let me know if its not working for you.