通過一個動作在兩個模型上執行創建操作

Question

我有兩個模型：類別和圖片它分別引用兩個表，類別和圖片。類別模型對圖片模型具有導航屬性。

現在，我創建了一個控制器，使用腳手架功能和類別的CRUD操作。以下是代碼： -

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

自動生成的控制器操作使用的SelectList在數據庫中列出了可用的圖片項，並將其傳遞到下拉列表選擇。這不是理想的情況，因爲我想要的是無法用戶上傳圖片，然後將引用添加到類別模型。稍後，條目將保存到「類別和圖片」表中。

Answer 1

首先，我要感謝@NickLarsen讓我相信，我的理解是好的，我可以實現自己的任務。

問題不是太強悍，但因爲我是Asp.net MVC的新手，事情有點令人費解。從一開始，我就有了一個概念，那就是我需要一個ViewModel合併Category和Price類，然後再上傳一個圖片上傳API。但是，不知何故，我無法將這些作品放在正確的位置。各種迴歸和研究在互聯網上後，因此，我在下面的方式實現的任務： -

• 首先，我創建了一個視圖模型

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

• 其次，我加了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> 
  

• 迷上API到以下服務器功能進行重命名並保存到文件夾

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

• ，最後，改寫了分類創建如下功能的更改保存到數據庫

  [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

我想MVC腳手架功能看到兩個模型的關係爲「多對多」。這就是爲什麼它爲你創建了兩個下拉列表。根據你的情況，你可以做「類別」創建頁面沒有「圖片」模型數據，因爲「圖片」是這裏的主要實體。所以在圖片中創建動作。

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

     return View(picture); 
    } 

在創建圖片

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

Answer 3

這樣創建模型視圖頁面：

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

鑑於：

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

}

然後創建行動：

所有的

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