How to find controls from usercontrols in ASP.NET

Introduction

Today, when we was design a program with the help of web usercontrol. I was take two web usercontrols in the single web form (learn how to add web usercontrol in the aspx page) with a single button control. My code look like in the ASPX page:

<uc1:Register ID="Register1" runat="server" />
<uc2:login ID="login1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Find control" Width="483px" />

I want to access controls which is inside in user controls such as Button, TextBox, Label, Dropdownlist and etc. So, For this type of problem, i have a solution. Actually user control is a collection of controls or text and each control have a id property; also control have a runat attribute. So, easily we can access or find controls in the code file as well as in the <script> block. In this article i will explain you how to find the controls such as Button, Label, TextBox and etc from the user control

Find controls from user controls in the code file I-Method:

The Web User Control:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Register.ascx.cs" Inherits="MyControl_Register" %>

<asp:TextBox ID="usertxt" runat="server" Width="209px"></asp:TextBox>

The Page

The following HTML Markup of the ASPX Page contains the UserControl and a Button.

The button has an OnClick event handler which executes a click function which validates the TextBox usertxt present inside the UserControl Register.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<%@ Register src="MyControl/Register.ascx" tagname="Register" tagprefix="uc1" %>

<!DOCTYPE html>

</head>

<body>

<div>

<uc1:Register ID="Register1" runat="server" />

</div>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Find control from user control" Width="483px" />

</form>

</body>

</html>

Code Behind file

protected void Button1_Click(object sender, EventArgs e)

{

TextBox t1 = Register1.FindControl("usertxt") as TextBox;

if(t1.Text == "")

{

Response.Write("<script>alert('please fill the username')</script>");

}

Find controls from user controls using java script II-Method:

Also we can find the controls such as Label, ListBox, etc., which is inside in user controls. But a little problem you and i face that is:

When i place an toolBox controls inside usercontrols then the HTML ID of the control which is inside in usercontrol changes. And hence Java Script is not determine the control so, it is unable to find the control. Suppose, you have a TextBox with ID usertxt in a web user control, render web form in the browser and see the html source view :

Solution of the problem

Use Embedded code block with ClientID property in the document.getElementById menthod.
Now, Your whole code look like

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

<%@ Register src="MyControl/Register.ascx" tagname="Register" tagprefix="uc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function validate()
{
var t1 = document.getElementById('<%= Register1.FindControl("usertxt").ClientID %>');
if (t1.value=="") {
alert("Please fill username");
}
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<uc1:Register ID="Register1" runat="server" />

</div>
<asp:Button ID="Button1" runat="server" Text="Find control using java script" Width="451px" OnClientClick="validate()" />
</form>
</body>
</html>

If you want to see the full implementation and output, see this video: