如何通过按钮单击绑定 Blazor 中的 textarea 值？

Posted 2023-05-07

【中文标题】如何通过按钮单击绑定 Blazor 中的 textarea 值？

【英文标题】：How to bind textarea value in Blazor from button click?

【发布时间】：2022-01-06 18:20:04

【问题描述】：

我有一个简单的页面：

@page "/"

<input id="Button1" type="button" value="button" onclick="setTA()"/>

<textarea id="taSrc" style="margin: 0px; width: 1331px; height: 400px; visibility:visible;" @bind="tahtml" @bind:event="oninput"></textarea>

<br /><br />@taHtml

@code

    private string taHtml = "";

和javascript：

    <script>

        function setTA() 
            document.getElementById('taSrc').value = "sdsdf sdfsdfsdfdf";
        

    </script>

如果我在 textarea 中手动输入，我可以看到字符按预期出现在两个中断标记之后。但如果我单击设置 textarea 值的按钮，则不会。那么问题来了，为什么？我也尝试过 onchange 而不是 oninput。

【问题讨论】：

首先，你为什么使用JavaScript？这是布拉泽尔。我们在这里不这样做。

因为我简化了我实际需要做的事情，所以从 iframe 获取 html 源代码。目前，我不知道如何从 iframe 服务器端获取 html 内容。所以javascript，我可以得到它，将它发送到一个textarea，然后我想通过绑定得到它的服务器。但如果你能告诉我如何获取 iframe 源代码服务器端，我很乐意听到。

您应该在问题中说明这一点。你是什​​么意思你不能得到 HTML 内容？您只需发送一个 GET 请求...您要实现什么目标？

绑定不行吗？如果可行的话，似乎是最简单的方法

【参考方案1】：

但如果我单击设置 textarea 值的按钮，则不会。那么问题来了，为什么？

您试图在 C# Blazor 代码和 JS 代码之间跳转，而无需通过 JsInterop。在可编辑字段上混合 JS 和 Blazor 代码非常危险。

在您展示的代码中，您不需要任何 JS。这是一个仅适用于 Blazor C# 的工作示例。

@page "/"
<input id="Button1" type="button" value="button" @onclick="setTA"/>

<textarea id="taSrc" style="margin: 0px; width: 1331px; height: 400px; visibility:visible;" @bind="taHtml" @bind:event="oninput"></textarea>

<br /><br />@taHtml

@code 
    private string taHtml = "";
    private int counter = 1;

    private void setTA()
    
        taHtml = $"Hello counter";
        counter++;
    

这回答了你的问题，但我猜这不是全部。为什么要在JS中设置textarea？

【讨论】：

...因为我真正拥有的是一个 iframe，里面的页面可以被编辑。所以我需要将该 iframe 的源代码发送到服务器以将其保存为文件。不，我真的不需要文本区域，但我只是想简化我需要为帖子做的事情。

Iframe 本质上是一个页面中的一个页面。 Blazor 外部页面的唯一交互是设置src 等操作。它无权访问内容。为什么要使用 IFrame？它为您提供了哪些表单控件无法实现的功能？

客户端想用所见即所得的方式实时编辑他们现有的网页，那么我们需要将编辑后的页面保存到服务器

回答这个问题超出了任何 *** 问题的范围！你靠自己@E.D.

这就是我将其简化为原始帖子的原因