FileUpload Control Inside WebGrid To Upload File In Asp.net MVC Using C#.Net

This article will show you how you can use input fileupload control in an MVC webgrid and the selected file in the controller end inside the webgrid. In this article I have used mvc webgrid and input file control to upload the file when you select in webgrid by using asp.net mvc and c#.net.

Some of my previous articles are as follows: File Upload in MVC3 By Using Razor, How to Bind Data to Webgrid in ASP.net MVC Using C#.Net, How To Disable Sorting in Asp.net MVC Webgrid, File Upload and Displaying Them as Thumbnails in DataList in MVC3 By Using Razor, C#.Net, MVC WebGrid Custom paging With Page no and Shorting Data Using C#.Net, Display User Detail Using jQuery ToolTip In Asp.Net MVC WebGrid, Code to Dynamically Bind Image To Asp.net MVC WebGrid, File Upload and Display Uploaded Preview in MVC3 Razor Example Using C#.Net, File Upload with ASP.NET | How to Use FileUpload Control in ASP.Net Using C#.Net,VB.Net | Upload File in Asp.net and Save in Folder.

So for this article first we will create a new asp.net mvc application and add the model class file in model folder.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication7.Models {     public class StudentModel     {         public List<Student> StudentList { get; set; }     }     public class Student     {         public string Name { get; set; }         public string UploadFile { get; set; }         public string Address { get; set; }     } }

Now we will add the controller file in controller folder. In this file we will add the below code.

public ActionResult Index()         {             StudentModel _objstudentmodel = new StudentModel();             _objstudentmodel.StudentList = new List<Student>();             _objstudentmodel.StudentList.Add(new Student { Name = "Name1", Address = "Address1" });             _objstudentmodel.StudentList.Add(new Student { Name = "Name2", Address = "Address2" });             _objstudentmodel.StudentList.Add(new Student { Name = "Name3", Address = "Address3" });             return View(_objstudentmodel);         }

In above code on httpget we assign some value to the list collection for displaying on webgrid. Now we will create the view for this controller action.

@model  MvcApplication7.Models.StudentModel @{     ViewBag.Title = "WebGrid With FileUpload In Asp.net MVC Using C#.Net"; } <style type="text/css">     table     {         font-family: verdana,arial,sans-serif;         font-size: 11px;         color: #333333;         border-width: 1px;         border-color: #666666;         border-collapse: collapse;     }     table th     {         border-width: 1px;         padding: 8px;         border-style: solid;         border-color: #666666;         background-color: #dedede;     }     table td     {         border-width: 1px;         padding: 8px;         border-style: solid;         border-color: #666666;         background-color: #ffffff;     } </style> @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) {     var grid = new WebGrid(Model.StudentList, canSort: false, canPage: false);     int rowNum = 0;     <div>         @grid.GetHtml(columns:             grid.Columns             (                 grid.Column("RowNumber", format: item => rowNum = rowNum + 1),                 grid.Column("", "", format: @<input type="file" name="files" value="" />),                   grid.Column("Name", format: (item) => Html.TextBox("StudentList[" + (rowNum - 1).ToString() + "].Name", (object)item.Name, new { @style = "width:60px" })),                  grid.Column("Address", format: (item) => Html.TextBox("StudentList[" + (rowNum - 1).ToString() + "].Address", (object)item.Address, new { @style = "width:60px" }))             ), mode: WebGridPagerModes.Numeric)     </div>     <input type="submit" value="Submit" /> }

In above code I have added grid.Column("", "", format: @< input type="file" name="files" value="" / >) for file upload control. This line of code will display the file upload control in webgrid. Here u must assign the control name, because we will access the control input by name at controller end, and the parameter name and the control name must be same.

After this we will add HTTPPOST method in our controller.

[HttpPost]         public ActionResult Index(HttpPostedFileBase[] files, StudentModel _objstudentmodel)         {             try             {                 /*Lopp for multiple files*/                 foreach (HttpPostedFileBase file in files)                 {                     /*Here we are checking weather file is selected or not                      *if file is not selected on that case we will get null                      * in collection for that ro.                      */                     if (file != null)                     {                         /*Geting the file name*/                         string filename = System.IO.Path.GetFileName(file.FileName);                         /*Saving the file in server folder*/                         file.SaveAs(Server.MapPath("~/Images/" + filename));                         string filepathtosave = "Images/" + filename;                         /*APPEND THE FILE NAME IN COLLECTION*/                         /*HERE WILL BE YOUR CODE TO SAVE THE FILE DETAIL AND DATA IN DATA BASE*/                     }                 }                 ViewBag.Message = "File Uploaded successfully.";             }             catch             {                 ViewBag.Message = "Error while uploading the files.";             }             return View(_objstudentmodel);         }

In above code please check this parameter HttpPostedFileBase[] files this will show us the collection all the files. If you have not selected any file in gridview row on that case it will show null in collection, so I have checked weather the file is selected for the array index of not , if it selected then i have passed to save the file in folder and in data base.

Note: Here you must take care one thing HttpPostedFileBase parameter variable name and the input file control name must be same. Otherwise you will not be able to get the selected file collection.

So here is the controller complete code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication7.Models; namespace MvcApplication7.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             StudentModel _objstudentmodel = new StudentModel();             _objstudentmodel.StudentList = new List<Student>();             _objstudentmodel.StudentList.Add(new Student { Name = "Name1", Address = "Address1" });             _objstudentmodel.StudentList.Add(new Student { Name = "Name2", Address = "Address2" });             _objstudentmodel.StudentList.Add(new Student { Name = "Name3", Address = "Address3" });             return View(_objstudentmodel);         }         [HttpPost]         public ActionResult Index(HttpPostedFileBase[] files, StudentModel _objstudentmodel)         {             try             {                 /*Lopp for multiple files*/                 foreach (HttpPostedFileBase file in files)                 {                     /*Here we are checking weather file is selected or not                      *if file is not selected on that case we will get null                      * in collection for that ro.                      */                     if (file != null)                     {                         /*Geting the file name*/                         string filename = System.IO.Path.GetFileName(file.FileName);                         /*Saving the file in server folder*/                         file.SaveAs(Server.MapPath("~/Images/" + filename));                         string filepathtosave = "Images/" + filename;                         /*APPEND THE FILE NAME IN COLLECTION*/                         /*HERE WILL BE YOUR CODE TO SAVE THE FILE DETAIL AND DATA IN DATA BASE*/                     }                 }                 ViewBag.Message = "File Uploaded successfully.";             }             catch             {                 ViewBag.Message = "Error while uploading the files.";             }             return View(_objstudentmodel);         }     } }

Before running the application we will create a folder where we will upload the file.

Now we have done. Let’s Run the application to check the output. Here are the files which we will upload.

Now here is the webgrid with file upload control.

Now select the file and click on submit button.

As you click on submit your break point will hit and you will get all the selected file.

Here in above image you see that in collection your are getting only those two selected files which you have selected and you are getting null for the third file which you have not selected. now lets check the collection of file weather we have get correct file in collection or not, Have a look of the below image.

Here we are getting the selected file. Now press F5 and check the image folder.

DOWNLOAD.