Durchführen von Erstellen von Operationen auf zwei Modellen über eine Aktion

Question

Ich habe zwei Modelle: Kategorie und Bild Das bezieht sich auf zwei Tabellen, Kategorien und Bilder. Das Kategoriemodell verfügt über eine Navigationseigenschaft zum Bildmodell.

Jetzt habe ich einen Controller erstellt, der eine Gerüstfunktion mit CRUD Operations for Category verwendet. Im Folgenden finden Sie den Code:-

public ActionResult Create()
{
    ViewBag.ParentCategoryId = new SelectList(db.Categories, "Id", "Name");
    ViewBag.PictureId = new SelectList(db.Pictures, "Id", "PictureUrl");
    return View();
}

Die automatisch generierten Controller -Aktionen verwendet Seleclist, um die verfügbaren Bildeinträge in der Datenbank aufzulisten, und übergeben sie für die Auswahl an DropdownList. Dies ist nicht das ideale Szenario, da das, was ich möchte, den Benutzer nicht kann, das Bild hochzuladen, und dann wird die Referenz zum Kategoriemodell hinzugefügt. Später werden die Einträge in der Tabelle Kategorien und Bilder gespeichert.

Answer 1

Zuallererst möchte ich danken @Nicklarsen Damit mich glauben, dass mein Verständnis gut ist und ich die Aufgabe selbst erreichen kann.

Das Problem war nicht zu schwierig, aber da ich bei ASP.NET MVC neu war, waren die Dinge ein bisschen verwirrend. Von Anfang an hatte ich die Vorstellung, dass ich eine ViewModel -Zusammenführungskategorie und Preisklassen und dann ein Bild -Hochladen -API benötigen werde. Aber irgendwie konnte ich die Stücke nicht an den richtigen Ort einfügen. Daher habe ich nach verschiedenen Regressionen und Forschungen über das Internet die Aufgabe auf folgende Weise erreicht:-

• Zunächst habe ich ein ViewModel erstellt

  public class CatPicView
  {
      public Category Category { get; set; }
      public Picture Picture { get; set; }
  }
  

• Zweitens habe ich das hinzugefügt Hochladen JavaScript -API

  <script type="text/javascript">
      $('#file_upload').uploadify({
          'uploader': '@Url.Content("~/uploadify/uploadify.swf")',
          'script': '@Url.Action("Upload", "Category")',
          'cancelImg': '@Url.Content("~/uploadify/cancel.png")',
          'buttonText': 'Upload',
          'folder': '@Url.Content("~/content/images")',
          'fileDesc': 'Image Files',
          'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
          'auto': true,
          'onComplete': function (event, ID, fileObj, response, data) {
                  var json = jQuery.parseJSON(response);
                  $("#pictureImage").html("<img src='"+json+"' alt='"+json+"' height='100px' width='100px'/>");
                  $("#Picture_PictureUrl").val(json);
                  $("#pictureRemove").show();
              }
          });
  </script>
  

• Setzte die API an die folgende Serverfunktion zum Umbenennen und Speichern im Ordner

  [HttpPost]
  public ActionResult Upload(HttpPostedFileBase fileData)
  {
      if (fileData != null && fileData.ContentLength > 0)
      {
          //var fileName = Server.MapPath("~/Content/Images/" + Path.GetFileName(fileData.FileName));
          int pictureCount = 800000;
          pictureCount += db.Pictures.Count();
          string extension = Path.GetExtension(fileData.FileName);
          string renamedImage = Server.MapPath("~/Content/Images/Categories/cat" + pictureCount + extension);
          fileData.SaveAs(renamedImage);
          return Json("/Content/Images/Categories/" + Path.GetFileName(renamedImage));
      }
      return Json(false);
  }
  

• Und schließlich hat die Kategorie erstellen, die die Funktion erstellen, um Änderungen an DB zu speichern

  [HttpPost]
  public ActionResult Create(CatPicView catPic)
  {
      if (ModelState.IsValid)
      {
          if (!String.IsNullOrEmpty(catPic.Picture.PictureUrl))
          {
              Picture picture = new Picture();
              picture.PictureUrl = catPic.Picture.PictureUrl;
              db.Pictures.Add(picture);
              catPic.Category.PictureId = picture.Id;
          }
          db.Categories.Add(catPic.Category);
          db.SaveChanges();
          return RedirectToAction("Index");
      }
      return View();
  }
  

Answer 2

Modell wie dieses erstellen:

public class FullCategoryModel
{
    public HttpPostedFileBase Picture { get; set; }
    public Category CategoryModel {get; set;}
}

Im Hinblick auf:

@using (Html.BeginForm("Create", "Category", FormMethod.Post, 
    new { enctype = "multipart/form-data" }))
{  
  @Html.TextBoxFor(model => model.Category.Name)      // example, put there all category details 
  <input type="file" name="Picture" id="Picture" />      
  <input type="submit" value="Upload" />    

}

Dann erstellen Sie Aktion:

[ActionName("Create")]
[HttpPost]
public ActionResult Create(FullCategoryModel model)
{
// here you can get image in bytes and save it in db, 
// also all category detail are avalliable here

MemoryStream ms = new MemoryStream();
model.Picture.InputStream.CopyTo(ms);
Image picture = System.Drawing.Image.FromStream(ms);

// save in db as separate objects, than redirect
return RedirectToAction("Index", "Category");
}

Answer 3

Ich denke, MVC -Gerüstfunktion sehen die Beziehung zweier Modelle als "viele zu vielen". Deshalb hat es zwei Dropdown -Liste für Sie erstellt. Nach Ihrem Szenario könnten Sie "Kategorie" durchführen, die Seite ohne "Bild" -Modelldaten erstellen, da "Bild" die Hauptentität hier ist. Also im Bild erstellen Aktion.

[HttpPost]
    public ActionResult Create(Picture picture)
    {
        if (ModelState.IsValid)
        {
            databaseContext.Pictures.Add(picture);
            databaseContext.SaveChanges();
            return RedirectToAction("Index");  
        }

        return View(picture);
    }

Auf der Ansichtsseite des Bildes erstellen

@model YourProjectName.Models.Picture
<h2>Create</h2>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Picture</legend>
    <div class="editor-label">
        @Html.LabelFor(model => model.Url)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Url)
        @Html.ValidationMessageFor(model => model.Url)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Categories.CategoryID, "Category")
    </div>
    <div class="editor-field">
        @Html.DropDownList("CategoryID", "Choose Category")
        @Html.ValidationMessageFor(model => model.Categories.CategoryID)
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}