コレクション付きモデルクラス用の厳密な型指定

Question

私は個人的なブログのようなことをしようとしていますが、問題が発生しました。私は私の記事の編集のために強く型付けされたフォームを持っています。 title、contentなどの単純な列を更新することはできますが、多対多のコレクションとしてマップされているタグのコレクションをどのように処理するかはわかりません。ここでベストプラクティスは何ですか？単純な列のような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; } 
    } 
} 

は、これまでのところ私は、これらのようなHTMLヘルパーをすべてCRUDsを行うことができました。

<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のいくつかのクライアント側を使用する必要があります。 1つのアイテムまたは100のアイテムにすることができます。

これは非常に簡単な方法で、投稿の各タグをテキストボックスに入力することができます。ユーザーは動的にテキストボックスを追加して、投稿のタグ名を入力することができます。

あなたの投稿作成​​のために、このようなビューモデルがあるとします。

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

あなたのビューは強くあなたは私が一つの入力タグの要素とタグを追加するためのボタンでdiv要素を持っていることがわかります。このビューモデルに

@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に追加して、ユーザーが2番目のタグ名を入力できるようにしなければなりません。あなたのページにこのjavascriptコードを追加してください

コードは自明です。ボタンをクリックすると、テキストボックスにタグ名のエントリがクローンされ、コンテナ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"); 
}