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

Question

I'm having trouble posting my wysiwyg content to my controller in asp.net core. I can't seem to get any value from the form editor. The value for the Content property comes to the controller as null. I'm using the summernote form editor to handle my richtext box editor.

Here is my code

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

Controller:

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

View:

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

So the issue is when I post the form it's gets to the controller but the content comes over as null. I'm not sure how to post the content

Here are my thoughts, I'm thinking i'm missing a some attribute that allows html to come over the wire to my controller, but all the reserach i've found is that asp.net core doesn't require that. Or I need to handle this type of request in the middleware pipeline, but that doesn't make much sense since it's just html strings i'm sending over the wire to the controller.

Answer 1

It looks like the top of your view was not left out, I assume you have Editor as model.

The problem is on your text area you are using both asp-for and then setting the id and name to something that doesn't match your model property.

You should just use asp-for and let it decide the id and name instead of adding those yourself.

What is really getting posted is a string named editordata because you used that name on the textarea. remove that and it will be named Content to match the property of the model

You also don't need the [Bind] attribute shown in the controller action in your screenshot.