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.
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.
(you will be redirected to DevExpress.com to submit your response)