# Remote Binding

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



OLAP allows you to retrieve data directly using **C1JSONRequest**. This specifies remote data URLs that include the server, table and columns. The arrays returned are used as data sources for **CollectionView** objects.

`CollectionViewHelper` is a static class that enables collections to have editing, filtering, grouping, and sorting services. The `Bind` property of **PivotEngine** is used to bind it to a collection by passing an action URL method to carry out a specific operation. This class also includes the following methods:

*   `Read()`: Retrieves data from the collection.
*   `Edit()`: Enables excel-style editing in OLAP.
*   `BatchEdit()`: Allows editing multiple items at a time.

Follow the given steps to get started:

### Create a Datasource for OLAP

Create a new class inside the Models folder to create data source for the OLAP control.

1.  Add a new class to the folder **Models** (for example: `ProductData.cs`). See [Adding controls](/componentone/docs/mvc/online-mvc/addingcontrols#step2) to know how to add a new model.
2.  Add the following code to the model to define the data for OLAP.
    
    ```csharp
    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;
            }
        }
    }
    ```
    

### Add an OLAP control

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**

1.  In the **Solution Explorer**, right click the folder **Controllers.**
2.  From the context menu, select **Add | Controller**. The **Add Scaffold** dialog appears.
3.  Complete the following steps in the **Add Scaffold** dialog:
    1.  Select **MVC 5 Controller - Empty** template.
    2.  Set name of the controller (for example: `OlapController`).
    3.  Click **Add**.
4.  Replace the method Index() with the following method.
    
    ```csharp
    partial class RemoteBindController : Controller
    {
        private static IEnumerable<ProductData> RemoteData = ProductData.GetData(100000).ToList();
        // GET: PivotGrid
        public ActionResult RemoteBind()
        {
            return View();
        }
        public ActionResult RemoteBind_Read([C1JsonRequest] CollectionViewRequest<ProductData> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, RemoteData));
        }
    }
    ```
    

**Add a View for the Controller**

1.  From the **Solution Explorer**, expand the folder **Controllers** and double click the `OlapController.`
2.  Place the cursor inside the method `Index()`.
3.  Right click and select **Add View**. The **Add View** dialog appears.
4.  In the **Add View** dialog, verify that the view name is **Index** and View engine is **Razor (CSHTML).**
5.  Click **Add** to add a view is for the controller. Copy the following code and paste it inside **Index.cshtml**.
    
    ```csharp
    @using RemoteDataOlap.Models;
    @model IEnumerable<ProductData>
    @(Html.C1().PivotEngine().Id("remoteEngine").Bind(Url.Action("RemoteBind_Read"))
        .RowFields(pfcb => pfcb.Items("Country"))
        .ColumnFields(cfcb => cfcb.Items("Product"))
        .ValueFields(vfcb => vfcb.Items("Sales")))
    @Html.C1().PivotPanel().ItemsSourceId("remoteEngine")
    @Html.C1().PivotGrid().ItemsSourceId("remoteEngine")
    ```
    

### Build and Run the Project

1.  Click **Build | Build Solution** to build the project.
2.  Press **F5** to run the project. 
	> type=note
	> 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.
    
    The following image shows how OLAP control appears in the browser after completing the above steps:<br />![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/olapremotebind.png)
    

## See Also

[Data Engine Service](/componentone/docs/mvc/online-mvc/workwithcontrols/Olap/workwitholap/OlapDataBinding/DataEngine)

[Cube Data Binding using DataEngine](/componentone/docs/mvc/online-mvc/workwithcontrols/Olap/workwitholap/OlapDataBinding/CubeData)