Telerik blogs

Simplify JavaScript control references in ASP.Net WebForms

by Jeffrey T. Fritz
January 21, 2013 Web, ASP.NET AJAX 0 Comments


One of the trickiest things that WebForms developers have to deal with is the management of HTML control identifiers by ASP.Net.  In versions of ASP.Net prior to 4, the id attribute of an HTML control would always be A Frustrated Developergenerated at run-time and developers had little chance of guessing what the value would be  If you were so lucky as to guess correctly, you would be able to properly reference your controls and life was good.  If the structure of your page ever changed, ASP.Net would happily generate a new and different id for you.   Now all of your client-side code is broken and that makes developers ANGRY!

In versions 4 and 4.5, we can now set a ClientIDMode property to force the control to have a more predictable identifier in the resultant HTML.  In this article, I am going to show you an easy JavaScript technique for always getting a reference to the rendered HTML controls.

When I am programming in JavaScript within a webforms page, I want to use the same object model names that I use when I am working in the server-side C#.  In a simple page with content that looks like this:

<telerik:RadTextBox ID="txtFirstName" runat="server" />
<telerik:RadTextBox ID="txtLastName" runat="server" />
Code Listing 1 - Sample controls to use in JavaScript

I want to write JavaScript to work with these controls that looks similar to this:

txtFirstName.ClientID;
Code Listing 2 - Desired JavaScript API

My strategy for dealing with this is to write a small JavaScript enclosure at the end of my webform and add controls to it as needed.  With this approach, you can change the behavior and position of the control within your webform without having to traverse any extra JavaScript files to identify and correct references.  The enclosure I would write for these controls would look like the following:

<script>
    var controls = new function () {
        return {
            txtFirstName: {
                UniqueID: "<%= txtFirstName.UniqueID %>",
                ClientID: "<%= txtFirstName.ClientID %>"
            },
            txtLastName: {
                UniqueID: "<%= txtLastName.UniqueID %>",
                ClientID: "<%= txtLastName.ClientID %>"
            }
        };
    }();
     
    var clientId = controls.txtFirstName.ClientID;
</script>
Code Listing 3 - The JavaScript enclosure to provide client-side references to server-side controls

Now, any time I have a new control that I want to maintain and work with in client-side JavaScript, I simply add an entry to my controls object and it is easily available to all referenced JavaScript libraries on the page through the controls JavaScript object.

I use this in many of my ASP.Net pages, especially pages that use AJAX controls that I want to make even more impressive for my end-users.

Is this a technique that you find useful?  Write back in the comments area below to let me know what you think.


About the Author

Jeffrey T. Fritz

Jeffrey T. Fritz is a Microsoft MVP in ASP.Net and an ASPInsider with more than a decade of experience writing and delivering large scale multi-tenant web applications. After building applications with ASP, ASP.NET and now ASP.NET MVC, he is crazy about building web sites for all sizes on any device. You can read more from Jeffrey on his personal blog or on Twitter at @csharpfritz. Google Profile


Comments

Comments are disabled in preview mode.