帶集合的模型類的強類型視圖

Question

我正在嘗試執行類似個人博客的操作，並且遇到問題。我強烈地鍵入了編輯我的文章的窗體。我能夠更新標題，內容等簡單的列......但我不知道如何處理映射爲多對多集合的標記集合。這裏最好的做法是什麼？我可以使用像簡單列的HTML助手嗎？或者需要我每次創建一個新的集合？老實說，我不知道。

Model類

public class Post : IEntity 
    { 
     public virtual int Id{ get; set; } 

     [Required(ErrorMessage = "Každý článek musí mít titulek")] 
     [MaxLength(250, ErrorMessage ="Nadpis může mít maximálně 250 znaků")] 
     public virtual string Title { get; set; } 
     public virtual string Annotation { get; set; } 
     [AllowHtml] 
     public virtual string Content { get; set; } 
     public virtual User Author { get; set; } 
     public virtual DateTime CreationDate { get; set; } 
     public virtual Rating Rating { get; set; } 
     public virtual string PreviewImageName { get; set; } 
     public virtual string ContentImageName { get; set; } 
     public virtual Category Category { get; set; } 

     public virtual IList<Tag> Tags { get; set; } 
     public virtual IList<BlogImage>Gallery { get; set; } 
    } 
} 

到目前爲止，我能夠做的所有CRUDs與HTML輔助這樣的。

<div class="form-group"> 
      <div class="col-sm-10"> 
       <label>Anotace</label> 
      </div> 
       <div class="col-sm-10"> 
        @Html.TextAreaFor(x => x.Annotation, new { @class = "form-control", @rows = 5 }) 
        @Html.ValidationMessageFor(x => x.Annotation) 
       </div> 
      </div> 
     <div class="form-group"> 
      <div class="col-sm-10"> 
       <label>Obsah</label> 
      </div> 
       <div class="col-sm-10"> 
        @Html.TextAreaFor(x => x.Content, new { @class = "form-control formatedText", @rows = 20 }) 
        @Html.ValidationMessageFor(x => x.Content) 
       </div> 
      </div> 

Answer 1

你基本上需要使用一些客戶端JavaScript來做直觀的用戶界面來處理用戶添加的這個集合屬性。它可以是一個項目或100個項目。

這是一個非常簡單的方法，它允許用戶在文本框中輸入帖子的每個標籤。用戶將能夠動態添加文本框以輸入帖子的標籤名稱。

假設您有一個像這樣的視圖模型來創建帖子。

public class PostViewModel 
{ 
    public int Id { set; get; } 
    public string Title { get; set; } 
    public List<string> Tags { set; get; } 
} 

你的觀點會被強類型到這個視圖模型

@model PostViewModel 
<h2>Create Post</h2> 
@using (Html.BeginForm("Create","Post")) 
{ 
    @Html.LabelFor(g=>g.Title) 
    @Html.TextBoxFor(f=>f.Title) 

    <button id="addPost">Add Tag</button> 
    <label>Enter tags</label> 
    <div id="tags"> 
     <input type="text" class="tagItem" name="Tags" /> 
    </div> 
    <input type="submit"/> 
} 

你可以看到，我有該標記一個輸入元素和一個按鈕來添加標籤的股利。所以現在我們必須聽這個按鈕上的點擊事件並創建一個文本框的副本並將其添加到dom中，以便用戶可以輸入第二個標籤名稱。將此javascript代碼添加到您的頁面

@section scripts 
{ 
    <script> 
     $(function() { 
      $("#addPost").click(function(e) { 
       e.preventDefault(); 
       $(".tagItem").eq(0).clone().val("").appendTo($("#tags")); 
      }); 
     }); 
    </script> 
} 

該代碼不言自明。當按鈕被點擊時，它克隆標籤名稱輸入的文本框並將其添加到我們的容器div中。

現在，當您提交表單時，Tags屬性將填充用戶在這些文本框中輸入的標籤名稱。現在您只需讀取發佈的值並將其保存到數據庫。

[HttpPost] 
public ActionResult Create(PostViewModel model) 
{ 
    var p = new Post { Title = model.Title }; 
    //Assign other properties as needed (Ex : content etc) 
    p.Tags = new List<Tag>(); 
    var tags = db.Tags; 
    foreach (var item in model.Tags) 
    { 
     var existingTag = tags.FirstOrDefault(f => f.Name == item); 
     if (existingTag == null) 
     { 
     existingTag = new Tag {Name = item}; 
     } 
     p.Tags.Add(existingTag); 
    } 
    db.Posts.Add(p); 
    db.SaveChanges(); 
    return RedirectToAction("Index","Post"); 
}