Panel control of ASP. NET

ASP. NET Panel control. We can see through the name that this is a menu control. When you move the mouse to a specified position, a menu appears without affecting other elements, and allow the user to perform some operations.

Important attributes
TargetControlID: ID of the target control to display the menu
PopupControlID: ID of the control for the pop-up menu
HoverCssClass: Specifies the style of the target control when you move the cursor to the target control.
PopupPosition: Position of the pop-up menu. There are five values (bottom, top, left, right, center)
OffsetX: the position of the menu from the target control-abscissa
OffsetY: the position of the menu from the target control-y coordinate

1. Open vs2005 and create an AjaxControlToolKit website named oec2003_HoverMenu.
2. Open the Default. aspx page and switch to the design view.
3. Add a TextBox and a Panel control to the page, and add three LinkButton controls to the Panel control, as shown below:

PopDelay: the delay time of the pop-up menu

 
 

  
  
<Asp: Panel ID="Panel1" Runat="Server" Height="50px" Width="125px"> 
  
  
<Asp: LinkButton ID="LinkButton1" Runat="Server" OnClick=
"Linkbutton#click">Date</Asp: LinkButton> 
  
  
<Br /> 
  
  
<Asp: LinkButton ID="LinkButton3" Runat="Server" OnClick=
"LinkButton3_Click">Time</Asp: LinkButton><Br /> 
  
  
<Asp: LinkButton ID="LinkButton2" Runat="Server" OnClick=
"LinkButton2_Click">Name</Asp: LinkButton> 
  
  
</Asp: Panel> 
  
  
4. Add the HoverMenu control on the page and set its properties. The Code is as follows:
  
  
<AjaxToolkit: HoverMenuExtender ID="HoverMenuExtender1" Runat=
"Server" TargetControlID="TextBox1" 
  
  
OffsetX="-1" OffsetY="-1" HoverCssClass="Hover" PopupControlID=
"Panel1" PopupPosition="Bottom"> 
  
  
</AjaxToolkit: HoverMenuExtender> 
  
  
5. Switch to the Code view and add a css style between the head elements to implement the style when the mouse moves to the target control, as shown below:
  
  
<Style Type="Text/css"> 
  
  
. Hover
  
  
{}{
  
  
Background-color: blue;
  
  
Background-repeat: repeat-x;
  
  
Background-position: left top;
  
  
}
  
  
</Style> 
 
 

Three LinkButton controls are placed in the Panel. After you click the LinkButton control, the corresponding content is displayed in the text box. The event code for clicking a LinkButton is as follows:

 
 

  
  
protected void LinkButton1_Click(object sender, EventArgs e)  
  
  
{  
  
  
TextBox1.Text = DateTime.Now.ToShortDateString();  
  
  
}  
  
  
protected void LinkButton3_Click(object sender, EventArgs e)  
  
  
{  
  
  
TextBox1.Text = DateTime.Now.TimeOfDay.ToString();  
  
  
}  
  
  
protected void LinkButton2_Click(object sender, EventArgs e)  
  
  
{  
  
  
TextBox1.Text = "oec2003";  
  
  
} 
 
 

Save the design, run the program, move the mouse over the text box, you will find that the text box style is changed to our custom style, and a menu is displayed, that is, the Panel control.
Click the button in the menu and the corresponding content will appear in the text box. The Panel control of ASP. NET is described above.

1. ASP. NET TypeConverter
2. Analysis on TypeResolver of ASP. NET
3. Define JavaScriptConverter in ASP. NET
4. How to replace Sys. Services in ASP. NET
5. Use Profile Service of ASP. NET AJAX