I want to show Components in a tabs , so first of all create few components. In this project we have three components, First View Component public class AllViewComponent : ViewComponent { private readonly UserManager<ApplicationUser> _userManager; public AllViewComponent(UserManager<ApplicationUser> userManager) { _userManager = userManager; } public async Task<IViewComponentResult> InvokeAsync() { List<StudentViewModel> allUsers = new List<StudentViewModel>(); var items = await _userManager.Users.ToListAsync(); foreach (var item in items) { allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email }); }
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" />
<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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<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 :
<input name="Register1$usertxt" type="text" id="Register1_usertxt" style="width:209px;" />
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>
Comments
Post a Comment