1

私はasp.net mvcを初めて使用し、単純なWebサイトを作成しようとしています. 多対多の関係を持つタグの投稿があります。msdn oh how to do多対多のチュートリアルを読みましたが、理解していません。私がやりたいことは、新しい投稿を作成するときに、この Web サイト (stackoverflow) で投稿を作成する方法とまったく同じように、投稿にキーワードをタグ付けする機能を持っていることだけです。タグテキストボックスでjqueryの自動選択を行い、アイテムが作成されると、テーブルの結合で適切なエントリが作成されます。

だから私の質問は：

  1. タグテキストフィールドに jquery オートコンプリートを設定する方法
  2. 選択したタグを使用して新しい投稿を作成する方法 (結合テーブル内)

チェックボックスからタグを選択する多対多の作成の例をいくつか見てきましたが、選択するタグが数百あるため、この状況では実用的ではありません。

public class Post
{
    public int PostId { get; set; }
    public string Title { get; set; }
    public string Content {get; set;}
    public virtual ICollection<Tag> Tags { get; set; }
}

public class Tag
{
    public int TagId { get; set; }
    public int Title { get; set; }
    public virtual ICollection<Post> Posts { get; set; }
}

public class PostEntities : DbContext
{
    public DbSet<Post> Posts { get; set; }
    public DbSet<Tag> Tags { get; set; }
}

そして作成コントローラー（自動生成）：

 [HttpPost]
    public ActionResult Create(Post post)
    {
        if (ModelState.IsValid)
        {
            db.Posts.Add(post);
            db.SaveChanges();
            return RedirectToAction("Index");  
        }

        return View(post);
    }

かみそり:

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Post</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Title)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Content)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Content)
        @Html.ValidationMessageFor(model => model.Content)
    </div>
    <div>
        <h3>Tags</h3>
        @Html.TextBoxFor(model => model.Tags, new { @id = "NewTags" })
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

}

4

2 に答える 2

1

テキストボックスを複数選択項目として使用する場合は、 selected のような jquery プラグインが必要です。次に、次のようなviewModelを作成できます。

public class PostViewModel
{
    public Post Post { get; set;}
    public virtual ICollection<Tag> Tags { get; set; }
    public virtual ICollection<Tag> relatedTags { get; set; }

//in the constructor you can initialize the list
// with all the tags available in your system
public PostViewModel()
{
        foreach (var tagin new dbContext().Tags.GetList())
        {
            Tags.Add(tag);
        }
}

}

次に、コントローラーで：

[HttpPost]
public ActionResult Create(PostViewModel post)
{
    if (ModelState.IsValid)
    {
        //Enumerate over the related tags selected from view 
        //and add the coincidences to the entity post.Post
        IEnumerator<String> it = post.relatedTags.GetEnumerator();
        while (it.MoveNext())
            post.Post.Tags.Add(db.Tags.Single(tag => tag.TagId == it.TagId));

        //Then you can save your changes to DB
        db.Posts.Add(post.Post);
        db.SaveChanges();
        return RedirectToAction("Index");  
    }

    return View(post);
}

ビューは次のようになります。

@Html.ListBoxFor(model => model.relatedTags, new MultiSelectList(Model.Tags, "TagId", "Title"),
         new { data_placeholder = "Select related tags", style = "width:300px;", id = "relatedTagsToPost" })

ID「relatedTagsToPost」が選択され、次のように初期化されます。

$("#relatedTagsToPost").chosen();

それだけです。私のプロジェクトからあなたの質問に合わせて調整しただけではテストされていません。

于 2012-06-13T13:42:34.963 に答える
0

ヴィックの答えは良い解決策ですが、定義済みまたはリモートでロードされたリストからタグを選択するだけでなく、新しいタグを追加することもできるため、オートコンプリート jQuery プラグインを好みます...

見てみましょう： http://jqueryui.com/autocomplete/#multiple

次に、コントローラーのコードを少し編集して、入力タグを「」で分割し、データベースに保存する必要があります。

于 2012-11-21T10:55:22.330 に答える