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 }); }
Earlier article was about to using basic jQuery syntaxes and changing default behaviour of html elements in MVC. As html easily provide to include CSS classes to change the design of an element or we can say anything on the web-page. The same operation can easily be performed by using jQuery according to some conditions or on some events triggering.
Add CSS class: To add a class using jQuery, programmer have to use the function addClass() which have some parameters including property name and the value to be assign.
Add below style on the page:
$( "a" ).addClass( "test" );
Remove Class: On click of this anchor tag or some other element, we can simple remove this class by using the below line of code:
$( "a" ).removeClass( "test" );
This code can be written on the click event of any element on the page or on some other event. Programmer must place all this jQuery code in the below block so that your code executes when the document is ready to be worked on.
Add CSS class: To add a class using jQuery, programmer have to use the function addClass() which have some parameters including property name and the value to be assign.
Add below style on the page:
<style> a.test { font-weight: bold; }</style>This above style will make font-weight: bold for the anchor tag using this css class. To add this CSS class on the anchor tag, write the following line of code:
$( "a" ).addClass( "test" );
Remove Class: On click of this anchor tag or some other element, we can simple remove this class by using the below line of code:
$( "a" ).removeClass( "test" );
This code can be written on the click event of any element on the page or on some other event. Programmer must place all this jQuery code in the below block so that your code executes when the document is ready to be worked on.
$(document).ready(function(){ //write your code here});
Comments
Post a Comment