代码之家 › 专栏 › 技术社区 › conterio

将带有图像的Html(WYSIWYG)发布到ASP。网络核心控制器

wysiwyg asp.net-core forms

conterio · 技术社区 · 7 年前

我在asp中将所见即所得内容发布到控制器时遇到问题。净核心。我似乎无法从表单编辑器中获得任何值。控制器的Content属性值为null。我正在使用summernote表单编辑器来处理richtext box编辑器。

这是我的密码

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

所以问题是,当我发布表单时,它会到达控制器,但内容是空的。我不知道如何发布内容

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

3 回复 | 直到 7 年前

Joe Audette 7 年前

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

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

您应该只使用asp,让它决定id和名称,而不是自己添加它们。

真正发布的是一个名为editordata的字符串,因为您在textarea上使用了该名称。将其删除,它将被命名为内容,以匹配模型的属性

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

Steve 5 年前

我一直坐在同一个问题,并能够解决它由于乔的回答!

我可以建议在文本区使用summernote类而不是使用您的id吗? 我注意到,当我使用id时,我的textarea的display属性没有设置为none,但当我使用class=“summernote”时,它可以工作。

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

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

Jaroslav 5 年前

将此脚本放在页眉中:

<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");
}