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 }); }
ResizableControlExtender is attached to any ASP.NET control on a web page that allow resizing the control using a handle attached to the lower-right corner of the control. The user resizes the control similar to windows Explorer in operating system. The style can be changed using the HandleCssClass property.
ResizableControlExtender also exposes the events,such as OnClientResize that can trigger JavaScript .
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )<%@ Page Language="C#" AutoEventWireup="true" CodeFile="autoresize.aspx.cs" Inherits="autoresize" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style >
.handle
{
width:10px;
height:10px;
display :block ;
background-color:green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="scriptManager" />
<div>
<asp:Panel ID="Panel1" runat="server" Style="width: 300px; height: 200px;">
<asp:Label ID="image1" runat="server" Text="ResizableControlExtender is attached to any ASP.NET control on a web page that allow resizing the control using a handle attached to the lower-right corner of the control. The user resizes the control similar to windows Explorer in operating system. The style can be changed using the HandleCssClass property.
ResizableControlExtender also exposes the events,such as OnClientResize that can trigger JavaScript.">
</asp:Label>
</asp:Panel>
<asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
TargetControlID="Panel1" HandleCssClass="handle" MaximumHeight="400" MaximumWidth="500"
MinimumHeight="100" MinimumWidth="100" HandleOffsetX="5" HandleOffsetY="5" />
</div>
</div>
</form>
</body>
</html>
Properties of ResizableControlExtender control
ResizableCssClass: Sets the name of the css class that is applied to the control while resizing.
MinimumWidth: Sets the minimum width of the resizable control.
MinimumHeight : Sets the minimum height of the resizable control.
MaximumWidth : Sets the maximum width of the resizable control.
MaximumHeight : Sets the Maximum height of the resizable control.
OnClientResizeBegin : Specifies the event name that is fired when the control start resizing.
OnClientResizing : Specifies the event name that is fired when the control is begin resized.
OnClientResize : Specifies the event name that is fired when the control has been resized.
HandleOffsetX : Sets the distance of the resize handle from the control relative to X axis.
HandleOffsetY : Sets the distance of the resize handle from the control relative to Y axis.
Comments
Post a Comment