Unable to gain access to custom textbox property through javascript

Question

I have made a custom textbox that inherits from textbox.

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

    namespace GNB.DPS.MVAD.CustomWebControls
    {
        [Designer("GNB.DPS.MVAD.CustomWebControls.MVADTextBox, GNB.DPS.MVAD.CustomWebControls"), DefaultProperty("Text"), ToolboxData("<{0}:MVADTextBox runat=server></{0}:MVADTextBox>")]
        public class MVADTextBox : TextBox
        {
            public virtual string SampleText
            {
                get
                {
                    string s = (string)ViewState["SampleText"];
                    return s ?? String.Empty;
                }
                set
                {
                    ViewState["SampleText"] = value;
                }
            }

            [Bindable(false)]
            [Category("Properties")]
            [DefaultValue("")]
            [Localizable(true)]
            public string Mask
            {
                get
                {
                    String tblName = (String)ViewState["Mask"];
                    return (Mask ?? String.Empty);
                }

                set
                {
                    ViewState["Mask"] = value;
                }
            }

            protected override void OnLoad(EventArgs e)
            {
                if(!Page.IsPostBack)
                {
                    if(Text == String.Empty)
                    {
                        if (SampleText != "")
                        {
                            CssClass = "sampleText";
                            this.Text = SampleText;
                            var onFocus = "<script language=\"javascript\">function ClearField(input) { if(input.value == input.defaultValue){input.value = \"\"; input.className = 'regularText';} } </script>";
                            var onBlur = "<script language=\"javascript\"> function PopulateField(input) {if (input.value == \"\") {input.value = input.defaultValue; input.className = 'sampleText'; } } </script>";

                            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "OnFocus", onFocus);
                            this.Attributes.Add("onfocus", "ClearField(this);");

                            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "OnBlur", onBlur);
                            this.Attributes.Add("onblur", "PopulateField(this);");
                        }
                    }
                }
            }
        }
    }

On the .aspx it can be used as such...

<script language="javascript">
    function MaskInput(input) {
        var textbox = document.getElementById(input.id);
        var mask = textbox.getAttribute('Mask');

    } 
</script>

    <MVAD:MVADTextBox ID="tbMVAD2" runat="server" SampleText="Hello" Mask="###-###" onKeyPress="MaskInput(this);" />

However... this line returns null var mask = textbox.getAttribute('Mask');

in the view source we see...

<input name="ctl00$cphListBody$tbMVAD2" type="text" value="Hello" id="ctl00_cphListBody_tbMVAD2" class="sampleText" onKeyPress="MaskInput(this);" onfocus="ClearField(this);" onblur="PopulateField(this);" />

notice how there is no property in the source called Mask or Sample Text. Therefore I can't access the property through javascript. Is my control set up properly? Any Ideas?

llullulluis · Accepted Answer · 2011-11-28 14:20:13Z

1

I think you have a big confusion between client and server side. "Mask" attribute is only on .NET (server side) and you are trying to read it from javascript (client side). The "mask" attribute is not rendered. You can modify "OnLoad" method to add it or simply pass the attribute on the event as suggested by Gabriel's answer.

protected override void OnLoad(EventArgs e)
{
    if(!Page.IsPostBack)
         {
             if(Text == String.Empty)
             {
                 if (SampleText != "")
                 {
                            CssClass = "sampleText";
                            this.Text = SampleText;
                            var onFocus = "<script language=\"javascript\">function ClearField(input) { if(input.value == input.defaultValue){input.value = \"\"; input.className = 'regularText';} } </script>";
                            var onBlur = "<script language=\"javascript\"> function PopulateField(input) {if (input.value == \"\") {input.value = input.defaultValue; input.className = 'sampleText'; } } </script>";

                            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "OnFocus", onFocus);
                            this.Attributes.Add("onfocus", "ClearField(this);");

                            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "OnBlur", onBlur);
                            this.Attributes.Add("onblur", "PopulateField(this);");

                            this.Attributes.Add("Mask", this.Mask);
                        }
                    }
                }
            }

EDIT:

public string Mask
            {
                get
                {
                    String tblName = (String)ViewState["Mask"];
                    return (Mask ?? String.Empty); // This is causing your stack overflow...
                }
            }

edited Nov 28, 2011 at 14:20

answered Nov 28, 2011 at 14:07

llullulluis

3,5023 gold badges30 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

joncodo Over a year ago

"You can modify "OnLoad" method to add it" How is this done? this.Attributes.Add("Mask", Mask);this.Attributes.Add("SampleText", SampleText); When I tried this I got a stackoverflow exception on this line... String tblName = (String)ViewState["Mask"];

llullulluis Over a year ago

Also take a look at your Mask getter method, as its implementation does not make sense. Review it because is what is causing your stack overflow. I have edited my answer.

joncodo Over a year ago

tyvm! This was the problem.get { String m = (String)ViewState["Mask"]; return (m ?? String.Empty); }

Gabriel Gartz · Accepted Answer · 2011-11-28 14:03:38Z

0

Put your mask inside the function like this:

<script language="javascript">
    function MaskInput(input, mask) {
        var textbox = document.getElementById(input.id);
    } 
</script>

    <MVAD:MVADTextBox ID="tbMVAD2" runat="server" SampleText="Hello" onKeyPress="MaskInput(this, '###-###');" />

Your custom attribute have beans ignored by your asp.net application when constructing the view.

answered Nov 28, 2011 at 14:03

Gabriel Gartz

2,87024 silver badges24 bronze badges

1 Comment

joncodo Over a year ago

That would work for sure but I want the code to be hidden. The final goal here is to not have onkeypress in the textbox but to just have Mask="###-###" as an attribute on the textbox. I plan to add the onkeypress attribute to the control through the .cs of the control in the onload method. Like I did for sample text. I wanted to do onKeyPress="MaskInput(this, Mask); but this does not work.

Collectives™ on Stack Overflow

Unable to gain access to custom textbox property through javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related