AjaxControlToolkit有一個HoverMenuExtender控件用于當鼠標滑過一個Web控件時，彈出一個列表，首先觀看效果：

?

這是AjaxControlToolkit控件，當然是在Ajax下應用。在aspx頁面中應該要寫上：

ScriptManager ?<asp:ScriptManager?ID="ScriptManager1"?runat="server">
????</asp:ScriptManager>

不然在頁面run時，會出現如下Error：?

Server Error in '/InsusTutorials' Application.

The control with ID 'UpdatePanel1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: The control with ID 'UpdatePanel1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[InvalidOperationException: The control with ID 'UpdatePanel1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.]System.Web.UI.UpdatePanel.get_ScriptManager() +205System.Web.UI.UpdatePanel.RegisterPanel() +89System.Web.UI.UpdatePanel.OnInit(EventArgs e) +20System.Web.UI.Control.InitRecursive(Control namingContainer) +391System.Web.UI.Control.InitRecursive(Control namingContainer) +188System.Web.UI.Control.InitRecursive(Control namingContainer) +188System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1579

---

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.431

?

?接下來，我們在網頁上，放置一個web控件，下示例是使用fieldset，它是一個Html標題，把它轉為一個Web控件，所以加上run="server"屬性。

fieldset ?<fieldset?id="fieldsetl"?runat="server"?style="margin:?10px;?padding:?3px;?width:?13.2%;"
????????????????align="absmiddle"?onmouseover="this.style.backgroundColor='#99ccff'"?onmouseout="this.style.backgroundColor=''?">
????????????????HoverMenuExtender
????????????</fieldset>

?

如果你為HoverMenuExtender指定一個Html 標簽的時，它會Error:

?

Server Error in '/InsusTutorials' Application.

The TargetControlID of 'HoverMenuExtender1' is not valid. A control with ID 'fieldsetl' could not be found.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: The TargetControlID of 'HoverMenuExtender1' is not valid. A control with ID 'fieldsetl' could not be found.

?

接下來，把HoverMenuExtender控件拉至網頁內，兩個屬性一個要寫TargetControlID和PopupControlID，前者是激活菜單的控件ID，此例的TargetControlID是fieldsetl，而后者是Popup菜單控件ID, 此例指向Panel1。

HoverMenuExtender ?<ajaxToolkit:HoverMenuExtender?ID="HoverMenuExtender1"?runat="server"?TargetControlID="fieldsetl"
????????????????PopupControlID="Panel1"?PopupPosition="Right"?OffsetX="5"?OffsetY="3"?/>

?

?最后，是寫Popup菜單Panel控件，從工具欄拉至網頁。

Panel1 <asp:Panel?ID="Panel1"?runat="server"?CssClass="HoverMenuStyle">
????????????????Hello?Insus.NET!
????????????????<br?/>
????????????????This?is?AjaxControlToolkit?HoverMenuExtender?control?demo.
????????????</asp:Panel>

?

?不要忘記了，還要為這個Panel寫上樣式：

HoverMenuStyle .HoverMenuStyle
????????{
????????????background:?#fff6bf;???????????
????????????text-align:?left;
????????????padding:?5px;
????????????border:?1px?solid?#ffd324;
????????????display:?none;
????????????z-index:?1;
????????}

?

?應該不難喔。

總結

以上是生活随笔為你收集整理的AjaxControlToolkit HoverMenuExtender 控件演示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。