如何在asp.net中获取自定义文本框控件的javascript“值”属性答案

【问题标题】：How to get javascript 'value' property for custom textbox control in asp.net如何在asp.net中获取自定义文本框控件的javascript“值”属性
【发布时间】：2011-07-31 11:35:36
【问题描述】：

我创建了一个自定义控件，其中包含 TextBox 作为子控件（还包含一些其他控件）。在此之后，我将此控件放在 Page 中，并尝试通过 javascript 获取 TextBox 值（即文本）。但我无法直接获取“价值”属性。

自定义控件代码：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Web.UI.WebControls; 

namespace AjaxServerControlDevelopment 
{ 
    public class MyTextBox: CompositeControl 
    { 
        /// <summary> 
        /// TextBox reference variable 
        /// </summary> 
        public TextBox objTextBox; 


        /// <summary> 
        /// The TextChanged event 
        /// </summary> 
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Design", "CA1009:DeclareEventHandlersCorrectly")] 
        public event EventHandler TextChanged; 

        /// <summary> 
        /// The ButtonClick event 
        /// </summary> 
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Design", "CA1009:DeclareEventHandlersCorrectly")] 
        public event EventHandler<EventArgs> ButtonClick; 


            #region Class constructors 


    /// <summary> 
    /// Default constructor 
    /// </summary> 
    public MyTextBox() 
    { 
        ////Instantiates the wrapped control 

        objTextBox = new TextBox(); 

        objTextBox.TextChanged += new EventHandler(objTextBox_TextChanged); 


    } 
        #endregion 

    void objTextBox_TextChanged(object sender, EventArgs e) 
    { 
        if (TextChanged != null) 
        { 
            TextChanged(this, e); 
        } 
    } 


    #region Property:Text 
    /// <summary> 
    ///       Gets or sets the Text of TngTextBox 
    /// Returns: 
    ///     A System.String Object. The default value is System.Null 
    /// </summary> 
    public string Text 
    { 

        get 
        { 

                return objTextBox.Text; 

        } 

        set 
        { 

                objTextBox.Text = value; 

        } 


    } 
    #endregion 

      #region ChildControls 
    /// <summary> 
    /// Allows us to attach child controls to our composite control 
    /// </summary> 
    protected override void CreateChildControls() 
    { 
        Controls.Clear(); 
        this.Controls.Add(objTextBox); 
        base.CreateChildControls(); 
    } 
      #endregion 
}

控件演示页面代码：

<head runat="server"> 
<title></title> 
<script type="text/javascript"> 
    function met1() { 
        var objTextBox = document.getElementById('<%=MyTextBox1.ClientID %>'); 
        //alert(objTextBox.children[0].value); 
        alert(objTextBox.value); 
    } 
</script>

    <cc1:MyTextBox ID="MyTextBox1" runat="server" /> 
    <br /> 

    <asp:Button ID="Button1" OnClientClick="met1();" runat="server" Text="Button" /> 

</form>

在 DemoPage 的 ViewSource 中，此控件呈现为 Span Element 内 input Element

所以如果我这样写，我会得到 TextBox 值

document.getElementById('<%=MyTextBox1.ClientID%>').children[0].value

如何像这样公开'value'属性：document.getElementById('').value？

【问题讨论】：

我认为提供的 sn-p 不正确或不完整。我没有看到您在页面标记中插入 MyTextBox1 的位置。
是 Tengiz，MyTextBox1 控件放置在标记页中。它看起来像这样

标签： asp.net sharepoint custom-controls

【解决方案1】：

你正在做的是你试图获得一个 MyTextBox1 的值，它实际上不是一个文本框，所以它没有一个值。

该怎么做：

版本 1 - 将您的脚本更改为：

<script type="text/javascript"> 
    function met1() { 
        alert('<%=MyTextBox1.Text %>'); 
    } 
</script>

这足以在 javascript 中包含文本。

第 2 版 - 向您的 TextBox 类添加一个属性，如下所示：

public TextBox ObjTextBox
{
    get { return objTextBox; }
}

然后像这样更改您的脚本：

<script type="text/javascript"> 
    function met1() { 
        var objTextBox = document.getElementById('<%=MyTextBox1.ObjTextBox.ClientID %>'); 
        alert(objTextBox.value); 
    } 
</script>

这也应该有效。

我希望这会有所帮助！

【讨论】：

您好 Tengiz，感谢您的回复。我想向我的控件用户模拟普通 TextBox 的相同行为。我的控件用户不应该认为这是一个复合控件。您建议的两种方法都可以正常工作。但是我必须像 document.getElementById(''); 这样写当compiste控件呈现时，我们的子控件将默认由SPAN元素包裹。当MyTextBox1中输入的文本必须将此文本分配给包裹的SPAN元素的'value'属性时，有什么办法吗？（'value'属性由添加writer.addAttribute() 在 Render 方法中
不，span 的 value 属性是不正确的。我知道这适用于某些浏览器（如 IE），但不适用于其他浏览器（如 Mozilla）。我想在这种情况下，您将需要创建自己的文本框，而不是作为一个组合，而是从头开始作为一个成熟的文本框控件。一般来说，value 属性只对输入控件有意义，例如文本框、按钮、文本区域...
您好 Tengiz，谢谢您的回复。我使用了您建议的版本 2。它在正常的 asp.net 页面中运行良好。但是，如果我将“MytextBox”和“按钮”放在 updatePanel 中，那么如果我单击按钮，javascript 函数就会第一次工作。 [即 var objTextBox = document.getElementById('');警报（objTextBox.value）； --- 给出了我在 MyTextBox 中输入的任何内容;])。有什么想法吗？
这应该与更新面板有关。单击按钮时更新面板会发生什么？
当我将这两个（MyTextBox 和 Button）都放在更新面板中时，当我单击按钮时，只有页面的那部分（这两个控件）会转到服务器（即会发生部分回发） .但我真的不明白为什么 document.getElementById('myclientid') 从第二次点击开始变成 null。