Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
167 views
in Technique[技术] by (71.8m points)

javascript - Accessing Asp.net controls using jquery (all options)

How to access asp.net control using jquery

<asp:TextBox runat="server" ID="myTextBox" />

$('#myTextBox') wouldn't work.

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

<asp:TextBox runat="server" ID="myTextBox" />

The above aspx code when rendered on a page changes to

<input type="text" id="ctl00_Main_myTextBox" name="ctl00$Main$myTextBox" />

This is because the master and control information in which the .net control resides gets prepended which makes it a little tricky for us to write a selector.

You have a few options. This is by no means comprehensive, but I will give it a try.

Option1:

$('#<%= myTextBox.ClientID %>')

Use the ClientID - recommended but meh.. not so much. I would try to avoid writing ClientID if I could. The primary reason being, you can only use it in .aspx pages and not external .js files.

Option2:

$('[id$=myTextBox]') // id which ends with the text 'myTextBox'

$('[id*=myTextBox]') // id which contains the text 'myTextBox'

Using attribute selectors - recommended too, looks a bit ugly but effective.

I have seen a few questions here, worrying about performance with these selectors. Is this the best way possible? No.

But, most of the time you won't even notice the performance hit, unless of course, your DOM tree is huge.

Option3:

Using CssClass - highly recommended. Because selectors using classes are clean and uncomplicated.

In case you are wondering, CssClass for .net controls is the same as class for traditional html controls.

<asp:TextBox runat="server" ID="myTextBox" CssClass="myclass" /> //add CssClass

$('.myclass') //selector

Option4:

Use ClientIDMode="Static", which got introduced in .NET Framework 4.0, on the control so that it's ID will stay unchanged. - recommended too.

<asp:TextBox runat="server" ID="myTextBox" ClientIDMode="Static"  /> //add ClientIDMode

$('#myTextBox') //use the normal ID selector

Note: In my experience, I have seen ugly selectors like $('#ctl00_Main_myTextBox'). This is the result of directly copy pasting the ID rendered from the page and use it in the script. Look, this will work. But think about what will happen if the control ID or the master ID changes. Obviously, you will have to revisit these IDs and change them again. Instead of that, use one of the options above and be covered.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...