How to get javascript 'value' property for custom textbox control in asp.net
I created one custom control which contains TextBox as a child control (and contains some other controls also). After this I placed this control in a Page and I'm trying to get TextBox value(i.e text) through javascript. But I'm unable to get 'value' property directly.
Custom Control code:
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 CreateChildContro开发者_C百科ls()
{
Controls.Clear();
this.Controls.Add(objTextBox);
base.CreateChildControls();
}
#endregion
}
ControlDemo Page Code:
<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>
In ViewSource of the DemoPage, this control is rendering as a Span Element inside input Element
So I'm getting TextBox value if I write like this
document.getElementById('<%=MyTextBox1.ClientID%>').children[0].value
How to expose 'value' property like this: document.getElementById('<%=MyTextBox1.CleintID%>').value?
What you are doing is you are trying to get a value of MyTextBox1 which is not a textbox in fact, so it does not have a value.
What to do instead:
Version 1 - change your script to be like this:
<script type="text/javascript">
function met1() {
alert('<%=MyTextBox1.Text %>');
}
</script>
and this is quite enough to have a text in javascript.
Version 2 - add a property to your TextBox class like this:
public TextBox ObjTextBox
{
get { return objTextBox; }
}
then change your script like this:
<script type="text/javascript">
function met1() {
var objTextBox = document.getElementById('<%=MyTextBox1.ObjTextBox.ClientID %>');
alert(objTextBox.value);
}
</script>
this should also work.
I hope this helps!
加载中,请稍侯......
精彩评论