Post CKEDITOR value to action in Asp.net Core

Question

Im using CKEditor 4 and Im going to post ckeditor html value to Action. but when i click on submit buttom and model post to action the ckeditor value posted null value.

View :

<form asp-controller="Book" asp-action="AddEditBook" id="addeditbook" data-ajax="true" 
  data-ajax-method="POST" data-ajax-update="#addeditbook" data-ajax-mode="replace">


<div class="modal-body form-horizontal">
    <div class="row">

        <div class="form-group">
            <label asp-for="BookName" class="col-lg-2 col-sm-2 control-label"></label>
            <div class="col-lg-6">
                <input asp-for="BookName" class="form-control" />
                <span asp-validation-for="BookName" class="text-danger"></span>
            </div>
        </div>

        <div class="form-group">
            <label asp-for="BookDescription" class="col-lg-2 col-sm-2 control-label"></label>
            <div class="col-lg-9">
                <textarea id="editor1" name="editor1" asp-for="BookDescription" class="form-control"></textarea>
                <span asp-validation-for="BookDescription" class="text-danger"></span>
            </div>

            <script type="text/javascript">
                CKEDITOR.replace('editor1');
            </script>
        </div>
    </div>
</div>


<input type="submit" value="submit"/>

}

Model:

 public class AddEditBookViewModel
{
    [Key]
    public int BookId { get; set; }

    [Display(Name = "Book Name:")]
    [Required(ErrorMessage = "Enter Book Name")]
    public string BookName { get; set; }

    [Display(Name = "Book Description:")]
    [Required(ErrorMessage = "Enter Book Description")]
    public string BookDescription { get; set; }
}

Controller :

   [HttpPost]
    public IActionResult AddEditBook(AddEditBookViewModel model)
    {
        if (ModelState.IsValid)
        {
                using (var db = _iServiceProvider.GetRequiredService<ApplicationDbContext>())
                {
                    Book bookModel = Mapper.Map<AddEditBookViewModel, Book>(model);
                    db.books.Add(bookModel);
                    db.SaveChanges();
                }
                return view("index");
        }
}

How can i post ckeditor html value to action to save or edit?

Answer 1

Forms post back the name/value pairs of its successful form controls and the ModelBinder binds your model based on those values. Your model contains a property named BookDescription but you have overwritten the name attribute generated by the TagHelper (which is name="BookDescription") and given it name="editor1" which is not the name of a property in your model.

Remove the name="editor1" attribute so that you input is

<textarea id="editor1" asp-for="BookDescription" class="form-control"></textarea>

As a side note, the TagHelper also generated id="BookDescription" by default, and there is no need to overwrite that attribute either. You could also delete the id="editor1" attribute and the script would then be

CKEDITOR.replace('BookDescription');