模型未绑定在 HTTP 回发上

Question

我正在尝试创建文章列表。允许用户一次编辑一个并将其发布回数据库。我可以显示什么是好的，但是当表单发布时，模型没有绑定到 http 回发。我的代码如下。

我有以下 POCO 输入类：

public class ArticleInputModel
{
    public int articleID { get; set; }

    [AllowHtml]
    [DataType(DataType.MultilineText)]
    public string title { get; set; }

    [AllowHtml]
    [DataType(DataType.MultilineText)]
    public string content { get; set; }
}

以下控制器：

[ValidateInput(false)]
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Set(ArticleInputModel articleInputModel)
    {
        // Do Work
    }

还有以下观点：

@model List<TRN.DAL.Article>

<div class="container">
    @for (var articleIndex = 0; articleIndex < Model.Count; articleIndex++)
    {
        using (Html.BeginForm("Set", "Articles", FormMethod.Post))
        {
            <h1 id="title" class="editable mce-content-body" contenteditable="true" spellcheck="false" style="position: relative;">@Model[articleIndex].title</h1>
            <div id="content" class="editable mce-content-body" style="width: 100%; position: relative;" contenteditable="true" spellcheck="false">
                @Model[articleIndex].content
            </div>
            <div>
                <button type="submit" class="btn btn-trn">Submit</button>
            </div>
        }
    }
</div>

Answer 1

您没有呈现任何输入，因此没有要回发的值。您需要为要回发的属性包含隐藏输入，并使用 javascript 将隐藏输入的内容更新为可编辑元素的内容（或使用 AJAX 发布值）。

例如（请注意，您在循环中生成了重复的 ID，因此我使用了类名）

using (Html.BeginForm("Set", "Articles", FormMethod.Post))
{
  @Html.Hidden("title", Model[articleIndex].title, new { id = "title" + articleIndex })
  @Html.Hidden("content", Model[articleIndex].content, new { id = "content" + articleIndex })
  <h1 class="title editable mce-content-body" contenteditable="true" spellcheck="false" style="position: relative;">@Model[articleIndex].title</h1>
  <div class="content editable mce-content-body" style="width: 100%; position: relative;" contenteditable="true" spellcheck="false">@Model[articleIndex].content</div>
  <div>
    <button type="submit" class="btn btn-trn">Submit</button>
  </div>
}

脚本

$('form').submit(function() {
  // Get values of contenteditable elements
  var title = $(this).children('.title').text();
  var content = $(this).children('.content').text();
  // Update hidden inputs
  var inputs = $(this).children('input[type="hidden"]');
  inputs.eq(0).val(title);
  inputs.eq(1).val(content);
});