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 }); }
To select a date in our client application, enter the date into a textbox and then convert it to the particular class i.e. DateTime. What, if there is an in-built control to select a date, month and a year also. Calendar control is used to do these task and look like the following:
The image shows three display modes of this calendar control i.e. month, year and decade respectively. By default it is Month view (the first view). User can switch the view to click on month and then year and so on. It have some commonly used properties which are:
DisplayDate: To specify the displayed date in the calendar control. Assign the date in the system date format.
SelectedDate: change the currently selected date. Used as the display date. If the control shows the old date we can change it to current using following code:
<Calendar SelectedDate="{x:Static sys:DateTime.Now}"/>
SelectionMode: it provides multiple modes for selection like “MultipleRange”. We can select a range of dates by using this property.
BlackoutDates: this control provides a feature of black out some dates means user cannot select some of the date blocked by system.
DisplayMode: to change the display modes i.e. year, month and decade as in our first diagram.
Like other controls it also have many events like selectedDatesChanged, displayDateChanged, displayModeChanged and etc. We can specify the actions to be performed at the particular event. Calendar control can be customizable as per the requirement of the user like background and foreground.
See also: Button Control
The image shows three display modes of this calendar control i.e. month, year and decade respectively. By default it is Month view (the first view). User can switch the view to click on month and then year and so on. It have some commonly used properties which are:
DisplayDate: To specify the displayed date in the calendar control. Assign the date in the system date format.
SelectedDate: change the currently selected date. Used as the display date. If the control shows the old date we can change it to current using following code:
<Calendar SelectedDate="{x:Static sys:DateTime.Now}"/>
SelectionMode: it provides multiple modes for selection like “MultipleRange”. We can select a range of dates by using this property.
BlackoutDates: this control provides a feature of black out some dates means user cannot select some of the date blocked by system.
<Calendar>
<Calendar.BlackoutDates>
<CalendarDateRange Start="08.04.2013" End="08.04.2013"/>
<CalendarDateRange Start="08.16.2013" End="08.24.2013"/>
</Calendar.BlackoutDates>
</Calendar>
It will cross all the dates specified in the above range as shown in the following image:<Calendar.BlackoutDates>
<CalendarDateRange Start="08.04.2013" End="08.04.2013"/>
<CalendarDateRange Start="08.16.2013" End="08.24.2013"/>
</Calendar.BlackoutDates>
</Calendar>
DisplayMode: to change the display modes i.e. year, month and decade as in our first diagram.
Like other controls it also have many events like selectedDatesChanged, displayDateChanged, displayModeChanged and etc. We can specify the actions to be performed at the particular event. Calendar control can be customizable as per the requirement of the user like background and foreground.
See also: Button Control
Comments
Post a Comment