Question

我正在尝试做个人博客，我遇到了一个问题。我有强烈的表格来编辑我的文章。我能够更新标题，内容等简单列...但我不知道如何处理映射为多对多集合的标记集合。这里的最佳做法是什么？我可以使用一些HTML帮助器，如简单的列吗？或者我需要每次创建一个新的集合？老实说，我不知道。

模型类

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帮助程序来完成所有CRUD。

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

你可以看到我有一个带有一个输入元素的div和一个用于添加标签的按钮。因此，现在我们必须听取此按钮上的click事件并创建文本框的副本并将其添加到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");
}

具有集合

1 个答案: