Question

我的视图中有一个fieldset，用户可以在创建帖子的同时创建一个Tags列表，可以在创建时选择并在我的多对多关系中关联使用Post的EF会在保存帖子时在Post中创建Tag和PostTagMap之间的关系。但是我想在视图中添加一个额外的字段，这样用户也可以创建＆＃34;一个标签（在名称中键入）以及选择标签，但我无法弄清楚我的jQuery中的最后一个问题，以使其工作。

查看：

@model MyBlogger.Models.Post
@using(Html.BeginForm())
{
  // controls for Post
  ....
  <div id="tags">
    for (int i = 0; i < tag.Count; i++)
    {
      var id = string.Format("tag{0}", tag[i].Id);
      var isChecked = tag[i].IsAssigned ? "checked" : null;
      <div class="tag">
        <input id="@id" type="checkbox" name="selectedTags" value="@tag[i].Id" @isChecked />
        <label for="@id">@tag[i].Name</label>
      </div>
    }
  </div>
  <button id="addtag" type="button">Add new tag</button>
  <div id="dialog" style="display:none">
  @Html.Action("CreateTag")
}

帖子控制器：

// Returns a partial view with a form to create a new Tag
[ChildActionOnly]
public ActionResult CreateTag()
{
  Tag model = new Tag();
  return PartialView(model);
}

[HttpPost]
public ActionResult CreateTag(Tag model)
{
  // Save the Tag
  db.Tags.Add(model);
  db.SaveChanges();
  return Json(new { ID = model.Id, Name = model.Name });
}

部分视图：

@model MyBlogger.Models.Tag
@using(Html.BeginForm())
{
  // controls for Tag
  ....
  <button id="createtag" type="button">Create</button>
}

PostController中

[ChildActionOnly]
public ActionResult CreateTag()
{
  Tag model = new Tag();
  return PartialView(model);
}

[HttpPost]
public ActionResult CreateTag(Tag model)
{
  // Save the Tag
  db.Tags.Add(model);
  db.SaveChanges();
  return Json(new { ID = model.Id, Name = model.Name });
}

脚本

var dialog = $('#dialog');
var tags = $('#tags');
var url = '@Url.Action("CreateTag")';
$('#addtag').click(function() {
  dialog.show();
});
$('#createtag').click(function() {
  var form = $(this).closest('form');
  $.post(url, form.serialize(), function(data) {
    if(data) {
      var id = tags.children('.tag').length;
      var div = $('<div></div>').addClass('tag');
      .... stuck here
      div.append($('<label></label>').attr('for', id).text(data.Name));
      tags.append(div);
      form.get(0).reset(); // reset controls to their defaults
      dialog.hide(); // hide the dialog
    }

Answer 1

在控制器中创建其他方法，以创建新的Tag

PostController中

// Returns a partial view with a form to create a new Tag
[ChildActionOnly]
public ActionResult CreateTag()
{
  Tag model = new Tag();
  return PartialView(model);
}

[HttpPost]
public ActionResult CreateTag(Tag model)
{
  // Save the Tag
  db.Tags.Add(model);
  db.SaveChanges();
  return Json(new { ID = model.Id, Name = model.Name });
}

部分视图

@model MyBlogger.Models.Tag
@using(Html.BeginForm())
{
  // controls for Tag
  ....
  <button id="createtag" type="button">Create</button>
}

主视图

@model MyBlogger.Models.Post
@using(Html.BeginForm())
{
  // controls for Post
  ....
  <div id="tags">
    // not sure what you trying to do with you existing code, but
    for (int i = 0; i < tag.Count; i++)
    {
      var id = string.Format("tag{0}", tag[i].Id);
      var isChecked = tag[i].IsAssigned ? "checked" : null;
      <div class="tag">
        <input id="@id" type="checkbox" name="selectedTags" value="@tag[i].Id" @isChecked />
        <label for="@id">@tag[i].Name</label>
      </div>
    }
  </div>
  <button id="addtag" type="button">Add new tag</button>
  ....
}
<div id="dialog" style="display:none">
  @Html.Action("CreateTag")
</div> // outside main form tags!

脚本

var dialog = $('#dialog');
var tags = $('#tags');
var url = '@Url.Action("CreateTag")';
$('#addtag').click(function() {
  dialog.show();
});
$('#createtag').click(function() {
  var form = $(this).closest('form');
  $.post(url, form.serialize(), function(data) {
    if(data) {
      var id = tags.children('.tag').length;
      var div = $('<div></div>').addClass('tag');
      div.append($('<input/>').val(data.ID).attr({ type: 'checkbox', name: 'selectedTags', id: id }).prop('checked', true));
      div.append($('<label></label>').attr('for', id).text(data.Name));
      tags.append(div);
      form.get(0).reset(); // reset controls to their defaults
      dialog.hide(); // hide the dialog
    }
  });
});

有关如何设置对话框样式以及标记复选框及其标签的示例，请参阅this fiddle

附注：

我强烈建议您开始使用视图模型来表示您需要在视图中显示/编辑的属性。
表格用于表格数据，而不是布局。

EditorFor Field for List对象映射到不同的模型？

1 个答案: