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 }); }
CalendarExtender targets a TextBox control and provides an easy way to enter the date in the textbox . When you associate a CalendarExtender to the textbox control , you do not need to enter the date manually. However , you can select the date from the calendar that appears as you focus on the textbox . The CalendarExtender enables you to customize the date format end choose the date using popup calender . You can interact with the calendar by selecting a date and month , or changing the view of the calender , and much more.
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="23px" Width="168px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Cal" />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID ="TextBox1" PopupButtonID ="Button1" Format ="d/MMMM/yyyy"></asp:CalendarExtender>
</div>
</form>
</body>
</html>
OutPut
Property of the CalendarExtender Control
TargetControlID : Set the ID of the textbox control to which the extender is attached .
Format : Sets the Format string to display the selected date
PopupButtonID : Set the ID for the control using which you want to display the calendar pop-up . If this value has not been , the calendar pop-up appears by focusing the TextBox control.
PopupPosition : Set the position where the pop-up appear in the text box . The default value is BottomLeft.
SelectedDate : Set the date which is selected when the Calendar initialize.
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="23px" Width="168px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Cal" />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID ="TextBox1" PopupButtonID ="Button1" Format ="d/MMMM/yyyy"></asp:CalendarExtender>
</div>
</form>
</body>
</html>
OutPut
TargetControlID : Set the ID of the textbox control to which the extender is attached .
Format : Sets the Format string to display the selected date
PopupButtonID : Set the ID for the control using which you want to display the calendar pop-up . If this value has not been , the calendar pop-up appears by focusing the TextBox control.
PopupPosition : Set the position where the pop-up appear in the text box . The default value is BottomLeft.
SelectedDate : Set the date which is selected when the Calendar initialize.
Comments
Post a Comment