Introduction
This tip gives you a view of how to fetch the id of a control inside a user control in aspx file using JavaScript.
Courtesy: Find and access control inside UserControl
Process
In this tip, we will see how to find or access any control (in my example, I have considered gridview) which is placed inside a User Control using JavaScript.
When the Page is rendered as an HTML element, the ID of a control inside user control will be changed.
So in order to access the control, we need to find the ClientID of that control using FindControl.
Now let's create a project and name it as SampleOnUserControl.
Let's add a User Control to the project and name it as GridUserControl.ascx as I have taken GridView control as an example.
Now add the below code inside the User Control GridUserControl.
//
//Format the Grid view as per your requirement.
//
<asp:GridView ID="GridUC" runat="server" BackColor="White"
AutoGenerateColumns="false" BorderColor="#CCCCCC"
BorderStyle="None" BorderWidth="1px" CellPadding="3"
Height="100px">
<Columns>
<asp:BoundField HeaderText="Id" DataField="Id"
HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="60px"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField HeaderText="Name" DataField="Name"
HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="60px"
ItemStyle-HorizontalAlign="Center" />
</Columns>
</asp:GridView>
Now, let's add an aspx page Display.aspx to our project and add the below code inside form tag.
<div>
<h3>This is Home Page </h3>
<p>This Sample is Done to Check how to get Id of a control inside User Control</p>
To Get the Id of UserControl Click -->
<p>The Grid View is Inside the User Control</p>
<asp:Button ID="BtnClick" runat="server"
Text="Click Me!" OnClientClick="return Clicked()"
BorderStyle="None" BackColor="#293955" ForeColor="White" />
<div id="DivDisplayGrid" style="width: 120px; border: 1px solid black;">
<Uc:GridUser ID="GrdUserControl" runat="server"></Uc:GridUser>
</div>
</div>
Here, we are trying to use/display the user control inside the div DivDisplayGrid.
In order to use User Control in your aspx page, you need to add or register the user control in your aspx page or web config file as shown below.
In Aspx Page
Add the code below the @ Page directive:
<%@ Register Src="~/GridUserControl.ascx" TagName="GridUser" TagPrefix="Uc" %>
In Web.config File
Add the below code:
<system.web>
<pages>
<controls>
<%@ Register Src="~/GridUserControl.ascx"
TagName="GridUser" TagPrefix="Uc" %>
</controls>
</pages>
</system.web>
Your aspx page looks as below after registering the control.
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="Display.aspx.vb" Inherits="SampleOnUserControl.HomePage" %>
<%@ Register Src="~/GridUserControl.ascx"
TagName="GridUser" TagPrefix="Uc" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>This is Home Page </h3>
<p>This Sample is Done to Check how to get Id of a control inside User Control</p>
To Get the Id of UserControl Click -->
<p>The Grid View is Inside the User Control</p>
<asp:Button ID="BtnClick" runat="server"
Text="Click Me!" OnClientClick="return Clicked()"
BorderStyle="None" BackColor="#293955" ForeColor="White" />
<div id="DivDisplayGrid" style="width: 120px; border: 1px solid black;">
<Uc:GridUser ID="GrdUserControl" runat="server"></Uc:GridUser>
</div>
</div>
</form>
</body>
</html>
Now, let's see how to get the Id of the gridview control using JavaScript.
var GridID = document.getElementById
('<%=GrdUserControl.FindControl("GridUC").ClientID%>')
In the above bit of code, we are trying to get the ClientId of the control GridUC, here the GrdUserControl is the Id of user control used to display in aspx page and using FindControl we are getting the ClientId of the control with id GridUc which is found in ascx page.
Let's call the JavaScript function on the button BtnClick event, the complete aspx page looks like below:
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="Display.aspx.vb" Inherits="SampleOnUserControl.HomePage" %>
<%@ Register Src="~/GridUserControl.ascx" TagName="GridUser" TagPrefix="Uc" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function Clicked() {
var GridID = document.getElementById
('<%=GrdUserControl.FindControl("GridUC").ClientID%>')
if (GridID.id == "") {
alert("NOthing");
return false;
}
else
alert("The ClientId is: "+GridID.id);
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>This is Home Page </h3>
<p>This Sample is Done to Check how to get Id of a control inside User Control</p>
To Get the Id of UserControl Click -->
<p>The Grid View is Inside the User Control</p>
<asp:Button ID="BtnClick" runat="server"
Text="Click Me!" OnClientClick="return Clicked()"
BorderStyle="None" BackColor="#293955" ForeColor="White" />
<div id="DivDisplayGrid" style="width: 120px; border: 1px solid black;">
<Uc:GridUser ID="GrdUserControl" runat="server"></Uc:GridUser>
</div>
</div>
</form>
</body>
</html>
Now build your solution and run it.
After running the solution, the Default.aspx page looks like this:
We will get the ClientId of the gridview inside the User Control when we click on the button Click Me!.
I have used an alert message to display the ClientId, and the alert displayed will be as shown below:
Thank you for reading! Happy coding...
