ASP.NET MVC Controls > Controls > OLAP > Features > Data Binding > Model Binding |
This topic describes the steps required to add data in the OLAP control using model binding. You can also perform remote data binding in OLAP. For more information about remote data binding, see Remote Data Binding topic.
Complete the following steps to implement model data binding in Olap control.
The following image shows how OLAP control appears in the browser after completing the above steps:
OLAP Control |
Create a new class inside the Models folder to create data source for the OLAP control.
ProductData.cs
). For more information about how to add a new model, see Adding controls.using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; namespace OlapSample.Models { public class ProductData { private static Random r = new Random(); public int ID { get; set; } public string Product { get; set; } public string Country { get; set; } public DateTime Date { get; set; } public int Sales { get; set; } public int Downloads { get; set; } public bool Active { get; set; } public double Discount { get; set; } private static int randomInt(int max) { return (int)Math.Floor(r.NextDouble() * (max + 1)); } public static IEnumerable<ProductData> GetData(int cnt) { string[] countries = "China,India,Russia,US,Germany,UK,Japan,Italy,Greece,Spain,Portugal".Split(','); string[] products = "Wijmo,Aoba,Xuni,Olap".Split(','); List<ProductData> result = new List<ProductData>(); for (var i = 0; i < cnt; i++) { result.Add(new ProductData { ID = i, Product = products[randomInt(products.Length - 1)], Country = countries[randomInt(countries.Length - 1)], Date = new DateTime(2015, randomInt(5) + 1, randomInt(27) + 1), Sales = randomInt(10000), Downloads = randomInt(10000), Active = randomInt(1) == 1 ? true : false, Discount = r.NextDouble() }); } return result; } } }
Create a controller and view for OLAP control and follow the below steps to initialize an OLAP control.
Complete the following steps to initialize an OLAP control.
Add a new Controller
OlapController
).public class OlapController : Controller { private static System.Collections.IEnumerable Data = ProductData.GetData(10).ToList(); // GET: PivotGrid public ActionResult Index() { return View(Data); } }
OlapController.
Index()
.@using OlapSample.Models; @model IEnumerable<ProductData> <br /> @(Html.C1().PivotEngine().Id("indexEngine").Bind(Model) .RowFields(pfcb => pfcb.Items("Country")) .ColumnFields(cfcb => cfcb.Items("Product")) .ValueFields(vfcb => vfcb.Items("Sales"))) @Html.C1().PivotPanel().ItemsSourceId("indexEngine") @Html.C1().PivotChart().ItemsSourceId("indexEngine") @Html.C1().PivotGrid().ItemsSourceId("indexEngine")
Razor |
Copy Code
|
---|---|
@model IEnumerable<ProductData> <c1-pivot-engine id="indexEngine"> <c1-items-source source-collection="Model"></c1-items-source> <c1-view-field-collection c1-property="RowFields" items="Country"></c1-view-field-collection> <c1-view-field-collection c1-property="ColumnFields" items="Product"></c1-view-field-collection> <c1-view-field-collection c1-property="ValueFields" items="Sales"></c1-view-field-collection> </c1-pivot-engine> <c1-pivot-panel items-source-id="indexEngine"></c1-pivot-panel> <c1-pivot-chart items-source-id="indexEngine"></c1-pivot-chart> <c1-pivot-grid items-source-id="indexEngine"></c1-pivot-grid> |
Append the folder name and view name to the generated URL (for example: http://localhost:1234/Olap/Index) in the address bar of the browser to see the view. |