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 }); }
Introduction
In this article i will show you how to show 100 characters only from lots of words and remaining words or you can say characters are hide from see more words, just like facebook.com. In facebook.com website, when we post some article which is lengthy in words then facebook.com functionality hide words just after specified length behind the see more links. Now, today i will give an example of it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook See More and See Less</title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var sChar = 100;
var ellipsestxt = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function () {
var content = $(this).html();
if (content.length > sChar) {
var c = content.substr(0, sChar);
var h = content.substr(sChar - 1, content.length - sChar);
var html = c + '<span class="moreellipses">' + ellipsestxt + ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="facebookmorelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".facebookmorelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
a {
color: #0221ac;
}
a:visited {
color: #02abcd;
}
a.facebookmorelink {
text-decoration: none;
outline: none;
}
.morecontent span {
display: none;
}
.facebookseemore {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="facebookseemore more">
<h1>Health Tips</h1>
Fat on face or double chin suits on a person till a limited age only.
As age of a person increases fat free face is considered more beautiful.
Some girls do not like their fatty cheeks because it makes them look fat.
Fat on face can increase because of many reasons like lack of water, presence
of fat in diet and other fatty products. And for hiding it you may do make up
but it is not the thing which gets hided easily. Today
we are going to tell you about some such tips which can reduce fat from your face at a great extent.
</div>
</body>
</html>
Code Generate the following output
In this article i will show you how to show 100 characters only from lots of words and remaining words or you can say characters are hide from see more words, just like facebook.com. In facebook.com website, when we post some article which is lengthy in words then facebook.com functionality hide words just after specified length behind the see more links. Now, today i will give an example of it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook See More and See Less</title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var sChar = 100;
var ellipsestxt = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function () {
var content = $(this).html();
if (content.length > sChar) {
var c = content.substr(0, sChar);
var h = content.substr(sChar - 1, content.length - sChar);
var html = c + '<span class="moreellipses">' + ellipsestxt + ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="facebookmorelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".facebookmorelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
a {
color: #0221ac;
}
a:visited {
color: #02abcd;
}
a.facebookmorelink {
text-decoration: none;
outline: none;
}
.morecontent span {
display: none;
}
.facebookseemore {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="facebookseemore more">
<h1>Health Tips</h1>
Fat on face or double chin suits on a person till a limited age only.
As age of a person increases fat free face is considered more beautiful.
Some girls do not like their fatty cheeks because it makes them look fat.
Fat on face can increase because of many reasons like lack of water, presence
of fat in diet and other fatty products. And for hiding it you may do make up
but it is not the thing which gets hided easily. Today
we are going to tell you about some such tips which can reduce fat from your face at a great extent.
</div>
</body>
</html>
Code Generate the following output
Comments
Post a Comment