c# - 在 ASP.NET 中结合使用 onChange 事件和 Bootstrap

Question

我想创建两个文本区域。第一个文本区域应该由用户使用。每次用户更改 textarea 值时都应检查并在另一个文本区域中给出。我试图在 bootrstrap 中添加 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

如果你想在客户端执行此操作，你可以使用 onchange 事件和 javascript 代码，如下所示

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>