Realizar operaciones de creación en dos modelos a través de una acción

Question

Tengo dos modelos: Categoría y Imagen que se refiere a dos tablas, categorías e imágenes respectivamente. El modelo de categoría tiene una propiedad de navegación a modelo de imagen.

Ahora, creé un controlador que usaba la función de andamio con operaciones CRUD para la categoría. El siguiente es el código:-

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

Las acciones del controlador generadas automáticamente usan SelectList para enumerar las entradas de imagen disponibles en la base de datos y la pasa a DropdownList para la selección. Este no es el escenario ideal, ya que lo que quiero es no poder cargar el usuario para cargar la imagen y luego la referencia se agrega al modelo de categoría. Más tarde, las entradas se guardan en categorías e imágenes.

Answer 1

En primer lugar, me gustaría agradecer @NickLarsen Por hacerme creer que mi comprensión es bueno y puedo lograr la tarea yo mismo.

El problema no era tan difícil, pero como era nuevo en ASP.NET MVC, las cosas eran poco desconcertantes. Desde el principio, tuve la noción de que necesitaré una categoría de fusión de ViewModel y clases de precios y luego una API de carga de imágenes. Pero, de alguna manera no pude colocar las piezas en el lugar correcto. Por lo tanto, después de varias regresiones e investigaciones a través de Internet, logré la tarea de la siguiente manera:-

• En primer lugar, creé un ViewModel

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

• Segundo, agregué el Cargar API JavaScript

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

• Enganchó la API a seguir la función del servidor para cambiar el nombre y guardar en la carpeta

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

• Y por fin, reescribir la categoría Crear función como a continuación para guardar los cambios en 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

Crea modelo como este:

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

En vista:

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

}

Luego crea acción:

[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

Creo que la característica de andamios MVC ve la relación de dos modelos como "muchos para muchos". Es por eso que creó dos lista desplegable para usted. Según su escenario, puede hacer "categoría" Página de crear "Imagen" de datos del modelo porque "imagen" es la entidad principal aquí. Entonces, en la imagen, cree acción.

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

        return View(picture);
    }

En la página Ver imagen de Crear

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