ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexSheet / Work with FlexSheet / Remote Loading and Saving of Excel
In This Topic
    Remote Loading and Saving of Excel
    In This Topic

    FlexSheet allows you to remotely load and save excel file using C1JSONRequest. This specifies remote URLs to load data from excel file or workbook in FlexSheet control, and save FlexSheet data to server as Excel file or workbook through action.

    The below example loads an excel file, placed on server, in FlexSheet using Load method of FlexSheetHelper class.

    Note that FlexSheet requires jszip.min.js file for remote loading and saving of excel. Therefore, you need to add this file to your application and provide reference to it in the respective view or in <head> section of _Layout.cshtml file.

    The following code examples demonstrate how to remotely load data from excel file or workbook in FlexSheet control:

    Include the MVC references as shown below.

    C#
    Copy Code 
    using C1.Web.Mvc.Sheet;
using System;
using System.Collections;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Collections.Generic;
using C1.Web.Mvc.Serializition;

    RemoteLoadController.cs

    C#
    Copy Code 
    public class RemoteController : Controller
{
    // GET: /<controller>/
    public IActionResult Index()
    {
        return View();
    }
    public ActionResult RemoteLoadXlsx()
    {
        return this.C1Json(FlexSheetHelper.Load("~/ToLoad/WorkBook.xlsx"));
    }
}

    Here, the Excel workbook that is loaded remotely is placed in wwwroot folder of the application.

    RemoteLoading.cshtml

    HTML
    Copy Code 
    @using C1.Web.Mvc.Sheet;
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

<div>
    <c1-flex-sheet class="flexSheet" id="flexSheet" height="700px" width="700px"
                   load-action-url="@(Url.Action("RemoteLoadXlsx"))">                 
    </c1-flex-sheet>
</div>

    Back to Top

    Remote Save

    RemoteSaveController.cs 

    C#
    Copy Code 
    public class RemoteSaveController : Controller
{
    // GET: /<controller>/
    public static List<Sale> SALES = Sale.GetData(50).ToList();
    public ActionResult Index()
    {
        return View(SALES);
    }

    private const string FILE_PATH = "\\wwwroot\\uploadFile\\save.xlsx";
    public JsonResult RemoteSaveFile([FlexSheetRequest]FlexSheetSaveRequest request)
    {
        var success = true;
        var error = "";
        var app = GetService<IApplicationEnvironment>();
        var savePath = app.ApplicationBasePath + FILE_PATH;
        try
        {
            Stream st = request.GetFileStream();
            using (FileStream fs = new FileStream(savePath, FileMode.Create))
            {
                if (st != null)
                {
                    st.CopyTo(fs);
                }
            }
        }
        catch (Exception e)
        {
            success = false;
            error = e.ToString();
        }

        return this.C1Json(FlexSheetHelper.Save(success, error));
    }

    public FileResult DownloadFile()
    {
        var app = GetService<IApplicationEnvironment>();
        var savePath = app.ApplicationBasePath + FILE_PATH;
        var name = Path.GetFileName(FILE_PATH);
        return File(new FileStream(savePath, FileMode.Open, FileAccess.Read),
            "application/msexcel", name);
    }

    public static T GetService<T>() where T : class
    {
        var serviceProvider = CallContextServiceLocator.Locator.ServiceProvider;
        return serviceProvider.GetService(typeof(T)) as T;
    }
}


    RemoteSaving.cshtml

    HTML
    Copy Code 
    <script>
        function remoteSave() {
            var flexSheet = wijmo.Control.getControl('#flexSheet');
            flexSheet.remoteSave(c1.mvc.grid.sheet.ContentType.Xlsx);
        }

        function onFileSaved(sender, args) {
            if (args.success) {
                window.location.href = '@Url.Action("DownloadFile")';
            } else {
                alert(args.error);
            }
        }
</script>

<div>
    <button type="button" class="btn btn-default" onclick="remoteSave()">Save</button>
    <br /><br />

        <c1-flex-sheet class="flexSheet" id="flexSheet" width="500px" height="700px" save-action-url="@(Url.Action("RemoteSaveFile"))"
                       remote-saved="onFileSaved">
            <c1-bound-sheet>
                <c1-items-source source-collection="Model"></c1-items-source>
            </c1-bound-sheet>
        </c1-flex-sheet>
    </div>

    Back to Top

    See Also
    Quick Start

    wijmo.grid.sheet

    wijmo.grid.sheet Module