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

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

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

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

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

编辑

尝试改用 asp:TextBox

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

Answer 2

如果您想在客户端执行此操作，您可以使用 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>

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

Using onChange Event in ASP.NET combined with Bootstrap

c#

asp.net

onchange

twitter-bootstrap