ASP.NET Core Web API Edition / Working with Web API / Configuring Client Application / Client Application for Export and Import Services
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.

  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
            });
        }
    

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.

Back to Top

See Also