Video: Get Started with OLAP for ASP.NET MVC

The ComponentOne OLAP control is available in ASP.NET MVC, WinForms, and WPF. In this video, we'll walk you through setting up OLAP for ASP.NET MVC.

  1. Create a new ASP.NET MVC5 app using C1 ASP.NET 5 MVC Web Application template.
  2. In the project wizard, check "Include C1 MVC Olap library".
  3. Click OK.
  4. This creates the project.
  5. Rebuild the project.
  6. Let’s examine what the template has pre-configured for us.
  7. It has added the MVC and OLAP dll reference.
  8. The resources are also configured in the _Layout.cshtml:
  9. It has the styles and script registered.
  10. The Views web.config file has the MVC and OLAP controls namespace added. This help with intellisense.
  11. The License.licx file has the license entries for MVC and OLAP controls.
  12. The project is ready to use any MVC or OLAP control.
  13. Let’s add a Model class.
  14. Right click the Models folder and select Add->Class from the context menu.
  15. Name the class ProductData.
  16. In this example, we create "ProductData" class that has country wise Sales data for the product.
  17. And a function to generate data called GetData.
  18. Close this class file.
  19. Open the HomeController class from the Controllers folder.
  20. Import the Models namespace.
  21. Declare a model variable that holds data returned by the GetData method of ProductData model.
  22. Pass the model to the view.
  23. Save & close the HomeController.
  24. Open the Index.cshtml from Views/Home folder.
  25. Remove the pre-existing content from this view file.
  26. Declare a model variable for the ProductData.
  27. Create Div elements with row class using bootstrap grid system.
  28. Add a pivot panel control with Id as panel and binding set to the Model.
  29. This internally creates a PivotEngine.
  30. Inside another div element add a PivotGrid.
  31. Set its ItemSourceId property as PivotPanel by passing the ID of PivotPanel.
  32. Save and run the app.
  33. When the page is loaded, observe that we have a PivotPanel with all fields returned by the Model and empty Filter/Columns/Rows/Values. Also, we have empty PivotGrid.
  34. Let’s analyze the country wise sales data.
  35. Drag Country field to Rows, the Product field to Columns, and the Sales field to Values.
  36. We find the PivotGrid is now populated with for all products showing sales data country wise and their respective totals.
  37. We can customize the field setting by right clicking on the pivot panel and selecting Field
  38. Settings from context menu.
  39. Let’s change the Summary from sum to Average and click OK.
  40. The PivotGrid now displays avarage sales data.
  41. We can add more fields for precise analysis. Add Active filed to Rows.
  42. The Grid now shows active and inactive sales data.
  43. We can choose to remove any field by selecting that field and choosing Remove Field from the context menu.
  44. Further drill down is possible to see detail data. Double click any cell to view detail data in a popup.
  45. Sort any column by clicking the header.
  46. We have seen how a user can create views by selecting relevant fields.
  47. It is also possible to pre-define a view so that when the OLAP control is shown a default view is available for the user. Let’s see how to accomplish that.
  48. We clear the fields from the panel.
  49. In code:
    • We add row fields that has the Country added items collection.
    • Column field that has Product added to items collection.
    • ValueFields that has Sales added to items collection.
    • Save the project and refresh the browser.
  50. We can now see that the Olap panel is loaded with the above fields defined and the pivotgrid is populated with the data.
  51. The pivot panel displays all fields from the model, what if we need select fields and how do we set Values to aggregate differently than the default Sum.
  52. This can be achieved by defining pivot fields.
  53. In the code:
    • Set fields property of PivotPanel.
    • Fields is a collection that can have multiple pivot fields in its items collection.
    • Each item can have a PivotField or CubeField
    • We add a pivot field and set its binding to "Country".
    • Another pivot field with binding "Product".
    • And a third pivot field with binding Sales and Aggregate as Average.
    • Save the project.
    • Refresh the Browser
  54. When the page loads we find that the panel has only those fields that were defined in code and the Values now has aggregation set to Average of sales.

GrapeCity

GrapeCity Developer Tools
comments powered by Disqus