Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can EditorFor() be used to create <input type="file">?

Tags:

Given this model, is it possible to use the Html.EditorFor() to render a file upload input element to the page? I played around with the Datatype of the property FileName, and it was definitely impacting the editor form rendered.

public class DR405Model {     [DataType(DataType.Text)]     public String TaxPayerId { get; set; }     [DataType(DataType.Text)]     public String ReturnYear { get; set; }      public String  FileName { get; set; } } 

Strongly Typed *.aspx page looks like this

    <div class="editor-field">         <%: Html.EditorFor(model => model.FileName) %>         <%: Html.ValidationMessageFor(model => model.FileName) %>     </div> 
like image 682
Doug Chamberlain Avatar asked May 24 '11 16:05

Doug Chamberlain


People also ask

What is EditorFor?

EditorFor<TModel,TValue>(HtmlHelper<TModel>, Expression<Func<TModel,TValue>>, String, String, Object) Returns an HTML input element for each property in the object that is represented by the expression, using the specified template, HTML field name, and additional view data.

What are the advantages of the HTML EditorFor () method?

The advantages of EditorFor is that your code is not tied to an <input type="text" . So if you decide to change something to the aspect of how your textboxes are rendered like wrapping them in a div you could simply write a custom editor template ( ~/Views/Shared/EditorTemplates/string.

How do I add an EditorFor style?

EditorFor does not allow for styling as there are no parameters for additional attributes. The reason for this is because the EditorFor doesn't always generate a single element as it can be overridden. To style a specific type of element you need to use the specific editor you want to use.


1 Answers

It would make more sense to use HttpPostedFileBase to represent an uploaded file on your view model instead of string:

public class DR405Model {     [DataType(DataType.Text)]     public string TaxPayerId { get; set; }      [DataType(DataType.Text)]     public string ReturnYear { get; set; }      public HttpPostedFileBase File { get; set; } } 

then you could have the following view:

<% using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { %>      ... input fields for other view model properties      <div class="editor-field">         <%= Html.EditorFor(model => model.File) %>         <%= Html.ValidationMessageFor(model => model.File) %>     </div>      <input type="submit" value="OK" /> <% } %> 

And finally define the corresponding editor template inside ~/Views/Shared/EditorTemplates/HttpPostedFileBase.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <input type="file" name="<%: ViewData.TemplateInfo.GetFullHtmlFieldName("") %>" id="<%: ViewData.TemplateInfo.GetFullHtmlFieldId("") %>" /> 

Now the controller might look like this:

public class HomeController : Controller {     public ActionResult Index()     {         return View(new DR405Model());     }      [HttpPost]     public ActionResult Index(DR405Model model)     {         if (model.File != null && model.File.ContentLength > 0)         {             var fileName = Path.GetFileName(model.File.FileName);             var path = Path.Combine(Server.MapPath("~/App_Data"), fileName);             model.File.SaveAs(path);         }          return RedirectToAction("Index");     } } 
like image 194
Darin Dimitrov Avatar answered Oct 01 '22 11:10

Darin Dimitrov