devexpress-examples / gridview-how-to-upload-an-excel-file-via-uploadcontrol-and-display-its-data-in-a-grid-t449148

Use an upload control to upload an Excel file to the server and handle the control's FileUploadComplete event to display the file's data in the grid.

Grid View for ASP.NET MVC - How to upload an Excel file using an upload control and display the file's data in the grid

This example demonstrates how to use an upload control to upload an Excel file to the server and handle the control's FileUploadComplete event to display the file's data in the grid.

Overview

Create an upload control, specify its CallbackRouteValues action, and call the GetUploadedFiles method to upload an Excel file. Save the file's path and use the e.CallbackData argument property to pass the path to the client.

public class HomeController : Controller {
    public ActionResult UploadControlUpload() {
        UploadControlExtension.GetUploadedFiles("UploadControlFile", UploadControlSettings.UploadValidationSettings, UploadControlSettings.FileUploadComplete);
        return null;
    }
}
public class UploadControlSettings {
    public static DevExpress.Web.UploadControlValidationSettings UploadValidationSettings = new DevExpress.Web.UploadControlValidationSettings() {
        AllowedFileExtensions = new string[] {".xlsx" },
        MaxFileSize = 40000000
    };
    public static void FileUploadComplete(object sender, DevExpress.Web.FileUploadCompleteEventArgs e) {
        const string UploadDirectory = "~/Content/UploadedFiles/";
        if (e.UploadedFile.IsValid) {
            MemoryStream ms = new MemoryStream();
            // ...
            e.UploadedFile.SaveAs(resultFilePath);
            e.CallbackData = resultFilePath;
        }
    }
}

Handle the upload control's FileUploadColmplete event. In the handler, call the grid's PerformCallback method to send a callback to the server and pass the file's path as a parameter.

settings.ClientSideEvents.FileUploadComplete = "function(s, e) { GridView1.PerformCallback({ path: e.callbackData}); }";

To display the file's data in the grid, use the approach illustrated in the following example: Grid View for ASP.NET MVC - How to bind the grid to an excel file.

Files to Review

• HomeController.cs
• Model.cs
• GridViewPartial.cshtml
• Index.cshtml

More Examples

• Grid View for ASP.NET Web Forms - How to display data from an uploaded Excel file