The Blog of Milos : April 2008

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

April 2008 - Posts

4
Comments
1041 Views

TreeView and Web Services

In my previous post , I talked about the web service functionality that's common to all ComponentArt navigation controls. I focused on common features that are present in many different controls, especially in this case, but this approach was unfair to one control. With its ability to load chunks of data on demand, TreeView is the odd man out, supporting everything that other navigation controls do, but adding its own unique twist. Like the other navigation controls, TreeView has control-level WebService and WebServiceMethod properties. These determine which ASP.NET AJAX registered web service will be called, and which method of that service, when nodes are retrieved. For the initial data load, the behaviour is identical to Menu, TabStrip or NavBar. What TreeView can do that others can not is to only load some nodes initially, letting user actions determine what else gets loaded and when. Essentially, TreeView is able to operate in load-on-demand mode with web services. To return load-on-demand nodes (parent nodes with no child nodes pre-loaded), simply set their UseWebService property to true. This will notify TreeView to consider these nodes to be parent nodes, and to call the web service again when they are expanded, to load their child nodes. When that happens, the same WebServiceMethod will be called, but with a twist: the TreeViewWebServiceRequest object that is passed in will have its Node property set to the node that requires data. Based on the Text, Value or ID of this node, appropriate new nodes can be created and returned, as they would normally, from the web service method. Note that these child nodes can also have their UseWebService property set to true. After a web service call completes, the client-side event also exposes the node for which the call was made, in addition to the customData property common to all navigation controls. Here's an overview of the client-side TreeViewNodeWebServiceCompleteEventArgs class: function TreeView1_webServiceComplete(sender, eventArgs) { var node = eventArgs.get_node(); if(node) { alert('Completed web service call for node ' + node.get_text()); } else { alert('Completed web service call for top level data.'); } var customData = eventArgs.get_customData(); if(customData) { alert('Web service call returned custom data: ' + customData); } } You can see an example of this functionality online with the TreeView Web Service Load-on-demand sample . Please note that this functionality is fully available only as of Web.UI 2008.1 SP1, released on April 23rd 2008. Summary To recap, since TreeView can load node-specific partial data through web services (unlike other navigation controls, which can only load all the items at once), its related API is a superset of, say, that of Menu. TreeViewWebServiceRequest includes the Node property (null for initial, top-level loading), TreeViewNode has the UseWebService boolean, and the client-side TreeViewWebServiceCompleteEventArgs class includes a node property. These extensions enable efficient load-on-demand functionality built entirely on ASP.NET AJAX web services. Share this post: email it! | bookmark it! | digg it! | reddit!

Posted by: Milos
Posted: Wednesday, April 23, 2008 10:49 AM
Filed under: Web.UI, treeview, web services, Load on demand
4 Comments

4
Comments
1551 Views

Web.UI Navigation Controls and Web Services

It's been some time now since we first started introducing client-side integration with ASP.NET AJAX web services into our controls. The first foray was the ability of Grid to bind directly to JavaScript object arrays, allowing it to directly load JSON data returned from a web service, and continue running in client mode ( see demo ). The interest that this generated prompted the next big wave: Grid’s WebService running mode ( see demo ) and web service functionality in all the major navigation controls: TreeView, Menu, TabStrip, NavBar and ToolBar ( see demo ). In the latest iteration of Web.UI (2008.1) we standardized client-side events relating to web service calls across this group of controls, and added the ability to pass custom data to and from the web services. Each *WebServiceRequest and *WebServiceResponse class now has a CustomParameter property. In this blog post, I want to illustrate how this custom data can be bounced around using standard client-side and server-side properties and client events. Take as an example a Menu control, pointed at an ASP.NET Web Service: <ComponentArt:Menu runat="server" ID="Menu1" WebService="MyService" WebServiceMethod="GetItems" WebServiceCustomParameter="Blue" ... /> In the above example, we are telling Menu to call the WebMethod GetItems of the service MyService , and to set the initial value of its WebServiceCustomParameter to "Blue". When the Menu loads on the client, it will do just that. Let’s see how we can access the custom parameter in the web service: [System.Web.Script.Services.ScriptService] [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class MyService : System.Web.Services.WebService { [WebMethod] public MenuWebServiceResponse GetItems(MenuWebServiceRequest request) { // Create a response object. MenuWebServiceResponse response = new MenuWebServiceResponse(); // For this example, we will only return one item, // with the Text matching the custom parameter given to us. MenuItem newItem = new MenuItem(); newItem.Text = request.CustomParameter; response.AddItem(newItem); // We will also return some custom data from the server. // Let’s make it the current time. response.CustomParameter = DateTime.Now.ToString(); // Send the data back. return response; } } When this Menu loads on the client, it will load up the web service data, which will result in a single menu item entitled "Blue". We can always re-load data from the client by calling Menu’s client-side loadFromWebService method. We can also change the WebServiceCustomParameter on the client before doing so. For example, the following JavaScript would result in the Menu reloading its data and ending up with a single item entitled "Red": Menu1.set_webServiceCustomParameter('Red'); Menu1.loadFromWebService(); This mechanism should enable unlimited reloading of data for any navigation control based on custom data passed from the client. One last thing remains to be answered: how do we access that custom data (the server time) we sent back to the client from the web service? This is where client events come in. If we want access to this custom data, we’ll have to hook the WebServiceComplete client event: <ComponentArt:Menu runat="server" ID="Menu1" ... > <ClientEvents> <WebServiceComplete EventHandler="Menu1_WebServiceComplete" /> </ClientEvents> </ComponentArt:Menu> In the event handler, we can access the custom data through the event arguments parameter: function Menu1_WebServiceComplete(sender, eventArgs) { alert('Loaded items from web service, along with this custom data: ' + eventArgs.get_customData()); } I hope that explains this exciting new functionality and that you find it as neat and useful as we do. Do let us know what you think and how we can build on this in the future. Share this post: email it! | bookmark it! | digg it! | reddit!