asp.net mvc的TinyMCE的使用情况如何？ [英] asp.net mvc tinymce usage?

问题描述

脚本

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

当我浏览后TinyMCE的编辑内容，它不绑定模型属性。其他属性绑定，ONY TinyMCE的不是。

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

控制器

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?

谢谢...

推荐答案

与TinyMCE的诀窍在于，它取代了与textarea的一个iframe。在标准的POST情况下，TinyMCE的本身处理原textarea的更新，但是当你把AJAX发挥作用，你需要自己去做。它可以在 beforeSerialize 来完成的jQuery插件形式的回调，您使用的是：

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

这篇关于asp.net mvc的TinyMCE的使用情况如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！