ComponentOne Studio Web API Edition > Working with Web API > Configuring the Client Application > 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.
Complete the following steps to create a client application and add FlexGrid control to it.
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. |
C# |
Copy Code
|
---|---|
public ActionResult Index() { return View(Sale.GetData(10)); } |
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")); }) ) |
Javascript |
Copy Code
|
---|---|
<button class="btn btn-primary" onclick="exportControlDemoControl()">Export</button> |
Javascript |
Copy Code
|
---|---|
function exportControlDemoControl() { var exporter = new c1.mvc.grid.ExcelExporter(), control = wijmo.Control.getControl('#flexGrid'); exporter.requestExport(control, 'http://demos.componentone.com/aspnet/webapi/api/export/excel', { type: xlsx }); } |
HTML |
Copy Code
|
---|---|
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML> |
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> |
HTML |
Copy Code
|
---|---|
<div id="flexGrid" style="width:auto"></div> <br/> |
Javascript |
Copy Code
|
---|---|
<button class="btn btn-primary" onclick="exportControlDemoControl()">Export</button> |
Javascript |
Copy Code
|
---|---|
function exportControlDemoControl() { var exporter = new c1.mvc.grid.ExcelExporter(), control = wijmo.Control.getControl('#flexGrid'); exporter.requestExport(control, 'http://demos.componentone.com/aspnet/webapi/api/export/excel', { type: xlsx }); } |
Complete the following steps to populate data in the client application.
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; } } |
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> |