in this article I will explain the jQuery selector for ASP.Net control i.e. How to select ASP.Net controls using jQuery.
The below code snippet explains how to select ASP.Net Server Control like Button, TextBox, DropDownList, CheckBox, RadioButton, CheckBoxList, RadioButtonList, GridView, Repeater, etc. using jQuery
ASP.Net Page not using Master Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var button = $("[id$=Button1]");
var textbox = $("[id$=TextBox1]");
alert(button.attr("id"));
alert(textbox.attr("id"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
ASP.Net Page using Master Page
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var button = $("[id$=Button1]");
var textbox = $("[id$=TextBox1]");
alert(button.attr("id"));
alert(textbox.attr("id"));
});
</script>
</asp:Content>
Explanation:
jQuery has provided its different wild card operators which we can use to search ASP.Net Server Controls whose ClientID changes when Master Pages are used. Also it will help users find ASP.Net Server controls from external JS files.
[id$=Button1] – (Ends With) Will match the suffix i.e. the ID must end with the search string
[id^=Button1] – (Starts With) Will match the prefix i.e. the ID must start with the search string
[id*=Button1] – (Contains) Will search for the match search string in the whole ID