在 ASP.NET 中结合 Bootstrap 使用 onChange 事件

Question

我想创建两个文本区域。 第一个文本区域应该由用户使用。 每次用户更改 textarea 值时，都应该检查它 并在另一个文本区域中发出。 我试图在引导程序中添加runat="server" 和onChange="fTextChanged" 文本区域控件。 这是我的用户控件：

<div class="row">
	<div class="form-group">
		<label for="ToTranslate">Text to translate:</label>
		<textarea class="form-control" runat="server" onChange="fTextChanged" rows="5" id="ToTranslate"></textarea>
	</div>
</div>

<div class="row">
	<div class="form-group">
		<label for="TranslatedText">Translated text:</label>
		<textarea class="form-control" runat="server" rows="5" id="TranslatedText"></textarea>
	</div> 
</div>

这是我的代码隐藏：

public void fTextChanged(object sender, EventArgs e)
{
    string Content = ToTranslate.Value;
    TranslatedText.Value = Content;
}

我尝试调试它，但编译器（网站？）似乎忽略了该功能。 我的VS2017不要停在断点处：

Content = ToTranslate.Value;

我完全是网络编程的新手，我只是习惯了 C#、C++ 和 LabView。 希望各位好心人能帮帮我。

亲切的问候！

编辑：
改变：

<textarea class="form-control" runat="server" onChange="fTextChanged" rows="5" id="ToTranslate"></textarea>

收件人：

<asp:TextBox class="form-control" ID="ToTranslate" runat="server" OnTextChanged="fTextChanged" AutoPostBack="true" TextMode="MultiLine" Rows="5"></asp:TextBox>

效果很好。

Answer 1

如果您想在客户端执行此操作，您可以使用带有 JavaScript 代码的 onchange 事件，如下所示

function KeyUp()
{
        var ToTranslate = document.getElementById("ToTranslate");
        var s = ToTranslate.value;
    
        var TranslatedText = document.getElementById("TranslatedText");
        TranslatedText.innerText = ""+s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="row">
        <div class="form-group">
            <label for="ToTranslate">Text to translate:</label>
            <textarea class="form-control" runat="server" rows="5"  id="ToTranslate" onKeyPress="KeyUp()" onKeyUp="KeyUp()"></textarea>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
            <label for="TranslatedText">Translated text:</label>
            <textarea class="form-control" runat="server" rows="5"  id="TranslatedText"></textarea>
        </div> 
    </div>

如果您应该使用 服务器端代码，那么我会将 html 控件转换为 asp.net 控件，如下所示，因为您只能在 asp.net 控件上找到服务器端事件（而不是非常确定，我会检查的）；

<asp:TextBox ID="ToTranslate" runat="server" OnTextChanged="fTextChanged" AutoPostBack="true" ClientIDMode="Static"  TextMode="MultiLine" Rows="5"></asp:TextBox>

Answer 2

尝试将属性AutoPostBack="True" 添加到您的textarea

AutoPostBack 指定当控件失去焦点时是否自动回发到服务器。在您的情况下，没有发生回发，因此您的服务器端方法没有被命中。

我个人会坚持使用客户端并使用 JavaScript 来做类似的事情，但每个人都有自己的！

编辑

尝试改用asp:TextBox

<asp:TextBox id="ToTranslate" OnTextChanged="fTextChanged" TextMode="multiline" Columns="50" Rows="5" runat="server" />