使用Jquery显示Textbox值

时间:2012-03-17 23:36:40

标签: jquery asp.net webforms

我有一个带文本框的Asp.Net Webform。我试图在按钮单击时嵌入一些文本的文本区域中显示文本框服务器控件值的值。我不确定它的服务器控件是否在服务器问题或回发问题上运行,文本框的值不会填充在文本区域中。任何帮助将受到高度赞赏。提前谢谢。

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Button2').click(function () {
                $('#test').show();
                return false;
            });
        });

    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button2" runat="server" Text="Go" />



        <span id="test" style="display: none">
            <textarea id="showTextarea">
    This is new <%=TextBox1.Text %> from web form server control.
    </textarea>
        </span>
    </div>
    </form>
</body>
</html>

3 个答案:

答案 0 :(得分:2)

使用jQuery,

   $(function() {
        $('#Button2').click(function () {
            $('#showTextarea').val($("#TextBox1").val());
            return false;
        });
    });

如果您的TextBox 具有ID TextBox1 且您的文本区域具有ID showTextarea 并且您的按钮具有ID Button2 ,则此代码将起作用

在ASP.NET webforms中,如果您的控件位于其他ASP.NET控件(如面板等)中,则ID将不会完全相同。您可能需要检查ViewSource以验证它。

答案 1 :(得分:2)

这不是回发问题。 jQuery / javascript处理点击,当它返回false时表示不回发。

客户端

如果您想在文本框中显示值而不在服务器上执行任何操作,那么您应该只检索答案并返回false(或者您可以将事件添加到函数function(e) {然后执行一个e.preventDefault();

  $("#Button2").click(function () {
    $("#showTextarea").val("This is new " + $("#TextBox1").val() + " from web form server control");
    $("#test").show();
    return false;
  });

服务器端

如果您想在服务器端处理数据,您应该在aspx页面添加一个多行文本框,并默认将其设置为Visible="False"

<asp:TextBox ID="showTextarea" runat="server" TextMode="MultiLine" Visible="False"></asp:TextBox>

然后在代码后面跟着:

protected void Button2_Click(object sender, EventArgs e)
{
    showTextarea.Visible = true;
    showTextarea.Text = "This is new " + TextBox1.Text + " from web form server control.";
}

答案 2 :(得分:1)

    <script type="text/javascript">
    $(document).ready(function () {
        $('#Button2').click(function () {
            $('#showTextarea').val('This is new' + $('#TextBox1').val() + ' from web form server control');
            $('#test').show();
            return false;
        });
    });

</script>

<textarea id="showTextarea">

</textarea>