Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

How to Get User Controls ClientID in JavaScript in aspx Page

3.67/5 (2 votes)
16 Apr 2013CPOL 74.9K  
Get ClientID of User control which is register on Page In JavaScript.

Introduction

There are lots of times when we access user control in our web application, At the time of using user control, we want to access this User control in JavaScript. Given below is the problem and solution for accessing user control in JavaScript.

Problem 

While using user control, we want to access this user control in JavaScript, and we try to get its Client ID. But by using document.getElementById('<% =UserControl.ClientID%>'), it returns null value.

Solution 

To overcome this problem, we create one function in UserControls code behind like "GetClientID" - it returns the Clientid of the control, then we can easily access the same.

Follow the Steps

  1. Create a Web Application, add a Web User Control by clicking add new Item.
  2. Write the below code in User Control:
    VB.NET
    Public Function getClientID() As String
            Return Controls.ClientID
    End Function
  3. After that, register this user control in your aspx page by adding the below tag:
    ASP.NET
    <%@ Register Src="~/WebUserControl.ascx" TagName="Test" TagPrefix="uc2" %>
  4. After that, add JavaScript tag in aspx head section.
    JavaScript
    function FunctionName {
        alert(document.getElementById('<%=Uctest.getClientID()%>').value);
    }
  5. It shows the value of control which is used in user control.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)