AjaxControlToolkit有一個(gè)HoverMenuExtender控件用于當(dāng)鼠標(biāo)滑過一個(gè)Web控件時(shí)，彈出一個(gè)列表，首先觀看效果：

?

這是AjaxControlToolkit控件，當(dāng)然是在Ajax下應(yīng)用。在aspx頁面中應(yīng)該要寫上：

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

不然在頁面run時(shí)，會(huì)出現(xiàn)如下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

?

?接下來，我們?cè)诰W(wǎng)頁上，放置一個(gè)web控件，下示例是使用fieldset，它是一個(gè)Html標(biāo)題，把它轉(zhuǎn)為一個(gè)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指定一個(gè)Html 標(biāo)簽的時(shí)，它會(huì)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控件拉至網(wǎng)頁內(nèi)，兩個(gè)屬性一個(gè)要寫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控件，從工具欄拉至網(wǎng)頁。

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

?

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

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

?

?應(yīng)該不難喔。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。