web-dev-qa-db-fra.com

ASP.NET MVC 5 Image Télécharger sur le dossier

J'ai une application MVC5 très simple qui possède une page de produit pour le client que j'utilise également les opérations de crud de base qui ont été échafolées dans MVC 5.

J'ai un modèle appelé Cakes.cs parce que le client vend des gâteaux. Assez simple. Voici le code de ce modèle:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;

    namespace TastyCakes.Models
    {
        public class Cakes
        {
            public int CakesID { get; set; }
            public string Name { get; set; }
            public string Description { get; set; }
            public decimal Price { get; set; }

            public string CakeImage
            {
                get { return Name.Replace(" ", string.Empty) + ".jpg"; }
            }
        }
    }

Comme vous pouvez le constater, j'utilise une propriété calculée pour créer un nom d'image pour chaque gâteau. Je n'ai besoin que d'une image pour chaque gâteau. Maintenant, quand je vais éditer un gâteau sur mes pages de crud. Je voudrais ajouter un téléchargement d'image simple qui téléchargera une image (pas besoin de redimensionnement ou de vignettes) mais je voudrais imposer le nom de propriété calculé. En d'autres termes: peu importe ce que l'utilisateur a nommé sa photo, mon code de téléchargement le renommera à tout ce que les gâteaux.name est (moins les espaces) + ". JPG" et le sauvegardez-le sur "~ images/gâteaux".

Je n'exige que le téléchargement soit sur la page d'édition réelle, de sorte que le gâteau aura déjà été créé à ce stade. Toutes les informations nécessaires à la renommée du fichier doivent être disponibles et faciles à utiliser à partir de la page Modifier. Vous trouverez ci-dessous mon code de page d'édition:

Modifier la page:

@model TastyCakes.Models.Cakes

<div class="row">
    <div class="large-12 columns">
    <hgroup class="title">
        <h1>Edit Cakes</h1>
    </hgroup>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <hr />
            @Html.ValidationSummary(true)
            @Html.HiddenFor(model => model.CakesID)

            <div class="medium-12 column">
                @Html.LabelFor(model => model.Name)
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>

            <div class="medium-12 column">
                @Html.LabelFor(model => model.Description)
                @Html.EditorFor(model => model.Description)
                @Html.ValidationMessageFor(model => model.Description)
            </div>

            <div class="medium-12 column">
                @Html.LabelFor(model => model.Price)
                @Html.EditorFor(model => model.Price)
                @Html.ValidationMessageFor(model => model.Price)
            </div>

            <div class="medium-12 column">
                <input type="submit" value="Save" class="tiny button" /> 
                @Html.ActionLink("Back to List", "Index", null, new { @class = "tiny button" })
            </div>
        </div>
    }

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
    </div>
</div>

J'ai examiné quelques solutions HTML5 & ASP.NET 4, mais c'est trop. Ce que je veux est très simple. Toute idées ou un coup de pied dans la bonne direction serait très appréciée. J'utilise ce code non seulement pour un site Web de clients, mais également d'inclure dans un site Web de fiction utilisée pour enseigner des concepts MVC très basiques.

c#javascriptformsasp.net-mvc-5image-uploading
8
Eric Bishard

Vous devrez:

  • ajouter un input de type file à votre formulaire,
  • avoir l'attribut sur votre élément de formulaire enctype = "multipart/form-data"

Ajoutez ensuite un HttpPostedFileBase à votre modèle avec le même nom que le nom de la input. Ensuite, le HttpPostedFileModelBinder passepulera la propriété de modèle à partir du fichier téléchargé avant l'appel de l'action. Remarque, je pense que vous devriez probablement ajouter dans l'ID de modèle quelque part quelque part, peut-être en tant qu'élément de chemin, pour garantir l'unicité dans le chemin d'image afin que les images ne soient pas accidentellement écrasées.

Il y a une discussion raisonnablement complète de ceci à http://www.prideparrot.com/blog/archive/2012/8/uploadering_and_returning_files

public class Cakes
{
    ...

    public HttpPostedFileBase UploadedFile { get; set; }

}

[HttpPost]
public ActionResult Edit(Cakes cake) // I'd probably use a view model here, not the domain model
{
      if (ModelState.IsValid)
      {
           if (cakes.UploadedFile != null)
           {
               cakes.UploadedFile.SaveAs(Path.Combine("path-to-images-for-this-cake", cakes.CakeImage));
           }

           ....
      }
}
18
tvanfosson

Le code fourni ici a finalement participé à la construction de cette petite démo qui vous permet de télécharger des images dans le système de fichiers et de les utiliser de manière dynamique sans enregistrer de valeurs à la base de données; Cependant, vous aurez la chaîne à l'emplacement des images dans le cadre de votre classe modèle qui utilise une convention et une nommage du fichier téléchargé à afficher.

Je voudrais télécharger cela sur Github et voir si je ne peux pas obtenir d'autres pour m'aider à travailler une meilleure solution qui utilise cette idée. Penser à le faire fonctionner avec MongoDB aussi.

ASP.NET MVC 5 Image Upload & Supprimer w/Propriété calculée

1
Eric Bishard