.NET 6 Blazor WASM绑定Textarea含HTML时内容被截断问题

问题背景 #

使用.NET 6 Blazor WASM开发时，textarea通过@bind绑定变量，粘贴普通文本无论长短都能正常赋值，但粘贴数千字符的网站HTML源码时，内容会被截断——仅保留首尾部分，中间显示…，最终字符串长度通常在1000-1200字符左右。原生JavaScript直接提取textarea的值完全正常，且该功能2-3个月前可正常工作，近期突然失效，期间未手动更新框架或Visual Studio 2022。

可能原因 #

Blazor双向绑定底层处理大文本时，可能触发了默认的消息大小限制、调试模式下的内容截断优化，或是浏览器更新导致的绑定逻辑兼容性问题。

解决方案 #

1. 绕过Blazor绑定，用JS互操作手动取值 #

既然原生JS能获取完整内容，直接弃用@bind，在需要时调用JS获取值：

• 在wwwroot目录下创建interop.js文件，添加取值函数：

window.getFullTextareaValue = (elementId) => document.getElementById(elementId).value;

• 在index.html中引入该脚本：

<script src="interop.js"></script>

• 修改Blazor组件代码，注入IJSRuntime并在按钮点击时调用JS获取内容：

<form>
    <label for="pasteHtml">Paste HTML code here</label>
    <textarea id="pasteHtml" rows="3"></textarea>
</form>
<button @onclick="ParseHtml"> Parse HTML</button>

@code {
    private string pastedHtml = "";

    [Inject]
    private IJSRuntime JsRuntime { get; set; }

    private async Task ParseHtml()
    {
        pastedHtml = await JsRuntime.InvokeAsync<string>("getFullTextareaValue", "pasteHtml");
        // 此处编写你的HTML解析逻辑
    }
}

2. 调整SignalR消息大小（托管模式适用） #

若你的项目是Blazor WASM托管模式（依赖ASP.NET Core后端），双向绑定通过SignalR通信，可能是后端SignalR的消息大小限制导致截断：
在后端Program.cs中添加SignalR配置：

builder.Services.AddSignalR(options =>
{
    options.MaximumReceiveMessageSize = 1024 * 1024; // 设置为1MB，可根据需求调整
});

3. 验证是否为调试工具显示截断 #

部分调试工具（如浏览器控制台、Blazor调试面板）会对长字符串进行显示截断，但实际变量值是完整的。可在ParseHtml中添加日志验证：

private void ParseHtml()
{
    Console.WriteLine($"实际内容长度：{pastedHtml.Length}");
    Console.WriteLine($"开头500字符：{pastedHtml.Substring(0, 500)}");
    Console.WriteLine($"结尾500字符：{pastedHtml.Substring(pastedHtml.Length - 500)}");
    // 此处编写你的HTML解析逻辑
}

若日志显示长度正常，仅显示时出现…，则无需修改代码，仅为调试工具的显示优化。

4. 检查NuGet依赖是否自动更新 #

虽然未手动更新框架，但NuGet依赖可能通过Visual Studio自动更新提示完成了升级。可在项目的NuGet包管理器中查看Microsoft.AspNetCore.Components.WebAssembly相关包的版本，尝试回退到2-3个月前的版本验证是否恢复正常。

内容的提问来源于stack exchange，提问作者veix