Wrap around javascript object to .Net usercontrol

Question

Hi all,

I have a question i don't know how to start with...

We all know that DOM elements have their own events such as 'onChange'. Well a TextBox can fire onChange events and anyone can register to them.

I have a .NET usercontrol with 2 textboxes (country code + phone). The textboxes are validated using a .NET CustomValidator. I have server-side methods to handle the control such as 'Value' witch gives-me a unique string with cc+phone.

What about client side? ...

I would like to wrap around the 2 textboxes and the customvalidator in a "javascript control". I would love to create functions to work with my control as an unique entity. What i would like to do was things like:

var x = document.getElementById('myControlId'); // where my control id was the wrap around x.value("+351875647356); // witch will fill the two text boxes respectively.

Is this possible? What the way to follow?

Thank U All.

Answer 1

It's possible to do wnat you want by creating a javascript object ala a c#/vb.net 1class to represent your control. Your javascript instance would keep references to the individual elements and you would use custom methods to do the heavy lifting.

<script>

function MyUserControl (ccID, phoneID) {

    // set references to elements
    var _ccInput = document.getElementById(ccID);
    var _phoneInput = document.getElementById(phoneID);

    this.setValues = function (value) {

        // TODO process your input here
        // _ccInput.value = ... ;
        // _phoneInput .value = ... ;
    }
}

</script>

You could create a new instance of the object by generating the javascript from the server side.

string script = string.format("var myControl = new MyUserControl('{0}','{1}');", 
    ccTextbox.ClientID, phoneTextbox.ClientID);
ClientScript.RegisterStartupScript(this.GetType(), "uniqueKeyName", script, true);

after it's created on the client side, you can reference it from some javascript.

<script>
    myControl.setValues("+351875647356");
</script>