4. Drag a WebHierarchicalDataSource from the Visual Studio Toolbox onto the web page and set its ID property to CustomerOrderHierarchicalDataSource.

Size: px

Start display at page:

Download "4. Drag a WebHierarchicalDataSource from the Visual Studio Toolbox onto the web page and set its ID property to CustomerOrderHierarchicalDataSource."

Lorena Poole
6 years ago
Views:

1 ASP.NET Binding WebGrid to a WebHierarchicalDataSource Visual Basic C# Glossary Item Box Before You Begin WebGrid can be used to display a hierarchical data model. Hierarchical data can be offered by many sources such as Datasets, custom objects, xml files, ObjectDataSource, and SqlDataSource (just to name a few). The WebHierarchicalDataSource is a component that you can use to create and represent your hierarchical data model. What You Will Accomplish In this walkthrough you will learn how to bind WebGrid to a WebHierarchicalDataSource and display data in a Hierarchical view. You can use WebHierarchicalDataSource to combine multiple DataSource controls and link them together to form your hierarchy and enjoy the benefits of automatic Create, Read, Update, and Delete operations (if your data source controls support it). In this sample two ObjectDataSource controls are assigned as DataSources to the WebHierarchicalDataSource, which in turn is assigned as DataSource to the WebGrid. Follow These Steps 1. The WebHierarchicalDataSource uses the Aikido Framework that leverages the Microsoft ASP.NET 2.0 AJAX Extensions or ASP.NET 3.5, therefore you will need to drag and drop a ScriptManager onto the web page. For more information about Aikido controls, please see About Aikido Controls topic. 2. Drag an UltraWebGrid from the Visual Studio toolbox onto the Web page. 3. Drag two ObjectDataSource components from the Visual Studio toolbox onto the web page and set their ID properties to CustomerObjectDataSource and OrderObjectDataSource respectively. 4. Drag a WebHierarchicalDataSource from the Visual Studio Toolbox onto the web page and set its ID property to CustomerOrderHierarchicalDataSource. 5. Create three classes: Customer, Order and DataManager. The DataManager class uses both the Customer and Order class. 6. Write the following code in Customer class. In Visual Basic: Private _custid As Integer Private _firstname As String Private _lastname As String Public Sub New() Public Property CustomerId() As Integer Return _custid End Set(ByVal value As Integer) _custid = value Public Property FirstName() As String Return _firstname End _firstname = value Public Property LastName() As String Return _lastname End _lastname = value

2 Public Sub New(ByVal custid As Integer, ByVal firstname As String, ByVal lastname As String) _custid = custid _firstname = firstname _lastname = lastname Public Class CustomerCollection Inherits List(Of Customer) End Class In C#: private int _custid; private string _firstname; private string _lastname; public Customer() public int CustomerId get return _custid; set _custid = value; public string FirstName get return _firstname; set _firstname = value; public string LastName get return _lastname; set _lastname = value; public Customer(int custid, string firstname, string lastname) _custid = custid; _firstname = firstname; _lastname = lastname; public class CustomerCollection : List<Customer> 7. Write the following code in Order class. In Visual Basic: Private _orderid As Integer Private _customerid As Integer Private _shipcity As String Private _shipstate As String Public Sub New(ByVal orderid As Integer, ByVal customerid As Integer, ByVal city As String, ByVal state As String) _orderid = orderid _customerid = customerid _shipcity = city

3 _shipstate = state Public Property OrderId() As Integer Return _orderid End Set(ByVal value As Integer) _orderid = value Public Property CustomerId() As Integer Return _customerid End Set(ByVal value As Integer) _customerid = value Public Property ShipCity() As String Return _shipcity End _shipcity = value Public Property ShipState() As String Return _shipstate End _shipstate = value Public Class OrderCollection Inherits List(Of Order) End Class In C#: private int _orderid; private int _customerid; private string _shipcity; private string _shipstate; public Order(int orderid,int customerid,string city,string state) _orderid = orderid; _customerid = customerid; _shipcity = city; _shipstate = state; public int OrderId getreturn _orderid; set _orderid=value; public int CustomerId get return _customerid; set _customerid = value;

