Web API Edition | ComponentOne
Web API / Working with Web API / Configuring the Client Application / Client Application for Export and Import Services
In This Topic
    Client Application for Export and Import Services
    In This Topic

    This section demonstrates how to create a generic client application using MVC and Wijmo 5 controls, which can make a call to the Web API service. You can call Web API service through the client application for enabling export/import functionality. The client uses ComponentOne Web API Client JavaScript file to raise the export/import request for consuming Web API service. For more information on how to work with C1 Web API services, see Services topic.

    Adding Control to Client Application

    Complete the following steps to create a client application and add FlexGrid control to it.

    1. Create an MVC5 application in Visual Studio.
    2. Add a controller (for example FlexGridController) in Controllers folder. Include the following references.
      C#
      Copy Code 
      using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Services_Excel.Models;

      Note: Replace Services_Excel with the name of your application.

    3. Replace the method Index() with the following method in the FlexGridController.cs.
      C#
      Copy Code 
      public ActionResult Index()
{
    return View(Sale.GetData(10));
}
    4. Add a corresponding view (for example Index.cshtml) for the controller. Replace the default code of Views\FlexGrid\Index.cshtml with the code given below to initialize the FlexGrid control.
      Razor
      Copy Code 
      @(Html.C1().FlexGrid<Sale>().Id("flexGrid").Width("auto")
    .AutoGenerateColumns(false)
    .Bind(bl => bl.Bind(Model))
    .CssClass("grid")
    .IsReadOnly(true)
    .Columns(bl =>
    {
        bl.Add(cb => cb.Binding("ID"));
        bl.Add(cb => cb.Binding("Date"));
        bl.Add(cb => cb.Binding("Country"));
        bl.Add(cb => cb.Binding("Product"));
        bl.Add(cb => cb.Binding("Color"));
        bl.Add(cb => cb.Binding("Amount"));
    })
)
    5. Add the following HTML code in the <body> tags.
      Javascript
      Copy Code 
      <button class="btn btn-primary" onclick="exportControlDemoControl()">Export</button>
    6. Add the following JavaScript code.
      Javascript
      Copy Code 
      function exportControlDemoControl() {
        var exporter = new c1.mvc.grid.ExcelExporter(),
            control = wijmo.Control.getControl('#flexGrid');
        exporter.requestExport(control, 'https://demos.componentone.com/aspnet/webapi/api/export/excel', {
            type: xlsx
        });
    }
    1. To create a new HTML page in your favorite text editor, add the following code and save the document with a .html extension.
      HTML
      Copy Code 
      <!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>

    2. Add links to the dependencies to your HTML page within the <head> tags.
      Note: To use Wijmo 5 controls in your HTML application, you need to include references to few Wijmo files in your HTML pages. You may either download these wijmo files and copy them to appropriate folders in your application, or reference Wijmo files hosted in cloud on our Content Delivery Network (CDN). If you download and place the Wijmo script files in a folder named "Scripts", css files in a folder named "Styles", and script files specific to Wijmo controls to "Controls" folder, then add the Wijmo references within <head> tags of your HTML pages as shown below.
      HTML
      Copy Code 
      <!-- Wijmo references -->
<script src="Controls/wijmo.min.js" type="text/javascript"></script>
<link href="Styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="Scripts/webapiclient.min.js" type="text/javascript"></script>

    3. Add the following markup within the <body> tags to create the control.
      HTML
      Copy Code 
      <div id="flexGrid" style="width:auto"></div> <br/>
    4. Add the following HTML code in the <body> tags.
      Javascript
      Copy Code 
      <button class="btn btn-primary" onclick="exportControlDemoControl()">Export</button>
    5. Add the following JavaScript code.
      Javascript
      Copy Code 
      function exportControlDemoControl() {
        var exporter = new c1.mvc.grid.ExcelExporter(),
            control = wijmo.Control.getControl('#flexGrid');
        exporter.requestExport(control, 'https://demos.componentone.com/aspnet/webapi/api/export/excel', {
            type: xlsx
        });
    }

    Adding Data to Client Application

    Complete the following steps to populate data in the client application.

    1. In the Solution Explorer, right click the folder Models and select Add | Class. The Add New Item dialog appears.
    2. In the Add New Item dialog, set the name of the class (for example: Sale.cs).
    3. Click Add.
    4. Add the following code to the new model class.

      Sale.cs
      Copy Code 
      public class Sale
{
    public int ID { get; set; }
    public DateTime Date { get; set; }
    public string Country { get; set; }
    public string Product { get; set; }
    public string Color { get; set; }
    public double Amount { get; set; }

    private static List<string> COUNTRIES = new List<string> { "US", "UK", "Canada", "Japan", "China", "France", "Germany", "Italy", "Korea", "Australia" };
    private static List<string> PRODUCTS = new List<string> { "Widget", "Gadget" };

    /// <summary>
    /// Get the data.
    /// </summary>
    /// <param name="total"></param>
    /// <returns></returns>
    public static IEnumerable<Sale> GetData(int total)
    {
        var colors = new[] { "Black", "White", "Red", "Green", "Blue" };
        var rand = new Random(0);
        var dt = DateTime.Now;
        var list = Enumerable.Range(0, total).Select(i =>
        {
            var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)];
            var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)];
            var color = colors[rand.Next(0, colors.Length - 1)];
            var date = new DateTime(dt.Year, i % 12 + 1, 25);

            return new Sale
            {
                ID = i + 1,
                Date = date,
                Country = country,
                Product = product,
                Color = color,
                Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2)
            };
        });
        return list;
    }

    public static List<string> GetCountries()
    {
        var countries = new List<string>();
        countries.AddRange(COUNTRIES);
        return countries;
    }

    public static List<string> GetProducts()
    {
        List<string> products = new List<string>();
        products.AddRange(PRODUCTS);
        return products;
    }
}

    5. Save the application.
    1. Within the <head> tag, below the references, add the following script to initialize the grid and generate data.

      JavaScript
      Copy Code 
      <script type="text/javascript">
$(document).ready(function () {
// create some random data
var countries = 'US,UK,Canada,Japan,China,France,Germany,Italy,Korea,Australia'.split(',');
var products = 'Widget,Gadget'.split(',');
var colors = 'Black,White,Red,Green,Blue'.split(',');
var today = new Date();
var dd = today.getDate();
var yyyy = today.getFullYear();
var numRows = 10;
var data = [];
for (var i = 0; i < numRows; i++) {
var date = (i%12+1)+'/'+dd+'/'+yyyy;
data.push({
id: i + 1,
date: date,
country: countries[Math.floor((Math.random() * 100) + 1) % 10],
product: products[Math.floor((Math.random() * 100) + 1) % 2],
color: colors[Math.floor((Math.random() * 100) + 1) % 5],
amount: Math.random() * 5000
});
}
// create CollectionView on the data (to get events)
var view = new wijmo.collections.CollectionView(data);
// initialize the grid
var grid = new wijmo.grid.FlexGrid('#flexGrid', {
columns: [{
binding: 'id',
header: 'ID'
}, {
binding: 'date',
header: 'Date'
}, {
binding: 'country',
header: 'Country'
}, {
binding: 'product',
header: 'Product'
}, {
binding: 'color',
header: 'Color'
}, {
binding: 'amount',
header: 'Amount'
}],
autoGenerateColumns: false,
itemsSource: view,
selectionMode: wijmo.grid.SelectionMode.Row
});
});
</script>
    2. Save the application.

    Back to Top

    See Also
    Installation
    Licensing
    Adding Web API Client JavaScript