# Client Application for Export and Import Services ## Content 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](/componentone/docs/webapi/online-webapicore/Services) topic. ### Adding Control to Client Application Complete the following steps to create a client application and add FlexGrid control to it. ### MVC 1. Create an MVC5 application in Visual Studio. 2. Add a controller (for example **FlexGridController**) in **Controllers** folder. Include the following references. ```csharp 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. 3. Replace the method Index() with the following method in the **FlexGridController.cs**. ```csharp 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 @(Html.C1().FlexGrid().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 \ tags. ```javascript ``` 6. Add the following JavaScript code. ```javascript 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 ```html ``` ### Adding Data to Client Application Complete the following steps to populate data in the client application. ### MVC 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. ```csharp 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 COUNTRIES = new List { "US", "UK", "Canada", "Japan", "China", "France", "Germany", "Italy", "Korea", "Australia" }; private static List PRODUCTS = new List { "Widget", "Gadget" }; ///

DOC-SUMMARY-TAG-OPEN

/// Get the data. ///

DOC-SUMMARY-TAG-CLOSE

/// /// public static IEnumerable 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 GetCountries() { var countries = new List(); countries.AddRange(COUNTRIES); return countries; } public static List GetProducts() { List products = new List(); products.AddRange(PRODUCTS); return products; } } ``` 5. Save the application. ### HTML ```html ``` ## See Also [Installation](/componentone/docs/webapi/online-webapicore/overview/Installation) [Licensing](/componentone/docs/webapi/online-webapicore/overview/WebsiteLicensingWebAPI3)