4 public string ShipCity get return _shipcity; set _shipcity = value; public string ShipState get return _shipstate; set _shipstate = value; public class OrderCollection : List<Order> 8. Write the following code in DataManger class. This class provides the Customers and Orders data. In Visual Basic: ''' <summary> ''' Method to get Customer details ''' </summary> ''' <returns>customercollection c</returns> Public Function Customers() As CustomerCollection Dim c As New CustomerCollection() c.add(new Customer(1, "Kim", "Su")) c.add(new Customer(2, "John", "Smith")) c.add(new Customer(3, "Frank", "Johns")) c.add(new Customer(4, "Tony", "Rio")) Return c End Function ''' <summary> ''' Method to get Order details ''' </summary> ''' <returns>ordercollection o</returns> Public Function Orders() As OrderCollection Dim o As New OrderCollection() o.add(new Order(101, 1, "New York", "New York")) o.add(new Order(102, 1, "Bolingbrook", "Chicago")) o.add(new Order(103, 2, "Lawrence", "St.Louis")) o.add(new Order(104, 3, "Edison", "New Jersey")) o.add(new Order(105, 4, "Newark", "New Jersey")) o.add(new Order(106, 2, "Miami", "Florida")) o.add(new Order(107, 2, "New Brunswick", "New Jersey")) o.add(new Order(108, 3, "Clevland", "Ohio")) Return o End Function Public Sub InsertOrder(ByVal o As Order) 'implementation code to insert order Public Sub UpdateOrder(ByVal o As Order) 'implementation code to update order Public Sub DeleteOrder(ByVal o As Order) 'implementation code to delete order In C#: /// <summary>

5 /// Method to get Customer details /// </summary> /// <returns>customercollection c</returns> public CustomerCollection Customers() CustomerCollection c = new CustomerCollection(); c.add(new Customer(1, "Kim", "Su")); c.add(new Customer(2, "John", "Smith")); c.add(new Customer(3, "Frank", "Johns")); c.add(new Customer(4, "Tony", "Rio")); return c; /// <summary> /// Method to get Order details /// </summary> /// <returns>ordercollection o</returns> public OrderCollection Orders() OrderCollection o = new OrderCollection(); o.add(new Order(101, 1, "New York", "New York")); o.add(new Order(102, 1, "Bolingbrook", "Chicago")); o.add(new Order(103, 2, "Lawrence", "St.Louis")); o.add(new Order(104, 3, "Edison", "New Jersey")); o.add(new Order(105, 4, "Newark", "New Jersey")); o.add(new Order(106, 2, "Miami", "Florida")); o.add(new Order(107, 2, "New Brunswick", "New Jersey")); o.add(new Order(108, 3, "Clevland", "Ohio")); return o; public void InsertOrder(Order o) //implementation code to insert order public void UpdateOrder(Order o) //implementation code to update order public void DeleteOrder(Order o) //implementation code to delete order 9. The Customers method provides data to the CustomerObjectDataSource component and Orders method provides data to the OrderObjectDataSource component. In the properties window for CustomerObjectDataSource, set the SelectMethod to Customers. Similarly set the SelectMethod to Orders for OrderObjectDataSource. 10. Click the CustomerObjectDataSource component and click its smart tag to display the context menu. a.click Configure Data Source. b. In the Choose a Business Object dialog window, select the DataManager object that we have created in step 5, from the drop-down list. c. Click Next. d. Choose the Customers method from the drop-down list and click finish. 11. Similarly for OrderObjectDataSource component follow the same steps specified in step 10. Make sure you choose the Orders method while choosing the Data methods in the Define Data Methods dialog window. By now both the ObjectDataSource components have been configured to a data source object. 12. The ObjectDataSource components need to be assigned to WebHierarchicalDataSource. For this purpose, click the WebHierarchicalDataSource s smart tag and select Edit Relations The Quick Design appears. To learn more about this Quick Design, see ting Started with WebHierarchicalDatasource topic. 13. Click the Add View option.

6 14. At this time, you have two ObjectDataSources readily available on your page, and these data sources will appear in the drop-down list. Select CustomerObjectDataSource from the drop-down list that appears and click OK. 15. Click the Add Child node directly under the CustomerObjectDataSource node. The child configuration screen appears. Select OrderObjectDataSource from the drop-down list that appears. 16. Add the relation between the two data sources by selecting the columns for the relationship. Select CustomerId from Parent Columns drop-down list. Select CustomerId from Child Columns drop-down list. 17. Click Ok to return to the Quick Design view. 18. At this point, WebHierarchicalDataSource is ready to use two Object data sources to display hierarchical data. Click Apply then Ok. 19. In the properties window for UltraWebGrid1, set the DataSourceId to the id of WebHierarchicalDataSource. 20. Run the application. WebGrid displays a hierarchical view of the Customers data with its associated Orders data. Voila!

Programming with ADO.NET

Programming with ADO.NET The Data Cycle The overall task of working with data in an application can be broken down into several top-level processes. For example, before you display data to a user on a