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 }); }
JQuery Notification bar on Top of the web page. This is the new thing in the mind i.e when we click on hyperlink then show a division with some message on top of the web page. The logic behind the thing is too much simple, In JQuery we have two method slideUp( ) and slideDown( ) , which are used for animation. In this article , i have used both.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery: Notification bar Example </title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#Button1").click(function () {
$("#NotificationDiv").slideUp('slow');
});
$("#ShowNotificationBar").click(function () {
$("#NotificationDiv").slideDown('slow');
});
});
</script>
<style>
.NotficationBar{
background-color:blue;
color:white;
position:absolute;
width:100%;
top:0px;
left:0px;
text-align:center;
border-bottom-width:3px;
border-bottom-color:#000000;
border-bottom-style:solid;
padding:15px;
}
</style>
</head>
<body>
<div id="NotificationDiv" class="NotficationBar">
<label>Welcome to dotprogramming.blogspot.com</label>
<br/>
<input type="button" id="Button1" value="close"/>
</div>
<div>
<a href="" id="ShowNotificationBar">Show Notification Bar </a>
</div>
</body>
</html>
Application of the article:
- If you want to give special notice on website then you can use it.
- Use it in Current News Section.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery: Notification bar Example </title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#Button1").click(function () {
$("#NotificationDiv").slideUp('slow');
});
$("#ShowNotificationBar").click(function () {
$("#NotificationDiv").slideDown('slow');
});
});
</script>
<style>
.NotficationBar{
background-color:blue;
color:white;
position:absolute;
width:100%;
top:0px;
left:0px;
text-align:center;
border-bottom-width:3px;
border-bottom-color:#000000;
border-bottom-style:solid;
padding:15px;
}
</style>
</head>
<body>
<div id="NotificationDiv" class="NotficationBar">
<label>Welcome to dotprogramming.blogspot.com</label>
<br/>
<input type="button" id="Button1" value="close"/>
</div>
<div>
<a href="" id="ShowNotificationBar">Show Notification Bar </a>
</div>
</body>
</html>
Comments
Post a Comment