asp.net mvc tinymce usage?

Question

scripts

<script type="text/javascript">
    tinyMCE.init({
        language: "tr",
        elements: "Body",
        mode: "exact",
        height: 400,
        width: 600
    });
</script>

<script>
    $(function () {
        $('#form_post').ajaxForm({
            beforeSubmit: ShowRequest,
            success: SubmitSuccesful,
            error: AjaxError
        });
    });
</script>

html

@using (Html.BeginForm("_AddPost", "Posts", FormMethod.Post, new { id = "form_post" }))
{
     <div class="editor-label">
          <input type="file" name="File" id="File" />
     </div>

     <div class="editor-label">
         @Html.LabelFor(model => model.PostTypeId)
     </div>
     <div class="editor-field">
          @Html.DropDownListFor(model => model.PostTypeId, ViewBag.PostTypes as SelectList, "--- Haber Tipi ---", new { @class = "custom_select" })
      </div>
      <div class="editor-field">
          @Html.ValidationMessageFor(model => model.PostTypeId)
      </div>

      ...

      <div class="editor-label">
           @Html.LabelFor(model => model.Body)
      </div>
      <div class="editor-field">
           @Html.TextAreaFor(model => model.Body, new { @class = "custom_textarea" })
      </div>
      <div class="editor-field">
           @Html.ValidationMessageFor(model => model.Body)
      </div>

      <div class="editor-label">
           @Html.LabelFor(model => model.AuthorId)
      </div>
      <div class="editor-field">
           @Html.DropDownListFor(model => model.AuthorId, ViewBag.Authors as SelectList, "--- Yazarlar ---", new { @class = "custom_select" })
       </div>
       <div class="editor-field">
           @Html.ValidationMessageFor(model => model.AuthorId)
       </div>

       <div class="editor-label">
            @Html.LabelFor(model => model.IsActive)
       </div>
       <div class="editor-field">
            @Html.CheckBoxFor(model => model.IsActive)
       </div>
       <div class="editor-field">
            @Html.ValidationMessageFor(model => model.IsActive)
       </div>

       <div class="submit-field">
             <input type="submit" value="Ekle" class="button_gray" />
       </div>
}

model

public class PostViewModel
{
    public int Id { get; set; }

    ...

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Haber İçerik")]
    [AllowHtml]
    public string Body { get; set; }

    ...

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Haber Tipi")]
    public Nullable<int> PostTypeId { get; set; }

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Yazar")]
    public Nullable<int> AuthorId { get; set; }

    [Display(Name = "Kategori")]
    public Nullable<int> CategoryId { get; set; }

    ...

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Yayında")]
    [DefaultValue(true)]
    public bool IsActive { get { return true; } set { } }

    public HttpPostedFileBase File { get; set; }
}

when I post view tinymce editor content,it does not bind to model property. Other properties bind, ony tinymce not.

I mean in controller action

model.Title         // is my expected
model.Description   // is my expected
model.Body          // null

controller

public ActionResult _AddPost()
{
    using (NewsCMSEntities entity = new NewsCMSEntities())
    {
        // following lines are true. I can see dropdownlist values...
        ViewBag.PostTypes = new SelectList(entity.PostTypes.ToList(), "Id", "Name");
        ViewBag.Authors = new SelectList(entity.Authors.ToList(), "Id", "Name");
        ViewBag.Categories = new SelectList(entity.Categories.ToList(), "Id", "Name");

        return PartialView(new PostViewModel());
    }
}

[HttpPost]
public ActionResult _AddPost(PostViewModel viewModel)
{
    Posts post = new Posts();
    post = AutoMapper.Mapper.Map<PostViewModel, Posts>(viewModel);
    PostImages postImage = new PostImages();
    HttpPostedFileBase file = viewModel.File;

    using (NewsCMSEntities entity = new NewsCMSEntities())
    {
        if (ModelState.IsValid)
        {
             // add post to db
        }
        else
        {
            foreach (ModelState modelState in ViewData.ModelState.Values)
            {
                foreach (ModelError error in modelState.Errors)
                {
                     Console.WriteLine(error);
                     // error message model.Body is null
                }
        }
   }

All model properties are my expected only Body property is not. What am I missing?

Thanks...

Answer 1

The trick with TinyMCE is that it replaces the textarea with an iframe. In case of standard POST, the TinyMCE handles the updating of the original textarea by itself, but when you put AJAX into play you need to do it by yourself. It can be done in beforeSerialize callback of jQuery Form Plugin which you are using:

$(function () {
    $('#form_post').ajaxForm({
        beforeSerialize: function($form, options) { tinyMCE.triggerSave(); },
        beforeSubmit: ShowRequest,
        success: SubmitSuccesful,
        error: AjaxError
    });
});