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 }); }
I mean to say, we have three controls, two TextBoxes and one Button control. When we run the source code in the browser button is disabled by default. If we want to enable button at run time then we must to input some text in both TextBoxes. For this type of problem we should go for java script.
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function change(textb,buttont)
{
var firstt = document.getElementById('<%= TextBox1.ClientID %>');
var secondt = document.getElementById('<%= TextBox2.ClientID %>');
if ((textb.value.length>=1 && firstt.value.length >= 1) && (textb.value.length>=1 && secondt.value.length >= 1))
document.getElementById(buttont).disabled = false;
else
document.getElementById(buttont).disabled = true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" onkeyup="change(this,'Button1');"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" onkeyup="change(this,'Button1');"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" Enabled="false" />
</div>
</form>
</body>
</html>
Here,
- onkeyup() function call when we input character into text box.
- change() function have two parameter first is TextBox instance and second is button reference.
- Access both TextBoxes by using document.getElementById( ) method.
- Now, check the length of the string which is entered in the TextBox.
- If, Length is greater than equal to 1 then Button is enable otherwise disable.
Comments
Post a Comment