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 }); }
Remove content from the division or remove complete div from the page. In these types of problem you can use JQuery. In Jquery we have a empty( ) and remove( ) function. Both functions are used easily. Ok, let take a simple example , in which we have a division with border style and text. If i want to remove content of the div then first to find the division using JQuery by this method.
$('# id of the division')
After find the division you can use empty method, Through this method we can remove content of the division.
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){
$('#Button1').click(function(){
$('#contentdiv').empty();
});
$('#Button2').click(function(){
$('#contentdiv').remove();
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="contentdiv" style="border: thick solid #FF0000"> Welcome to http://dotprogramming.blogspot.com</div>
<div>
<input id="Button1" type="button" value="Empty Division" />
<input id="Button2" type="button" value="Remove Division" />
</div>
</form>
</body>
</html>
Here,
We have a three element in the body section, first one is division with Text, second and third are buttons. First to place the ".js" file in the head section from script folder of your visual studio's solution or you can use "http://code.jquery.com/jquery-1.8.2.js" . Now, start the script block. In the script block start JQuery with the function. Inside the function, first of all get the first button by their id property then perform click operation on it. On the click event , generate function , in it you can get the division by also their id property then you can use empty ( ) function. Similarly do all these things with the second button.
Comments
Post a Comment