Accessing Asp.net controls using jquery (all options)
<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.
How to get User Control ID and apply jQuery .click() function in asp.net
You could maybe try something like this:
<script type="text/javascript">
function pageLoad() {
var loc = window.location.href.split('/');
var page = loc[loc.length - 1];
$('ul.nav a').each(function (i) {
var href = $(this).attr('href');
if (href.indexOf(page) !== -1) {
$('ul.nav li.active').removeClass('active');
$(this).parent().addClass('active');
}
});
}
</script>
For UpdatePanels
I believe you can use the pageLoad
function instead of $(document).ready
accessing ASP.NET controls in Javascript
Send this control id of textbox instead of sending index as asp.net control id might not be as you expect,
In Code behind
ddl.Attributes.Add("onChange", "return OnFoodChange(this,'" + myTextBox[i].ClientID + "');");
In HTML
function OnFoodChange(myCmb,myTextBoxId) {
currentTextBox = document.getElementById(myTextBoxId);
//Your code...
}
getting selected value from .NET dropdown using JQuery
try
alert($('#<%=ddlReportPeriods.ClientID %> option:selected').text());
Related Topics
Wkwebkit JavaScript Execution When Not Attached to a View Hierarchy
How to Save a Leaflet Map with Drawn Shapes/Points on It in Shiny
Using Jquery Hover with HTML Image Map
How to Display PDF (Blob) on iOS Sent from My Angularjs App
Implement JavaScript Alert and Confirm on Wkuidelegate Swiftui
JavaScript Keycode VS Charcode
How to Use Ranges in a Switch Case Statement Using JavaScript
Retrieve Dom Target from Drag Callback When 'This' Is Not Available
What Are "Top Level JSON Arrays" and Why Are They a Security Risk
Embed a JavaScript Engine in an iOS Application
How to Use Source: Function()... and Ajax in Jquery UI Autocomplete
Elliptic Curve Cryptography with Sjcl in Js and Openssl in Ruby
Wkwebview - Complex Communication Between JavaScript & Native Code
Get Column from a Two Dimensional Array