tinyMCE.init({ language: "tr", elements: "Body", mode: "exact", height: 40...">

Using asp.net mvc tinymce?

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 publish the contents of the tinymce editor, it doesn't bind to the model property. Other properties are related, they are not different.

I mean 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 Body property. What am I missing?

Thank...

+3


source to share


1 answer


The trick with TinyMCE is that it replaces the iframe textbox. In the case of a standard POST, TinyMCE handles updating the original textbox on its own, but when you put AJAX into the game, you need to do it yourself. This can be done in beforeSerialize

the callback of the jQuery Form plugin you are using:



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

      

+2


source







All Articles