# Excel Import and Export

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content

This topic explains how to export or import FlexGrid content to/from an Excel xlsx file. To export the FlexGrid content in Excel format, pass the FlexGrid instance to the **FlexGridXlsxConverter.save** method. This generates xlsx file content, which can be saved to local file or sent to a server. To import an Excel (xlsx file) content to your FlexGrid control, pass the FlexGrid instance and the xlsx file content to the **FlexGridXlsxConverter.load** method. The example uses **Sale.cs** model, which was added to the application in the [QuickStart](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart).

The following code examples demonstrate how to export or import FlexGrid content to/from an Excel xlsx file:

#### Add References

Before implementing the code below, you need to add the **jszip.min.js** library reference to import and export FlexGrid to/from an Excel xlsx file.

**\_Layout.cshtml**

```html
<!-- SheetJS library -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js"></script>
```

**HomeController.cs**

```csharp
public ActionResult Index()
{
         return View(Sale.GetData(500));
}
```

**App.js**

```javascript
//Controls Declaration
var gFlexGrid = null,
    IncludeHeadersExport = null,
    IncludeHeadersImport = null;
//Controls Initialization
function InitialControls() {
    gFlexGrid = wijmo.Control.getControl("#gFlexGrid");
    IncludeHeadersImport = document.getElementById('IncludeHeadersImport');
    IncludeHeadersExport = document.getElementById('IncludeHeadersExport');
}
// export
function exportExcel() {
    if (gFlexGrid) {
        wijmo.grid.xlsx.FlexGridXlsxConverter.save(gFlexGrid, { includeColumnHeaders: IncludeHeadersExport.checked }, 'FlexGrid.xlsx');
    }
};
// import
function importExcel() {
    if (gFlexGrid) {
        if ($('#importFile')[0].files[0]) {
            wijmo.grid.xlsx.FlexGridXlsxConverter.load(gFlexGrid, $('#importFile')[0].files[0], { includeColumnHeaders: IncludeHeadersImport.checked });
        }
        else {
            alert('Select an Excel file to Import.');
        }
    }
};
```

**Index.cshtml**

```auto
@using C1MVCExcelImportExport.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@{
    ViewBag.Title = "C1 ASP.NET MVC Excel Import Export";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- App scripts -->
<script src="@Url.Content("~/Scripts/app.js")" type="text/javascript"></script>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <div class="form-inline well well-lg">
                <input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
                <button class="btn btn-default" onclick="importExcel()">Import</button>
                <br />
                <div class="checkbox">
                    <label>
                        <input id="IncludeHeadersImport" type="checkbox" checked="checked"> Include Column Headers
                    </label>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="form-inline well well-lg">
                <a href="#" class="btn btn-default" id="export" onclick="exportExcel()">Export</a>
                <div class="checkbox">
                    <label>
                        <input id="IncludeHeadersExport" type="checkbox" checked="checked"> Include Column Headers
                    </label>
                </div>
            </div>
        </div>
    </div>
<div class="row">
@(Html.C1().FlexGrid().Id("gFlexGrid").AutoGenerateColumns(false).AllowSorting(true)
.("max-height", "400px").IsReadOnly(true)
Bind(bl => bl.DisableServerRead(true).Bind(Model)).CssClass("grid")
Columns(bl =>
        {
        bl.Add(cb => cb.Binding("Country").Header("Country").Width("*"));
        bl.Add(cb => cb.Binding("Product").Header("Product").Width("*"));
        bl.Add(cb => cb.Binding("Color").Header("Color").Width("*"));
        bl.Add(cb => cb.Binding("Start").Header("Start").Width("*"));
        bl.Add(cb => cb.Binding("Amount").Header("Amount").Format("n0").Width("*")
        .Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum));
        })
)
    </div>
</div>
<script type="text/javascript">
    c1.documentReady(function () {
        if (window["InitialControls"]) {
            window["InitialControls"]();
        }
    });
</script>
```

## See Also

**Reference**

[FlexGridBase<T> Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.html)

[FlexGrid<T> Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGrid-1.html)