将 Html 带有图像（所见即所得）发布到 ASP.net 核心控制器

Question

我在 post 将我的所见即所得内容传送到 asp.net 核心中的控制器时遇到问题。我似乎无法从表单编辑器中获得任何价值。 Content 属性的值作为 null 传给控制器。我正在使用 summernote 表单编辑器来处理我的富文本框编辑器。

这是我的代码

public class Editor
{        
    public int EditorId { get; set; }
    public string Content { get; set; }
}

控制器：

 [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create(Editor editor)
    {
        if (ModelState.IsValid)
        {
              _context.Add(editor);
              await _context.SaveChangesAsync();
              return RedirectToAction(nameof(Index));
        }
        return View(editor);
    }

查看：

    <h2>Create</h2>

<h4>Editor</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Content" class="control-label"></label>
                <textarea asp-for="Content" id="summernote" name="editordata"></textarea>
                <span asp-validation-for="Content" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {

    <script>
        $(document).ready(function () {
            $('#summernote').summernote();
        });
    </script>
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

}

@section Styles{ 
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <!-- include summernote css/js -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
}

所以问题是当我 post 表单到达控制器但内容为空时。我不确定如何 post 内容

这是我的想法，我想我缺少一些允许 html 通过电线连接到我的控制器的属性，但我发现的所有研究都是 asp.net 核心不需要那个。或者我需要在中间件管道中处理这种类型的请求，但这没有多大意义，因为它只是 html 字符串，我正在通过线路发送到控制器。

Answer 1

看起来你的视图顶部没有被遗漏，我假设你有编辑器作为模型。

问题出在您同时使用 asp-for 的文本区域，然后将 ID 和名称设置为与您的模型不匹配的内容属性。

您应该只使用 asp-for 并让它决定 ID 和名称，而不是您自己添加。

真正发布的是一个名为 editordata 的字符串，因为您在文本区域中使用了该名称。删除它，它将被命名为 Content 以匹配模型

的属性

您也不需要屏幕截图中控制器操作中显示的 [Bind] 属性。

Answer 2

我一直遇到同样的问题，由于 Joe 的回答，我得以解决！

我可以建议为文本区域处理 summernote class 而不是使用您的 ID 吗？我注意到当我使用 id 时我的文本区域的显示属性没有设置为 none，但是当我使用 class="summernote".[=11 时它起作用了=]

<textarea asp-for="Instructions" class="summernote"></textarea>

<script>
    $(document).ready(function () {
        $('.summernote').summernote();
    });
</script>

Answer 3

将此脚本放在您的页面头部：

<script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>

假设您有一个名为 ForumModel 的模型，您可以在其中保存编辑器的内容。属性您保存内容的位置称为答案：

public string Answer { get; set; }

所以在你看来你有以下标签：

@model ForumModel

因此，如果您想添加编辑器：

<textarea id="editor1" asp-for="@Model.Answer" class="form-control" required=""></textarea>
<script>
    CKEDITOR.replace("editor1");
</script>

现在剩下的就是在提交按钮上调用控制器。提交表单后，您将转到保存内容的构造函数。

public IActionResult Reply(ForumModel forumModel)
{
  forumModel.SaveReply();
  return RedirectToAction("SomeRandomPage");
}

将 Html 带有图像（所见即所得）发布到 ASP.net 核心控制器

Posting Html with images (WYSIWYG) to ASP.net core controller

forms

wysiwyg

asp.net-core