Howto: Get, Update, Delete in Silverlight DataGrid using WCF Service
If you want to know the features of Silverlight 3 datagrid and how to setup datagrid control in Silverlight application, here is my previous link.
Here I will walk through
Here is my previous link that walks you through how you can do that.
2) Get, Update and Delete in Silverlight DataGrid using WCF Service
There is no System.Data namespace available in Silverlight application so you can’t connect to ADO.NET enabled database to get the data and bind directly to Silverlight DataGrid. Since we are missing System.Data namespace, DataSet / DataTable that mainly used by developer to bind data also NOT available.
But there are three different approach available to bind data centric application in Silverlight now. Here is the link that explains those three diiferent approach. Here I will create WCF Service one of three approach available.
This WCF Service will be main communication point from Silverlight Application. To update/get data from database, we will LINQ to SQL class. To know more about LINQ to SQL, you can refer MSDN article
Adding LINQ to SQL Class
To add LINQ to SQL Class file, right click on silverlight web project and add new item and choose LINQ to SQL Classes template.
Once you click on Add it will open DataClasses.dbml (object relational designer) file. Now click on “Server Explorer” link. It will open “Server Explorer” window where you can establish your sql server database connection. For our sample application, I have created pub database and within that database I have created Members table. To create a supported database and table, I have included SQL Script in the source so run the sql script before moving forward because we need to have those database and table created while working with LINQ to SQL class.
Now establish the pub database connection from “Server Explorer” window. Now drag and drop Members table to DataClasses.dbml file.
It will generate Members LINQ Class corresponding to Members table we have in pub database. By default this class in not serializable and we will pass list of members object to silverlight application through WCF Service, so we need that class to be serializable. To do that, click on empty area on DataClasses.dbml file and right click -> properties, it will open property window for entire class. You will see serialization mode property and change it to Unidirectional.
Adding WCF Service
To add WCF Service, right click on Silverlight web project and click on Add New Item and choose WCF Service template.
It will create IDataService.cs service contract and DataService.svc WCF Service file. If you are not familiar with WCF Service, you can find out more about WCF .
Now open IDataService.cs file. There will be dummy contract “DoWork()” created in service contract file. Replace that DoWork() contract with the contract method “GetMembers” that we need to get the list of members object and also change the return type void to List<Member>. When you try to change return type, you will see Member class in intellisense window that’s LINQ to SQL Class created and associated to Members table in pub database.
So we changed the service contract “DoWork()” to “GetMembers()”. Now open DataService.svc.cs file. You will see that DataService class in that file implements IDataService service contract that we just modified. Since we have modified dummy contract to the actual contract that we need, remove DoWork method from DataService.svc.cs file. We need to implement the “GetMembers()” service contract here. To do that, click on interface class IDataService name, you will the smart tag poped up so click on “Implement interface IDataService” it will create implementation of “GetMembers()” for you.(Easy to do that ah…. smart way… right?? I like that smart tag because I hate to type ) Now put the actual code in that method to get list of members using DataClassContext.
So we got GetMembers method ready to use. Now can you create UpdateMember method the same way we created GetMembers method?? It’s very straight forward.
DataService.svc.cs (updated on April 7, 2010 to fix bug in UpdateMember method)
So we have now ready GetMembers and UpdateMembers method to use. Only one thing is left to change for WCF service is that HttpBinding in web.config. WCF uses wsHttpBinding by default and since Silverlight only supports basic httpbinding so change we need to change binding in web.config.
Now build the solution to make sure all above steps went well.
Adding Reference in Silverlight Class Project
Right click on Silverlight Class library -> Add Service Reference. It will open Add Service Reference window now click on Discover button it will search for WCF Service within a solution and will list the service we created so far.
Click on the service that found and expand that tree you will see the GetMembers and UpdateMember operation in right box. Click Ok to add reference of those operations in Silverlight class library project.
Now it’s time to call those service operation (GetMembers and UpdateMember) from silverlight code behind file. To do so, open MainPage.xaml.cs file. Please make sure you have installed Silverlight 3.0 tools for Visual Studio 2008 SP1 the reason why I am saying that you will have BeginningEdit and RowEditEnded event in Silverlight 3.0. You won’t find RowEditEnded that is very useful event but was missing in Silverlight 2.0.
Now wire up BeginningEdit and RowEditEnded event of Silverlight datagrid in Code behind class constructor.
So now we have BeginningEdit and RowEditEnded event is ready to use.
Binding data to datagrid
Now let’s first bind the Silverlight datagrid. Since Silverlight application is running in browser, only way to call web service is asynchronously. To do so, first create a web service client object and then wire up GetMembersCompleted event that will be called when asynchronous GetMembers webservice call will be completed.
Now hit F5 to run the application and see what you got so far. You will see the data from Members table of pub database bound to datagrid. Here is the result
Updating row in Silverlight DataGrid
Now let’s add logic in dgSilverlight_RowEditEnded method that wrapped up dgSilverligh.RowEditEnded event to handle update logic. When you click on any column of datagrid, it will turn into editable textbox so you can modify the value. Once you change focus out of that row (yes out of the row not just column), dgSilverlight_RowEditEnded method will be fired and you can retrieve updated row value using e.Row.DataContext and cast it to Member LINQ to SQL Class. Then you can call UpdateMember service call asynchronously passing updated Member object.
Here it is how you can code that.
Here I will walk through
- how you can get data from SQL Server database and bind it to Silverlight Datagrid
- how you can update, delete records in Silverlight 3 DataGrid using WCF Service
Here is my previous link that walks you through how you can do that.
2) Get, Update and Delete in Silverlight DataGrid using WCF Service
There is no System.Data namespace available in Silverlight application so you can’t connect to ADO.NET enabled database to get the data and bind directly to Silverlight DataGrid. Since we are missing System.Data namespace, DataSet / DataTable that mainly used by developer to bind data also NOT available.
But there are three different approach available to bind data centric application in Silverlight now. Here is the link that explains those three diiferent approach. Here I will create WCF Service one of three approach available.
This WCF Service will be main communication point from Silverlight Application. To update/get data from database, we will LINQ to SQL class. To know more about LINQ to SQL, you can refer MSDN article
Adding LINQ to SQL Class
To add LINQ to SQL Class file, right click on silverlight web project and add new item and choose LINQ to SQL Classes template.
Once you click on Add it will open DataClasses.dbml (object relational designer) file. Now click on “Server Explorer” link. It will open “Server Explorer” window where you can establish your sql server database connection. For our sample application, I have created pub database and within that database I have created Members table. To create a supported database and table, I have included SQL Script in the source so run the sql script before moving forward because we need to have those database and table created while working with LINQ to SQL class.
Now establish the pub database connection from “Server Explorer” window. Now drag and drop Members table to DataClasses.dbml file.
It will generate Members LINQ Class corresponding to Members table we have in pub database. By default this class in not serializable and we will pass list of members object to silverlight application through WCF Service, so we need that class to be serializable. To do that, click on empty area on DataClasses.dbml file and right click -> properties, it will open property window for entire class. You will see serialization mode property and change it to Unidirectional.
Adding WCF Service
To add WCF Service, right click on Silverlight web project and click on Add New Item and choose WCF Service template.
It will create IDataService.cs service contract and DataService.svc WCF Service file. If you are not familiar with WCF Service, you can find out more about WCF .
Now open IDataService.cs file. There will be dummy contract “DoWork()” created in service contract file. Replace that DoWork() contract with the contract method “GetMembers” that we need to get the list of members object and also change the return type void to List<Member>. When you try to change return type, you will see Member class in intellisense window that’s LINQ to SQL Class created and associated to Members table in pub database.
So we changed the service contract “DoWork()” to “GetMembers()”. Now open DataService.svc.cs file. You will see that DataService class in that file implements IDataService service contract that we just modified. Since we have modified dummy contract to the actual contract that we need, remove DoWork method from DataService.svc.cs file. We need to implement the “GetMembers()” service contract here. To do that, click on interface class IDataService name, you will the smart tag poped up so click on “Implement interface IDataService” it will create implementation of “GetMembers()” for you.(Easy to do that ah…. smart way… right?? I like that smart tag because I hate to type ) Now put the actual code in that method to get list of members using DataClassContext.
So we got GetMembers method ready to use. Now can you create UpdateMember method the same way we created GetMembers method?? It’s very straight forward.
DataService.svc.cs (updated on April 7, 2010 to fix bug in UpdateMember method)
So we have now ready GetMembers and UpdateMembers method to use. Only one thing is left to change for WCF service is that HttpBinding in web.config. WCF uses wsHttpBinding by default and since Silverlight only supports basic httpbinding so change we need to change binding in web.config.
Now build the solution to make sure all above steps went well.
Adding Reference in Silverlight Class Project
Right click on Silverlight Class library -> Add Service Reference. It will open Add Service Reference window now click on Discover button it will search for WCF Service within a solution and will list the service we created so far.
Click on the service that found and expand that tree you will see the GetMembers and UpdateMember operation in right box. Click Ok to add reference of those operations in Silverlight class library project.
Now it’s time to call those service operation (GetMembers and UpdateMember) from silverlight code behind file. To do so, open MainPage.xaml.cs file. Please make sure you have installed Silverlight 3.0 tools for Visual Studio 2008 SP1 the reason why I am saying that you will have BeginningEdit and RowEditEnded event in Silverlight 3.0. You won’t find RowEditEnded that is very useful event but was missing in Silverlight 2.0.
Now wire up BeginningEdit and RowEditEnded event of Silverlight datagrid in Code behind class constructor.
So now we have BeginningEdit and RowEditEnded event is ready to use.
Binding data to datagrid
Now let’s first bind the Silverlight datagrid. Since Silverlight application is running in browser, only way to call web service is asynchronously. To do so, first create a web service client object and then wire up GetMembersCompleted event that will be called when asynchronous GetMembers webservice call will be completed.
Now hit F5 to run the application and see what you got so far. You will see the data from Members table of pub database bound to datagrid. Here is the result
Updating row in Silverlight DataGrid
Now let’s add logic in dgSilverlight_RowEditEnded method that wrapped up dgSilverligh.RowEditEnded event to handle update logic. When you click on any column of datagrid, it will turn into editable textbox so you can modify the value. Once you change focus out of that row (yes out of the row not just column), dgSilverlight_RowEditEnded method will be fired and you can retrieve updated row value using e.Row.DataContext and cast it to Member LINQ to SQL Class. Then you can call UpdateMember service call asynchronously passing updated Member object.
Here it is how you can code that.
No comments:
Post a Comment