在asp.net中使用UpdatePanel的CodeMirror

本文关键字：UpdatePanel CodeMirror asp net | 更新日期: 2023-09-27 17:51:19

我在ASP中使用CodeMirror。. NET web应用程序。web应用程序使用UpdatePanel (ajax)。在ajax回发中，我无法从服务器端的CodeMirror文本框中获取更新的文本，回发后，文本被重置。这工作，如果我不使用更新面板。我错过了什么?

下面是代码镜像代码:

 editor = CodeMirror.fromTextArea(document.getElementById("<%=txtLua.ClientID%>"), {
                matchBrackets: true,
                theme: "neat",
                pollInterval: 100,
                continuousScanning: 500
            });
<asp:UpdatePanel ID="upd" runat="server">
        <ContentTemplate>
            <asp:TextBox runat="server" ID="txtLua" Height="320" Width="600" TextMode="MultiLine"></asp:TextBox>
            <asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="btn" />
        </ContentTemplate>
</asp:UpdatePanel>

是否有使用CodeMirror的asp.net/C#示例?

在asp.net中使用UpdatePanel的CodeMirror

简短的回答是:创建一个javascript事件钩子，在UpdatePanel开始工作之前触发，并手动调用CodeMirror的.save()函数。

这个问题似乎出现了，因为CodeMirror提供的自动魔术form.submit覆盖被触发在 ScriptManager已经将面板的ViewState传递回服务器之后。这意味着服务器只接收处于初始状态的TextBox (CodeMirror还没有将您输入的内容放入其中)。我检查了Chrome中的DOM事件和ScriptManager的钩子始终领先于CodeMirror添加的form.submit覆盖。

我通过在codemmirror加载后向提交按钮添加.onclick来解决这个问题。使用您的示例:

var editor = CodeMirror.fromTextArea(document.getElementById("<%=txtLua.ClientID%>"), {
            leaveSubmitMethodAlone: true,  //since you don't need this anymore, no reason to complicate your DOM
            matchBrackets: true,
            theme: "neat",
            pollInterval: 100,
            continuousScanning: 500
        });
window['cmLocalStateEvent'] = function () { editor.save(); };
//saveButton = document.getElementById("<%=btn.ClientID%>");  //grab the save button
//if (saveButton) {
//    saveButton.onclick = function () { editor.save(); };  //make it do what the submit action was going to do 
//}
<asp:UpdatePanel ID="upd" runat="server">
    <ContentTemplate>
        <asp:TextBox runat="server" ID="txtLua" Height="320" Width="600" TextMode="MultiLine"></asp:TextBox>
        <asp:Button ID="btn" runat="server" OnClientClick="if(window['cmLocalStateEvent'])window.cmLocalStateEvent();" OnClick="btn_Click" Text="btn" />
    </ContentTemplate>
</asp:UpdatePanel>

现在.onclick在ScriptManager钩子之前，并将首先触发。事实上，如果你把OnTextChanged=和AutoPostBack=放在文本框上，它会在你刚刚点击的按钮之前触发。

本质上，诀窍是在 ScriptManager将ViewState提交回服务器之前，让CodeMirror的保存应用。

编辑:

我发现自从张贴这个，你会遇到一个麻烦的问题，如果你的提交按钮也在UpdatePanel(你的是)。初始提交后，.onclick不会持续存在，您将被重置为没有事件钩子的干净按钮。我目前对该场景的工作解决方案是添加window['cmLocalSaveEvent']函数并将客户端.onclick添加到ASP模板中(因此面板刷新将其放回给您)。

这就是我如何设法使它工作，只是以防有人需要它。实例化editor后，每次blur事件发生时，我都保持文本框对齐。

editor.on('blur', function () {
    arguments[0].save();
});
相关文章：