The C1Studio Web API Edition is a set of APIs that enable exporting of FlexChart and Gauges to images, and import and export of Excel sheets with FlexGrid. The APIs are available as Visual Studio templates with support for Web API 2.2 and a beta support for Web API 3.0 (next update for web api 3.0 is scheduled for September 2015). Let's walk through an example of creating a Web API that uses the C1Studio Web APIs. Later we'll demonstrate how to consume this Web API to export Excel sheets from FlexGrid in a client application.

Create and Host Web API

  1. Create a new Project inside Visual Studio using "C1 Web API Application Hosted in IIS" template. This automatically adds the necessary libraries and license information to the project. I've named the project "C1WebAPIService":


    ComponentOne Studio Web API for MVC Template

  2. Observe the references—files that are added to the service project.

    ComponentOne Studio Web API for MVC Web References
    The project has references to C1.Web.API & C1.C1Excel libraries. It also has a license.licx file that has license information.

  3. Deploy the project to IIS.

    ComponentOne Studio Web API for MVC Deployment

Consume Web APIs: Export a FlexGrid to Excel

These Web APIs can be consumed by any ASP.NET MVC or Javascript application that use ComponentOne Studio FlexGrid, FlexChart & Gauge controls. In this example, we'll export a sales report to Excel sheet from an ASP.NET MVC project.
ComponentOne Studio Web API for MVC Sales Report

  1. Add "webapiclient.min" JS file located at C:\Program Files (x86)\ComponentOne\Web API Edition\client to the project. This file has client side methods that interact with server APIs.

  2. Add a reference for the above file to _Layout.cs file under head tags.

    ComponentOne Studio Web API for MVC Client Script

  3. Add a button to the View that calls a javascript function "exportExcel" to export the sales report data inside FlexGrid to Excel. 

    
<script><br/>&nbsp;function&nbsp;exportExcel()&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;exporter&nbsp;=&nbsp;new&nbsp;c1.mvc.grid.ExcelExporter();<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;grid&nbsp;=&nbsp;wijmo.Control.getControl("#Sales");<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exporter.requestExport(grid,&nbsp;"http://localhost/c1webapiservice/api/export/Excel",&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileName:&nbsp;"salesReport",<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;wijmo.ExportFileType.Xlsx,<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;includeColumnHeader:true<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br/></script>

    The "webapiclient" has a "ExcelExporter" class that uses the "requestExport" method to export to Excel. This method takes various parameters:

    • Reference to the FlexGrid control
    • Web API service URL
    • Name of the file
    • Format of the exported file (xls, .xlsx or .csv)
    • Whether to include column header while exporting
    • Wehther to include current page data or all data while exporting

  4. Run the application and click on exportExcel button. You'll observe that the exported file persists the grouping and cell formatting applied to FlexGrid. You can download the client sample from SalesReport.

    You can refer to WebAPIExplorer sample to see various export\import options for different controls. This release of Web API Edition is a preview release. Stay tuned for some power packed features and Rest APIs scheduled for 2015 V3 release.

    Read more about ComponentOne Studio MVC Edition >>