Client Application for Export and Import Services

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.

MVC

Create an MVC5 application in Visual Studio.
Add a controller (for example FlexGridController) in Controllers folder. Include the following references.
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Services_Excel.Models;
```
type=note

Note: Replace Services_Excel with the name of your application.
Replace the method Index() with the following method in the FlexGridController.cs.
```
public ActionResult Index()
{
    return View(Sale.GetData(10));
}
```

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.

@(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"));
    })
)

Add the following HTML code in the <body> tags.

<button class="btn btn-primary" onclick="exportControlDemoControl()">Export</button>

Add the following JavaScript 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
        });
    }

HTML

<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>

Adding Data to Client Application

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

MVC

In the Solution Explorer, right click the folder Models and select Add | Class. The Add New Item dialog appears.
In the Add New Item dialog, set the name of the class (for example: Sale.cs).
Click Add.

Add the following code to the new model class.

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" };
    /// <p>DOC-SUMMARY-TAG-OPEN</p>
    /// Get the data.
    /// <p>DOC-SUMMARY-TAG-CLOSE</p>
    /// <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;
    }
}

Save the application.

HTML

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

Client Application for Export and Import Services

Adding Control to Client Application

MVC

HTML

Adding Data to Client Application

MVC

HTML

See Also