Grabbing asp.net controls in javascript

Question

I have a page where it is getting overwhelmed with code like:

var textBox = $get("<%=textState.ClientID%>");

This requires me to have my JavaScript inside the page instead of nicely tucked in a js file. Is there a better approach to this?

document.getElementById doesn't work because then I end up with code like this:

var textBox = document.getElementById("originDestinationControl_textState");

or

var textBox = document.getElementById("ctl00_ContentPlaceHolder_originDestinationControl_textState");

depending on where I am referencing these controls (inside master pages and/or usercontrols)

Oscar Kilhed · Accepted Answer · 2010-02-12 07:04:31Z

3

I normally stick something like this into pages where I want to use a separate js file.

<script type="text/javascript">
    var pageNameElements = {
        textbox : '<%= textbox.ClientId %>',
        button : '<%= button.ClientId %>'
    };
</script>

This way you get a nice javascript object with all the control ids that you can use in your js file like this.

$('#' + pageNameElements.textbox)

or

document.getElementById(pageNameElements.textbox)

if you're not using jquery.

edited Feb 12, 2010 at 7:04

answered Feb 11, 2010 at 18:29

Oscar Kilhed

1,8161 gold badge14 silver badges16 bronze badges

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

2 Comments

Boone Over a year ago

Actually this isn't working for me. I'm getting null JS File: var myTextBox = document.getElementById(pageOriginElements.textOriginMultiState); alert(myTextBox); ASCX: <script type="text/javascript"> var pageOriginElements = { textOriginMultiState : '<%=textOriginMultiState.ClientID%>', textOriginMultiStateCountry : '<%=hiddenOriginMultiStateCountry.ClientID%>' };

Oscar Kilhed Over a year ago

Make sure the function in the JS file is getting executed after the object containing the element-ids has been created, i.e. add the js file just before the </body> tag, or use the jQuery $(document).ready() function to execute it when the dom is ready.

Jagd · Accepted Answer · 2010-02-11 18:32:39Z

2

Might I suggest learning jQuery? Since I started using it I have never once had to deal with messy asp tags to get at controls on the page.

var textBox = $get("<%=textState.ClientID%>");

would look something like

var textBox = $("input[id$='_textState']");

in jQuery. And even better, you can place it into it's own js file!

answered Feb 11, 2010 at 18:32

Jagd

7,34623 gold badges77 silver badges107 bronze badges

Comments

Keith Adler · Accepted Answer · 2010-02-11 18:23:05Z

1

With .NET 4.0 you actually have total control over this:

http://www.codeproject.com/KB/aspnet/ASP_NET4_0ClientIDFeature.aspx

It has hit Release Candidate along with Visual Studio 2010. I know this isn't an ideal solution, but it is one.

http://msdn.microsoft.com/en-us/vstudio/dd582936.aspx

answered Feb 11, 2010 at 18:23

Keith Adler

21.2k29 gold badges123 silver badges193 bronze badges

Comments

AaronS · Accepted Answer · 2010-02-11 18:25:43Z

0

I think you're stuck.

Your textState.ClientId code needs to stay on the aspx page itself. This is because it's rendered client side. JavaScript include files are downloaded separately from the rest of the page, so it won't know how to handle it.

If you need to clean this up, you could try using classic asp style include files. However, in asp.net they end up adding more of a mess than they fix.

answered Feb 11, 2010 at 18:25

AaronS

7,7445 gold badges34 silver badges57 bronze badges

Collectives™ on Stack Overflow

Grabbing asp.net controls in javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related