The Blog of Milos

This space is available to any ComponentArt employee to write about anything.

Browse by Tags

0
Comments
1103 Views

Web Service Data Loading with Navigation Controls

Previously, I have written about Grid’s new WebService running mode, which allows Grid to communicate with an ASP.NET AJAX web service directly from the client, and do all its data loading through it, including paging, sorting, filtering, etc. This powerful functionality is also available on ComponentArt navigation controls: TreeView, Menu, NavBar, TabStrip and ToolBar. All of these have the ability to load their data from an ASP.NET AJAX web service. TreeView, furthermore, has the ability to load data for each node on demand. Since this functionality is a superset of the simple ability to fetch all the data at once, I’ll outline the more complex case here. - On the server, we use the WebService and WebServiceMethod properties to set the name of the registered web service to use, as well as the name of the method to invoke to retrieve node data. - The service WebMethod refered to by the control’s WebServiceMethod property should be implemented with the following signature: public TreeViewWebServiceResponse MethodName(TreeViewWebServiceRequest request) The above example is for TreeView – for other controls, the appropriate types should be used, eg. TabStripWebServiceResponse and TabStripWebServiceRequest for TabStrip. - The method’s return value (a *WebServiceResponse) should contain the nodes to be sent to the control. At this point, the work of defining a web service data source for a navigation control is complete. With the above setup, the control will fetch its data from the specified web service by invoking the specified method. With TreeView, we often wish to configure data loading using an on-demand mechanism. This means that a node’s children are loaded only when that node is expanded and no sooner. To achieve this, we only need one additional step: - Instead of populating a TreeViewNode with its child nodes, set its UseWebService property to true to specify that the web service should be used to fetch its child nodes. When this is done, the same WebServiceMethod will be invoked as for the root nodes, but the TreeViewWebServiceRequest’s Node property will be set to the TreeViewNode which needs to be populated. That’s all there is to it. Note: All the navigation controls also have a WebServiceCustomParameter which can be set on the server or the client, and which is sent back as part of every *WebServiceRequest. This should allow for custom context-dependant data loading. For a simple demo of this functionality, check out the Web Service Creation sample on our site. For a look at web service-driven TreeView load-on-demand, take a look at this TreeView sample . A useful real-world application using TreeView and Grid, build entirely on web services, can be seen in the Full Web Service Application sample. Share this post: email it! | bookmark it! | digg it! | reddit!

Posted by: Milos
Posted: Tuesday, December 18, 2007 8:18 AM
Filed under: ASP.NET AJAX, Web Service, Web.UI, navigation, treeview
0 Comments

8
Comments
2431 Views

New Grid Feature: WebService Running Mode

