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 }); }
If you want to crop image then use JQuery Crop plugin. Download JQuery Crop Plugin from Here. Here you get two file, first is jquery.JCrop.js and second one is jquery.Jcrop.css file. Both of these files are used to set the crop section area on image. Lets check the example of Jquery crop section area of image.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" />
<script>
$(function () {
$("#cropimage").Jcrop({
onSelect: croparea
});
})
function croparea(c) {
$("#coordinate_x").val(c.x);
$("#coordinate_y").val(c.y);
$("#coordinate_w").val(c.w);
$("#coordinate_h").val(c.h);
};
</script>
</head>
<body>
<div>
<img src="image/12.PNG" id="cropimage"/>
<input type="hidden" id="coordinate_x" />
<input type="hidden" id="coordinate_y" />
<input type="hidden" id="coordinate_w" />
<input type="hidden" id="coordinate_h" />
</div>
</body>
</html>
Code generate the following output
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" />
<script>
$(function () {
$("#cropimage").Jcrop({
onSelect: croparea
});
})
function croparea(c) {
$("#coordinate_x").val(c.x);
$("#coordinate_y").val(c.y);
$("#coordinate_w").val(c.w);
$("#coordinate_h").val(c.h);
};
</script>
</head>
<body>
<div>
<img src="image/12.PNG" id="cropimage"/>
<input type="hidden" id="coordinate_x" />
<input type="hidden" id="coordinate_y" />
<input type="hidden" id="coordinate_w" />
<input type="hidden" id="coordinate_h" />
</div>
</body>
</html>
Code generate the following output
Comments
Post a Comment