La visualización de una imagen cargada en MVC 3 Razor

Question

Pues bien, este novato está haciendo algo malo cuando se muestran imágenes subidas al servidor:

modelo:

public class Person 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 
    public string ImageUrl { get; set; } 
} 

controlador (carga - llamado por el [HttpPost] ActionResult pública crear):

public void Upload(Person person) 
{ 
    var image = WebImage.GetImageFromRequest(); 
    var filename = Path.GetFileName(image.FileName); 
    var path = Path.Combine(Server.MapPath("~/App_Data/Uploads/Fotos"), filename); 
    image.Save(path); 
    person.ImageUrl = Url.Content(Path.Combine("~/App_Data/Uploads/Fotos", filename)); 
} 

crear vistas:

... 
@using (Html.BeginForm("Create", "Person", FormMethod.Post, new { @encType = "multipart/form-data" })) 
{ 
    ... 
    @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, includeFormTag: false, uploadText: "image") 
    ... 
    <div> 
     <input type="submit" value="Create" /> | 
     @Html.ActionLink("Back", "Index") 
    </div> 
} 

Hasta ahora, todo va bien, la imagen se carga en la carpeta y la URL se guarda

Ahora, quiero verlo en la vista en detalle

vista de detalle:

<div class="display-foto"> 
    <img src="@Url.Content(Server.MapPath(Model.ImageUrl))" alt="IMAGE" />       
</div> 

visualización del código generado, todo parece estar bien:

<img src="D:\Users\x\Documents\Visual Studio 2010\Projects\CMI_AD\CMI_AD\App_Data\Uploads\Fotos\_nofoto.jpg" alt="IMAGE" /> 

Pero el hecho es que no aparece nada en la pantalla, excepto el texto "IMAG MI".

¿Qué estoy haciendo mal?

P.S. Lo he intentado sin Server.MapPath, usando la dirección relativa "~ \ App_Data \ Uploads \ Fotos_nofoto.jpg" y el resultado es el mismo.

--- --- EDITAR

@ kmcc049: He intentado su sugerencia de crear un ayudante

public static class MyHelpers 
{ 
    public static IHtmlString MyImage(this HtmlHelper htmlHelper, string url) 
    { 
     var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext); 
     var img = new TagBuilder("img"); 
     img.Attributes["alt"] = "[IMAGE]"; 
     img.Attributes["src"] = UrlHelper.GenerateContentUrl(url, htmlHelper.ViewContext.HttpContext); 
     return MvcHtmlString.Create(img.ToString(TagRenderMode.SelfClosing)); 
    } 
} 

la llamada en la vista:

@Html.MyImage(Model.ImageUrl) 

el código generado es

<img alt="[IMAGE]" src="/App_Data/Uploads/Fotos/_nofoto.jpg" /> 

pero la res ULT es el mismo: ninguna imagen :(

--- --- SOLUCIONADO

Al parecer, el App_Data no es una buena ubicación para guardar los archivos subidos porque acceder a ellos dará lugar a un error 403 - Prohibida. Muevo los archivos a ~/Uploads/Fotos y funciona.

Answer 1

Esa no es una ruta HTTP válida. Esa es la ruta a la carpeta en su computadora.

probar el método en lugar UrlHelper.GenerateContentUrl() http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.generatecontenturl.aspx

Answer 2

Carga de una imagen y luego Viendo que es un requisito muy común para cualquier aplicación web. Recientemente me pidieron que permitiera a un usuario agregar una foto de perfil y luego mostrarla en su tablero.

Así que aquí está lo que había hecho, espero que esto también lo ayude.

Código Razor

@using (Html.BeginForm("SaveSettings", "Blog", FormMethod.Post, new {  enctype="multipart/form-data"})) 
{ 
    @Html.TextBoxFor(m => m.BlahBlah) 

    // and more... 

    <input type="file" name="file" id="file" /> 
    <input type="submit" name="submitButton" value="Save" /> 
} 

Lo importante a destacar aquí es que hemos añadido una propiedad HTML llamado enctype como enctype="multipart/form-data".

A continuación, el método de acción para este formulario. La acción acepta dos parámetros de entrada:

UserModel modelo: tiene todos los datos ingresados ​​en el formulario. HttpPostedFileBase archivo: aquí es donde tendrá su imagen cargada publicada en. Código

[HttpPost] 
public ActionResult Index(UserModel model, HttpPostedFileBase file) 
{ 

if (file.ContentLength > 0) { 

// code for saving the image file to a physical location. 
    var fileName = Path.GetFileName(file.FileName); 
    var path = Path.Combine(Server.MapPath("~/Uploads/Profile"), fileName); 
    file.SaveAs(path); 

// prepare a relative path to be stored in the database and used to display later on. 
    path = Url.Content(Path.Combine("~/Uploads/Profile", fileName)); 
// save to db 

    return RedirectToAction("Index"); 

    } 

Es posible que en algún momento también requieren a subir varias imágenes, que tampoco es difícil a continuación es el código para eso. Usando IEnumerable.

Código Razor:

@using (Html.BeginForm("SaveSettings", "Blog", FormMethod.Post, new { enctype="multipart/form-data"})) 
{ 
<input type="file" name="file" id="file" /> <input type="file2" name="file2" id="file2" /> 
<input type="submit" name="submitButton" value="Save" /> 
} 

y aquí es cómo va a ser la lectura de las imágenes comentadas.

[HttpPost] 
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) { 
    foreach (var file in files) { 

    // iterate through each file here... 
    } 
    return RedirectToAction("Index"); 

}

Ahora que ha subido la imagen y se guarda la ruta de la imagen, la siguiente tarea es para mostrar la imagen.

Viendo la imagen cargada

Salud!

Referencias ** **

http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx

Displaying an uploaded image in MVC 3 Razor

https://stackoverflow.com/a/5248365/1182982