Exécution de créer des opérations sur deux modèles par une seule action

Question

J'ai deux modèles: Catégorie et Image qui se réfère à deux tables, catégories et Images respectivement. Le modèle de la catégorie a une propriété de navigation modèle d'image.

Maintenant, je créé un contrôleur en utilisant la fonction d'échafaudage avec des opérations CRUD pour la catégorie. Voici le code: -

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

Les actions de contrôleur généré automatiquement utilisations SelectList pour la liste des entrées disponibles dans la base de données d'image et il passe jusqu'à dropdownlist pour la sélection. Ce n'est pas le scénario idéal de ce que je veux depuis est incapable de l'utilisateur de télécharger l'image, puis la référence est ajouté au modèle de la catégorie. Par la suite, les entrées sont enregistrées dans les catégories et table photos.

Answer 1

Tout d'abord, je voudrais remercier @NickLarsen pour me faire croire que ma compréhension est bonne et je peux réaliser la tâche moi-même.

Le problème était pas trop difficile, mais depuis que je suis nouveau à Asp.net MVC, les choses étaient peu déconcertant. Dès le début, j'ai eu l'idée que je vais avoir besoin d'une fusion ViewModel catégorie et les classes Prix et une API de téléchargement de l'image. Mais, d'une certaine manière je n'étais pas en mesure d'adapter les pièces en bonne place. Par conséquent, après diverses régression et de la recherche sur Internet, j'ai réalisé la tâche de manière suivante: -

• Tout d'abord, je créé un ViewModel

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

• En second lieu, j'ai ajouté le Uploadify 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>
  

• Hooked l'API à la fonction suivante du serveur pour renommer et enregistrer dans le dossier

  [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);
  }
  

• Et enfin, la catégorie réécrit fonction de création comme ci-dessous pour enregistrer les modifications à DB

  [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

Créer un modèle comme celui-ci:

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

En vue:

@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" />    

}

Ensuite, créez l'action:

[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

Je pense que la fonction de MVC voir la relation de deux modèles comme « Many to Many ». Voilà pourquoi il a créé deux liste déroulante pour vous. Selon votre scénario, vous pouvez le faire « Catégorie » créer la page sans données du modèle « image » parce que « l'image » est l'entité principale ici. Ainsi, dans l'image créer une action.

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

        return View(picture);
    }

Dans la page de vue de créer l'image

@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>
}