Question

我正在尝试将包含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.]

有什么想法吗？

Answer 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引起的。

Answer 2

您的错误表明您尝试在控制器操作中绑定的模型需要像

这样的构造函数

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

您的视图中看起来似乎没有'表单'可以在第一时间回发。我感觉彼此之间存在多个错误，而无参数构造函数只是第一个错误。

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

2 个答案: