CodeMirror 绑定在 Blazor 应用程序中不起作用答案

【问题标题】：CodeMirror binding not working in Blazor AppCodeMirror 绑定在 Blazor 应用程序中不起作用
【发布时间】：2021-02-10 03:59:02
【问题描述】：

我正在开发一个使用代码编辑器的 Blazor Server 应用程序。对于代码编辑器，我使用的是 CodeMirror。文本区域在 Blazor 页面上呈现正常，但数据绑定不适用于相应的 C# 字段。

Blazor page screenshot

我的_Host.cshtml文件如下：

@page "/"
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp1</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    <script src="~/codemirror/codemirror.js"></script>
    <link rel="stylesheet" href="~/codemirror/codemirror.css">

    <script src="~/codemirror/mode/clike.js"></script>
    <script src="~/codemirror/addon/display/fullscreen.js"></script>
    <link rel="stylesheet" href="~/codemirror/addon/display/fullscreen.css">
    <link rel="stylesheet" href="/codemirror/theme/monokai.css">
    <script>
        function loadCodeEditor() {
            var codemirrorEditor = CodeMirror.fromTextArea(document.getElementById('codearea'), {
                lineNumbers: true,
                styleActiveLine: true,
                matchBrackets: true,
                mode: "text/x-csharp",
                theme: "monokai",
                extraKeys: {
                    "F11": function (cm) {
                        cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                    },
                    "Esc": function (cm) {
                        if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                    }
                }
            });
            codemirrorEditor.setSize(900, 300);
        }
    </script>

</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

剃须刀页面代码如下：

@page "/"
@inject IJSRuntime JSRuntime;

<h1>Hello, world!</h1>

Welcome to your new app.

<textarea id="codearea" rows="20" @bind="UserCodeInput" @bind:event="oninput" style="height:100px;"></textarea>

<SurveyPrompt Title="How is Blazor working for you?" />

Input Code: @UserCodeInput

@code{

    public string UserCodeInput { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("loadCodeEditor");
        }
    }
}

如果我从 textarea 属性中删除 id="codearea" 并注释掉 JSInterop 方法调用，则绑定工作正常。

请建议如何修复与 CodeMirror 的绑定。

【问题讨论】：

标签： blazor blazor-server-side codemirror

【解决方案1】：

最后，我可以将字段与 CodeMirror 编辑器绑定。感谢以下线程：

When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery

How to update c# value in Blazor using javascript?

我必须在调用 JavaScript 函数时传递 DotNet 对象引用，然后在 JavaScript 函数中使用 CodeMirror 的 onchange 事件来调用 C# 方法并传递代码编辑器的值。

以下是更新后的文件以及工作代码：

_Host.cshtml

@page "/"
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp1</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    <script src="~/codemirror/codemirror.js"></script>
    <link rel="stylesheet" href="~/codemirror/codemirror.css">

    <script src="~/codemirror/mode/clike.js"></script>
    <script src="~/codemirror/addon/display/fullscreen.js"></script>
    <link rel="stylesheet" href="~/codemirror/addon/display/fullscreen.css">
    <link rel="stylesheet" href="/codemirror/theme/cobalt.css">
    <link rel="stylesheet" href="/codemirror/theme/monokai.css">
    

</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>



    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">?</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script>
        function loadCodeEditor(dontNetObjRef) {
                var codemirrorEditor = CodeMirror.fromTextArea(document.getElementById('codearea'), {
                    lineNumbers: true,
                    styleActiveLine: true,
                    matchBrackets: true,
                    mode: "text/x-csharp",
                    theme: "monokai",
                    extraKeys: {
                        "F11": function (cm) {
                            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                        },
                        "Esc": function (cm) {
                            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                        }
                    }
                });
            codemirrorEditor.setSize(900, 500);
            codemirrorEditor.on("change", editor => {
                dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
                console.log(editor.getValue());
            });
            }
    </script>
</body>
</html>

剃须刀页面：

@page "/"
@inject IJSRuntime JSRuntime;

<h1>Hello, world!</h1>

Welcome to your new app.

<textarea id="codearea"></textarea>

<SurveyPrompt Title="How is Blazor working for you?" />

<br />
<br />

Input Code: @UserCodeInput

@code{

    public string UserCodeInput { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {

            await JSRuntime.InvokeVoidAsync("loadCodeEditor", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable("UpdateField")]
    public Task UpdateField(string codeValue)
    {
        UserCodeInput = codeValue;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

【讨论】：