将文本从 Kendo Editor 保存到数据库

Question

我有一个剑道编辑器，定义如下：

@(Html.Kendo().Editor()
                    .Name("myEditor")
                    .Tag("div")
                    .Tools(tools => tools
                            .Clear()
                            .Bold()
                            .Italic()
                            .Underline()
                            .Strikethrough()
                            .JustifyCenter().JustifyFull().JustifyLeft().JustifyRight()
                            .CreateLink().Unlink().TableEditing().FontColor().BackColor())
                     .Value(@<text>
                                Hello Kendo Editor <some text with html tags here>
                        </text>)
                )

然后我有两个仅对管理员显示的按钮 - 保存和编辑，它们的定义如下 -

<button type="button" id="btnedit">Edit</button>
 <input type="submit" name="btnSave"  id="btnSave" value="Save" class="btn btn-default" />

表单上还有另外两个提交按钮，如下所示 -

<input type="submit" name="btnAgree"  id="btnAgree"  value="Agree" class="btn btn-primary" />
<input type="submit" name="btnDisagree" id="btnDisagree" value="Disagree" class="btn btn-default" />

并且表单通过使用 BeginForm("ActionMethod", "Controller", FormMethod.Post) 来处理同意和不同意按钮的提交，如下所示 -

@using (Html.BeginForm("Index", "MyControllerName", FormMethod.Post))

现在我想要这样，当管理员用户进入并更改编辑器文本并点击“保存”按钮时，我希望编辑器的文本保存在数据库中。我可以处理储蓄部分。我只想知道，如何从 Kendo Editor 中获取文本并将文本值发送到控制器中的 action 方法。

我在这里尝试了此线程中提供的解决方案 - http://www.telerik.com/forums/save-changes-to-and-print-content-of-editor-in-mvc

因此，使用此处的解决方案，我添加了一个操作方法，其字符串参数名称类似于下面的编辑器名称 -

public ActionResult Save(string myEditor) {

// TO DO: Save the text to the database

 }

当我运行我的应用程序并点击“保存”按钮时，我收到以下错误 -

HTTP 错误 404.0 - 导航无效 您正在寻找的资源 已被删除、名称已更改或暂时不可用。

它没有点击“保存”操作方法。我怎样才能让它工作？

谢谢

Answer 1

我所做的是以下（对于迟到的回复已经抱歉）

$("form").on("submit", function () {
    var form = $(this);

    // for each editor in the form
    form.find("[data-role=editor]").each(function () {
        var editor = $(this).data("kendoEditor");

        // ... add value of the editor to a hidden input
        $("#Description").val(editor.value());
    });


    $.post(saveOrUpdateEditor, $('#contentEditorKendo').serialize(),
        function (data) {

        });
});

在执行此操作时，请务必将编辑器包装在一个表单中 如果您还有其他问题，请联系我们

Answer 2

您是否考虑过使用AJAX 调用来发送myEditor 的内容？

您需要将<input> type 属性更改为仅button，因此它不会被视为提交并连接onclick 事件处理程序：

<input type="button" name="btnSave"  id="btnSave" value="Save" class="btn btn-default" onclick="save()" />

然后连接将处理您的 AJAX 调用的相关 Javascript 函数：

function save() {
    var enteredText = $("#myEditor").data("kendoEditor").value();
    alert(editor.value());
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: 'yourController\Save',
        data: { "myEditor": JSON.stringify(enteredText) },
        success: function (response) {
            // handle a response following database operations
        },
    });
}); 

别忘了用相关的请求方法装饰你的控制器方法（在本例中为POST）：

[HttpPost]
public ActionResult Save(string myEditor) {
    // TO DO: Save the text to the database
}