1

我是 asp.net mvc 的新手，正在尝试创建一个简单的网站。有一个带有标签的帖子具有多对多关系。我已经阅读了msdn上的教程哦，如何做多对多，但我不明白。我想要做的就是在创建新帖子时，能够使用关键字标记帖子，就像在此网站上创建帖子的工作方式（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

如果您想将文本框用作多选项目，则需要一个 jquery 插件，例如 selected 。然后你可以有一个 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

Vic 的回答是一个很好的解决方案，但我更喜欢 Autocomplete jQuery 插件，因为您还可以添加新标签，而不仅仅是从预定义或远程加载的列表中选择标签......

看看：http: //jqueryui.com/autocomplete/#multiple

然后，您必须编辑一点控制器的代码，用“，”分割输入标签，然后将它们保存在数据库中。

于 2012-11-21T10:55:22.330 回答