In this article I will explain how to get Client ID of ASP.Net control in JavaScript and jQuery. This problem starts happening once we use Master Page as the ID of controls are changed on client side which makes it impossible to find an of ASP.Net control using JavaScript.
Getting Client ID of ASP.Net control using jQuery
You need to add a new JS file to your project and name it ClientID.js. Once the file is added copy the following code into the JS file.
Finally you need to reference the JS file in your project where you need to get the ClientID.
//Load jQuery
var script = document.createElement("SCRIPT");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
document.getElementsByTagName("head")[0].appendChild(script);
function GetClientID(asp_net_id) {
return $("[id$=" + asp_net_id + "]").attr("id");
};
The above script will load jQuery dynamically and using the GetClientID function we can easily determine the Client ID of any ASP.Net control.
jQuery has provided its different wild card operators which we can use to search ASP.Net controls
[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.
Note: If you have already referenced jQuery in your project then you can directly use the GetClientID function by removing the script that dynamically loads jQuery.
Examples
Script on page
In the following HTML Markup, consists of ASP.Net TextBox and a Button. The ClientID.js file is referenced on the page.
When the Button is clicked, it calls the GetTextBoxDetails function which first gets the ClientID of the ASP.Net TextBox and then displays the ClientID and the Value of the TextBox in JavaScript alert message box.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" src="Scripts/ClientID.js"></script>
<asp:TextBox ID="txtName" Text="Mudassar Khan" runat="server" />
<hr />
<asp:Button Text="Get TextBox Details" runat="server" OnClientClick="return GetTextBoxDetails()" />
<script type="text/javascript">
function GetTextBoxDetails() {
var id = GetClientID("txtName");
var txtName = document.getElementById(id);
alert("Client ID: " + id + "\nValue: " + txtName.value);
return false;
}
</script>
</asp:Content>
Script in External JS file
The below HTML markup is very similar to the above, the only difference is that the GetTextBoxDetails function is placed inside the Script.js external JS file which is referenced after the ClientID.js.
When the Button is clicked, it calls the GetTextBoxDetails function which first gets the ClientID of the ASP.Net TextBox and then displays the ClientID and the Value of the TextBox in JavaScript alert message box.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" src="Scripts/ClientID.js"></script>
<script type="text/javascript" src="Scripts/Scripts.js"></script>
<asp:TextBox ID="txtName" Text="Mudassar Khan" runat="server" />
<hr />
<asp:Button Text="Get TextBox Details" runat="server" OnClientClick="return GetTextBoxDetails()" />
</asp:Content>
Screenshot
![Get Client ID of ASP.Net control in JavaScript and jQuery]()
Downloads
