asp.net-mvc - asp.net mvc tinymce 用法？

Question

脚本

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

模型

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

当我发布 View tinymce 编辑器内容时，它没有绑定(bind)到模型属性。其他属性绑定(bind)，只有 tinymce 没有。

我的意思是在 Controller 操作中

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

所有模型属性都是我预期的，只有 Body 属性不是。我错过了什么？

谢谢...

Answer 1

TinyMCE 的技巧在于它用 iframe 替换了文本区域。在标准 POST 的情况下，TinyMCE 自己处理原始文本区域的更新，但是当您使用 AJAX 时，您需要自己完成。它可以在您正在使用的 jQuery 表单插件的 beforeSerialize 回调中完成:

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