Version 2007.2 of ComponentArt Grid includes, among other goodies, an exciting new feature: WebService running mode. We think it should be very useful for a lot of people so, in this post, I want to introduce you to this feature and explain how it works. What is it? Those who have used Grid will be familiar with the notion of a “running mode”. Until this point, Grid could be used in three different modes: Server, Callback and Client. Setting the RunningMode property to one of these determines whether Grid performs its data-related actions (paging, sorting, filtering, etc) via postbacks, callbacks, or entirely on the client. The most efficient way of interfacing with large data sets was always the callback mode, but it had one downside: callbacks were made to the same ASPX page which houses the control, so each callback incurred the overhead of the ASP.NET page life cycle and auxiliary init code. The new WebService running mode allows Grid to perform data operations via calls to an ASP.NET AJAX web service. We feel that this system provides maximal efficiency and design elegance by allowing us to completely separate our data access code from the ASP.NET page which houses the layout. How do I use it? To use web service running mode, start by setting Grid’s RunningMode property to WebService. Then, set the WebService property to the name of the ASP.NET AJAX web service to use. You will also need to set the names of that service’s WebMethods to use for fetching items, or updating and inserting them. For this, use the WebService*Method properties (eg. WebServiceSelectMethod). The web service should be registered with the ScriptManager in the usual way, and the specified methods should have standard signatures: GridWebServiceSelectResponse SelectMethod(GridWebServiceSelectRequest req) bool UpdateMethod (GridWebServiceUpdateRequest req) bool InsertMethod(GridWebServiceInsertRequest req) Selection Most of the usual interaction with a Grid will be done through the select method, whose logic will handle all paging, sorting and filtering. Whenever a new set of records is required on the client this method will be invoked with all the necessary information to fetch the appropriate records. The GridWebServiceSelectRequest will contain the required page index, page size, sort order and any conditional filters. The response should contain all the necessary records (objects with appropriately named properties), and information about the total number of records, for purposes of paging. Here’s an example of a simple select method which handles paging and sorting: [WebMethod] public GridWebServiceSelectResponse GetRecords(GridWebServiceSelectRequest request) { DataSet oDS = FetchAllData(); // implemented elsewhere, returns all records DataView oView = oDS.Tables[0].DefaultView; if(request.SortField != "") oView.Sort = request.SortField + " " + request.SortOrder; List list = new List(); int pageSize = request.PageSize; int startRec = request.CurrentPageIndex * pageSize; for (int i = startRec; i < Math.Min(startRec + pageSize, oView.Count); i++) { Message msg = new Message(); msg.Subject = (string)oView[i]["Subject"]; msg.LastPostDate = (DateTime)oView[i]["LastPostDate"]; msg.TotalViews = (int)oView[i]["TotalViews"]; msg.StartedBy = (string)oView[i]["StartedBy"]; list.Add(msg); } GridWebServiceSelectResponse response = new GridWebServiceSelectResponse(); response.Items = list; response.RecordCount = oView.Count; return response; } Inserting and Updating Updating records and inserting new ones is done in very much the same way as selection. However, since these actions only affect one record, the request is a lot simpler and basically contains only the data for the item in question. The relevant classes are GridWebServiceInsertRequest and GridWebServiceUpdateRequest. We hope this mechanism will allow for totally UI-independent data handling that communicates with the client-side Grid in the most efficient possible way. Because Grid is able to redraw itself on the client, there is no need to ever go back to the original ASP.NET page after it has launched the Grid. Developing this approach should be the way forward in taking client-centric web apps to the next level. Let us know what you think! Share this post: email it! | bookmark it! | digg it! | reddit!

Posted by: Milos
Posted: Wednesday, November 14, 2007 8:30 AM
Filed under: Web Service, Grid, Web.UI, AJAX
8 Comments

10
Comments
6408 Views

New Grid Feature: Client-side Binding to Web Service

Now that we got 2007.1 out the door, we can finally take some time to reflect on what we’ve done, and talk to you guys and gals out there about what’s new and notable in the release. It certainly feels good to be writing in a natural language for a change. Since one blog post would hardly suffice for discussing all the new controls and cool new features, for now I’ll focus on only one particular new feature that I think a lot of you will be excited about: client-side binding to JSON objects with Grid. One of the great features of ASP.NET AJAX is its ability to expose web services and their WebMethods to client-side code quickly and easily. Return values from WebMethods are automatically serialized to JSON and returned as such on the client. Since ComponentArt controls are fully functional on the client, there is nothing stopping them from being able to load data returned from such web service calls right on the client. Being able to programmatically populate our controls on the client is nothing new, but now, for the first time, there is a way to bind a control to a JSON data set on the client with a single line of code. This is what Grid’s new client-side load method is for. There is a sample in our new demo package which showcases this functionality ( here ) but I will explain the key points. First of all, we need a web service, with a WebMethod which will return a data set. This particular example uses a simple service we wrote called MessageService, which has a method called GetRecords that returns a List of Message objects. This list is populated by querying a table of forum posts and instantiating a rudimentary Message object for each one. After the list is built in the GetRecords method, it is simply returned. Next, we expose this web service to the client using the ASP.NET AJAX ScriptManager: <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference path="MessageService.asmx" /> </Services> </asp:ScriptManager> At this point, we can call our GetRecords method with a single line of JS: MessageService.GetRecords(OnSucceeded); The parameter we pass in is the handle of a client-side method to call when the method returns its result: function OnSucceeded(result) { Grid1.load(result); Grid1.render(); } The call to Grid’s load method with the returned JSON data set is all that is needed to bind the Grid with the new data on the client. The call to render then simply redraws the Grid. I know, that’s pretty cool, right? Note that in order for the Grid to know which properties of those JSON objects to load for the various columns, its column DataField definitions must match the property names of the objects, in this case the Message object. Note also that such objects need not necessarily be loaded from a web service. Any array of client-side objects can be loaded using the load method. Hopefully we’ll get a chance to implement similar functionality for some other controls fairly soon, like TreeView, ComboBox, Menu, and others. Bye for now! Share this post: email it! | bookmark it! | digg it! | reddit!