Comment afficher/stocker et récupérer l'image comme varbinary (MAX) en utilisant ASP.NET MVC view

Question

Je suis nouveau à ASP.NET MVC, alors veuillez excuser des erreurs.

J'ai besoin d'une page d'affichage (index.cshtml) où je peux afficher l'image, modifier/supprimer l'image en la stockant dans une colonne Varbinary(max) dans une table SQL Server.

Il y a ces colonnes dans la table de base de données:

ID int primary key Identity not null, 
ImageName nvarchar(50) , 
ImagePicInBytes varbinary(MAX) null 

J'utilise un Image.cs avec ce code:

public class Image 
{ 
    public int ID {get; set;} 
    public string ImageName {get; set;} 
    public byte[] ImagePicInBytes {get; set;} 
} 

ImageContext classe comme ci-dessous

public class ImageContext : DbContext 
{ 
    public DbSet<Image> Images { get; set; } 
} 

chaîne de connexion comme ci-dessous

<connectionStrings> 
    <add name="ImageContext" 
     connectionString="server=.; database=Sample; integrated security =SSPI" 
     providerName="System.Data.SqlClient"/> 
</connectionStrings> 

ImageController comme ci-dessous

public class ImageController : Controller 
{ 
    private ImageContext db = new ImageContext(); 

    // GET: /Image/ 
    public ActionResult Index() 
    { 
     return View(db.Images.ToList()); 
    } 

    // GET: /Image/Edit/5 
    public ActionResult Edit(int? id) 
    { 
     if (id == null) 
     { 
      return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
     } 

     Image image = db.Images.Find(id); 

     if (image == null) 
     { 
      return HttpNotFound(); 
     } 

     return View(image); 
    } 
} 

ont créé des vues comme ci-dessous

public class ImageController : Controller 
{ 

     private ImageContext db = new ImageContext(); 

     // GET: /Image/ 
     public ActionResult Index() 
     { 
      return View(db.Images.ToList()); 
     } 


     // GET: /Image/Edit/5 
     public ActionResult Edit(int? id) 
     { 
      if (id == null) 
      { 
       return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
      } 
      Image image = db.Images.Find(id); 
      if (image == null) 
      { 
       return HttpNotFound(); 
      } 
      return View(image); 
     } 

     // GET: /Image/Delete/5 
     public ActionResult Delete(int? id) 
     { 
      if (id == null) 
      { 
       return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
      } 
      Image image = db.Images.Find(id); 
      if (image == null) 
      { 
       return HttpNotFound(); 
      } 
      return View(image); 
     } 

     // POST: /Image/Delete/5 
     [HttpPost, ActionName("Delete")] 
     [ValidateAntiForgeryToken] 
     public ActionResult DeleteConfirmed(int id) 
     { 
      Image image = db.Images.Find(id); 
      db.Images.Remove(image); 
      db.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 

    } 
} 

Mon create.cshtml (vue) comme ci-dessous

<table class="table"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.ImageName) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.ImagePicInBytes) 
     </th> 
     <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.ImageName) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ImagePicInBytes) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id=item.ID }) | 
      @Html.ActionLink("Details", "Details", new { id=item.ID }) | 
      @Html.ActionLink("Delete", "Delete", new { id=item.ID }) 
     </td> 
    </tr> 
} 

</table> 

Je les 3 ci-dessous les questions

1. Comment puis-je créer un nouvel enregistrement dans datatable en téléchargeant une nouvelle image à partir du système de fichiers à la colonne Varbinary dans la base de données?

2. Comment puis-je avoir la vue d'avoir le contrôle FileUpload dans la « Créer une vue » et « vue Edition »

3. Puis-je utiliser HttpPostedFileBase pour réaliser ce qui précède de Create.cshtml? Si oui: comment? Des suggestions ou des liens de référence disponibles?

Answer 1

d'abord créer un viewmodel pour l'image classe

public class ImageViewModel 
    { 
    public string ImageName {get; set;} 
    public HttpPostedFileBase ImagePic {get; set;} 
    } 

puis pour télécharger une photo dans votre créer vue

@model ExmpleProject.Models.ImageViewModel 

@using (Html.BeginForm("Create", "ControllerName", FormMethod.Post, new {enctype="multipart/form-data"})){ 

     @Html.AntiForgeryToken() 
     @Html.LabelFor(m => m.ImageName) 
     @Html.TextBoxFor(m => m.ImageName) 

     @Html.LabelFor(m => m.ImagePic) 
     @Html.TextBoxFor(m => m.ImagePic , new { type = "file" }) 
     <br /> 
     <input type="submit" name="Submit" id="Submit" value="Upload" /> 
    } 

puis dans la méthode post de votre contrôleur pour créer

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Create(ImageViewModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     var uploadedFile = (model.ImagePic != null && model.ImagePic.ContentLength > 0) ? new byte[model.ImagePic.InputStream.Length] : null; 
       if (uploadedFile != null) 
       { 
        model.ImagePic.InputStream.Read(uploadedFile, 0, uploadedFile.Length); 
       } 
     Image image = new Image 
     { 
      ImageName = model.ImageName, 
      ImagePicInBytes = uploadedFile 
     } 
     db.Create(image); 
     db.SaveChanges(); 
     return RedirectToAction("Index"); 
    } 

    return View(model); 
} 

ainsi fo r votre méthode d'édition vous pouvez faire une mise en œuvre similaire mais au lieu de créer (image) utiliser Mettre à jour (image)