/asp-net-mvc-grid-upload-and-display-excel-file

Use the UploadControl to allow users to upload a Microsoft Excel file to the server and view the uploaded file's data in the grid.

Primary LanguageJavaScriptOtherNOASSERTION

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

This example demonstrates how to use the UploadControl to allow users to upload a Microsoft Excel file to the server and view the uploaded file's data in the grid.

Note: The example application uses the DevExpress.Docs assembly. The Document Server subscription license is required to use the demonstrated technique.

Overview

  1. Implement the Helper class that returns the DataTable object based on your Excel file.

  2. Implement the HomeControllerUploadControlSettings class. In this class, do the following:

    • Create the FileUploadComplete event that saves the uploaded file and its path.
    • Specify the UploadValidationSettings property that returns the upload control's validation settings.
    public static void FileUploadComplete(object sender, DevExpress.Web.FileUploadCompleteEventArgs e) {
    if (e.UploadedFile.IsValid) {
        resultFilePath = HttpContext.Current.Request.MapPath(UploadDirectory + e.UploadedFile.FileName);
        e.UploadedFile.SaveAs(resultFilePath, true);
        IUrlResolutionService urlResolver = sender as IUrlResolutionService;
        if (urlResolver != null) {
            e.CallbackData = urlResolver.ResolveClientUrl(resultFilePath);
        }
    }
}

  3. Map the upload control's CallbackRouteValues property to the UploadControlUpload action. In this action, call the control's GetUploadedFiles method to pass validation settings and call the FileUploadComplete method.

    public ActionResult UploadControlUpload() {
    UploadControlExtension.GetUploadedFiles("UploadControl", HomeControllerUploadControlSettings.UploadValidationSettings, HomeControllerUploadControlSettings.FileUploadComplete);
    return null;
}

  4. In the GridViewPartial action, use the Helper class to get the DataTable object and pass this table as a model to the Partial View.

    public ActionResult GridViewPartial() {
    var model = string.IsNullOrEmpty(HomeControllerUploadControlSettings.resultFilePath) ? null : helperClass.GetTableFromExcel();
    return PartialView("_GridViewPartial", model);
}

Files to Review

More Examples