无法序列化包含用于 Ajax 调用的 tinymce 编辑器的表单答案

【问题标题】：Unable to serialize a form that contains a tinymce editor for an Ajax call无法序列化包含用于 Ajax 调用的 tinymce 编辑器的表单
【发布时间】：2012-12-18 11:16:00
【问题描述】：

我正在尝试将包含 tinyMCE 编辑器实例的表单发布到使用 AJAX 的操作方法。我的观点：

<script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>

<div>
    <fieldset>
       @using (Html.BeginForm("SubmitNewTRForm", "LaboratoriesOrdersGrid", FormMethod.Post,
            new {enctype = "multipart/form-data", @id = "newTrUploadForm" }))
            {
                <div  style="overflow: hidden;width: 763px; height:312px;  border: black solid thin;">
                      @Html.TextAreaFor(model => model.TestSummary, new {@class="TestSummaryEditor"})
                </div>
             }

    </fieldset>
</div>

在同一个视图中我实例化了编辑器：

    $(document).ready(function () {
        tinyMCE.init({
            directionality: "rtl",
            width: "760",
            height: "300",
            language: 'fa',
            // General options
            mode: "textareas",
            theme: "advanced",
            plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
            // Theme options
            theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,sub,sup,|,charmap,iespell,advhr,|,print,|,fullscreen",
            theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor,|,insertlayer,moveforward,movebackward,absolute,|,blockquote,pagebreak,|,insertfile,insertimage,|,visualchars,nonbreaking,template",
            theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,ltr,rtl,|,cite,abbr,acronym,del,ins,attribs",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,
            // Skin options
            skin: "o2k7",
            skin_variant: "silver",
            add_form_submit_trigger: false,
            // Example content CSS (should be your site CSS)
            content_css: "css/example.css",
            // Drop lists for link/image/media/template dialogs
            template_external_list_url: "js/template_list.js",
            external_link_list_url: "js/link_list.js",
            external_image_list_url: "js/image_list.js",
            media_external_list_url: "js/media_list.js",
            // Replace values for the template plugin
            template_replace_values: {
                username: "Some User",
                staffid: "991234"
            }
        });

    });

还有我的 AJAX 调用：

        $("form").live('submit', function (e) {
            tinyMCE.triggerSave(true, true);
            e.preventDefault();

    var form = $("#newTrUploadForm");
            if (form.valid()) {
                    $.ajax({
                        url: '@Url.Action("SubmitNewTRForm")',
                        data: form.serialize(),
                        type: 'POST',
                        error: function (xhr, textStatus, exceptionThrown) {
                            $("#errorDIV").html(xhr.responseText);
                        },
                        success: function (data) {
                            if (data.success) {

                            }
                            else {

                            }
                        }
                    });
                }
        });

每当 tinyMCE 编辑器在表单上时，我的 AJAX 调用总是返回错误，删除 tinyMCE 可以解决问题，但为什么会发生这种情况？我知道这个问题已经在 SO 上解决了几次，但是我已经尝试了所有提出的解决方案，但似乎没有一个对我有用，而且这些解决方案有些过时了。在我的 AJAX 调用的序列化过程中，我收到此错误：

[MissingMethodException: No parameterless constructor defined for this object.]

有什么想法吗？

【问题讨论】：

您可以发布您要发布到的控制器和操作吗？
@PlTaylor 这无关紧要，因为电话甚至没有达到行动，我现在发现了这个问题。该错误是由于在我的模型中设置了 SelectLists 并且表单返回了 SelectListItem。我想通的tinyMCE问题，看我的回答。

标签： ajax asp.net-mvc tinymce

【解决方案1】：

我发布的错误和 tinyMCE 问题恰好完全无关。 tinyMCE 问题是通过在阻止按钮单击的默认操作后保存内容来解决的，基本上将我的 AJAX 调用从：

   $("form").live('submit', function (e) {
        tinyMCE.triggerSave(true, true);
        e.preventDefault();

到：

   $("form").live('submit', function (e) {
       e.preventDefault();
       tinyMCE.triggerSave(true, true);

格式正确序列化，编辑器的内容完美地发送到操作中。

与这个问题完全无关，但发布的错误是由by setting my model property's type as SelectList and the form posting a SelectListItem引起的。

【讨论】：

【解决方案2】：

您的错误表明您尝试在控制器操作中绑定的模型需要像这样的构造函数

public yourModel
{
    public yourModel()
    {
        //your logic here
    }
}

您的视图中似乎也没有要发回的“表单”。我感觉有多个错误叠加在一起，无参数构造函数只是第一个。

【讨论】：