2013-02-19 75 views
3

腳本asp.net mvc tinymce的用法?

<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沒有。

我的意思是在控制器動作

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

所有模特屬性是我的預期僅機身財產是沒有的。我錯過了什麼?

謝謝...

+0

能告訴你的要求,如螢火看到:它可以在beforeSerialize回調的jQuery插件形式的,其使用的是做什麼? – 2013-02-19 11:09:21

+0

我使用Ajax後,我得到500錯誤(內部服務器錯誤)。我調試它我得到模型狀態錯誤(身體不應該爲空) – 2013-02-19 11:39:35

+0

你可以顯示您的請求有效載荷如在FireBug中看到? – 2013-02-19 11:44:15

回答

2

與TinyMCE的巧妙之處在於它取代textarea的與iframe中。在標準POST的情況下,TinyMCE自己處理原始文本區域的更新,但是當你將AJAX放置時,你需要自己完成。

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

太棒了!非常感謝......這個訣竅非常重要。 – 2013-02-19 14:18:06