Asp.Net Ajax–HoverMenu控制項使用

文章目錄

• 簡介
• 重要屬性
• 樣本1
• 樣本2

簡介

通過名字我們可以看出這是一個菜單控制項，當滑鼠移動到指定的位置時，在不影響其他的元素的情況下出現一個菜單，並允許使用者進行一些操作。

重要屬性

TargetControlID:要顯示菜單的目標控制項的ID
PopupControlID:作為快顯功能表的控制項的ID
HoverCssClass:滑鼠移動到目標控制項時目標控制項的樣式
PopupPosition:快顯功能表所在的位置，共有五個值(bottom,top,left,right,center)
OffsetX:菜單距離目標控制項的位置--橫座標
OffsetY:菜單距離目標控制項的位置--縱座標
PopDelay:快顯功能表的延遲時間

樣本1

1 開啟vs2005，建立一個AjaxControlToolKit網站，命名為oec2003_HoverMenu
2 開啟預設Default.aspx頁，切換到設計檢視
3 在頁面中添加一個TextBox和一個Panel控制項，並在Panel控制項中添加三個LinkButton控制項，如下

<asp:panel id="Panel1" runat="server" height="50px" width="125px">        <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">日期</asp:LinkButton>        <br />        <asp:LinkButton ID="LinkButton3" runat="server" OnClick="LinkButton3_Click">時間</asp:LinkButton><br />        <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">姓名</asp:LinkButton>    </asp:panel>

4 在頁面中添加HoverMenu控制項，並設定其屬性，代碼如下

<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="TextBox1"             OffsetX="-1" OffsetY="-1" HoverCssClass="hover" PopupControlID="Panel1" PopupPosition="bottom"></ajaxToolkit:HoverMenuExtender>

5 切換到程式碼檢視，在head元素間添加css樣式，用來實現滑鼠移動到目標控制項時的樣式，如下

<style type="text/css">    .hover    {       background-color:blue;       background-repeat:repeat-x;       background-position:left top;    } </style>

6 前面在Panel中放置了三個LinkButton控制項，點擊了LinkButton控制項後會在文字框中出現相應的內容，LinkButton的單擊事件代碼如下

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";}

7 儲存設計，運行程式，將滑鼠移動文字框上時，會發現，文字框的樣式變成了我們自訂的樣式了，而且還會彈出一個菜單，就是Panel控制項
點擊菜單中的按鈕在文字框中就會出現相應的內容

樣本2

上面做了一個HoverMenu控制項的簡單應用，其實HoverMenu控制項也可以用於GridView 控制項中來替換編輯功能，讓編輯列可以出現在我們自訂的菜單中，下面就來看看是怎麼實現的吧

1 在網站中建立一個web 頁，命名為oec2003_GridViewHoverMenu.aspx

2 切換到設計檢視，在頁面中添加ScriptManager和UpdatePanel控制項

3 在UpdatePanel控制項中添加GridView和SqlDataSource控制項，並配置資料來源，如下

<asp:sqldatasource id="SqlDataSource1" runat="server" conflictdetection="CompareAllValues"    connectionstring="<%$ ConnectionStrings:studentConnectionString %>"     deletecommand="DELETE FROM [studentInfo] WHERE [stuID] = @original_stuID AND 

      [stuName] = @original_stuName"    insertcommand="INSERT INTO [studentInfo] ([stuID], [stuName]) VALUES (@stuID, @stuName)"    oldvaluesparameterformatstring="original_{0}" selectcommand="SELECT * FROM [studentInfo]"    updatecommand="UPDATE [studentInfo] SET [stuName] = 

       @stuName WHERE [stuID] = @original_stuID AND [stuName] = @original_stuName"><DeleteParameters>    <asp:Parameter Name="original_stuID" Type="String" />    <asp:Parameter Name="original_stuName" Type="String" /></DeleteParameters><UpdateParameters>    <asp:Parameter Name="stuName" Type="String" />    <asp:Parameter Name="original_stuID" Type="String" />    <asp:Parameter Name="original_stuName" Type="String" /></UpdateParameters><InsertParameters>    <asp:Parameter Name="stuID" Type="String" />    <asp:Parameter Name="stuName" Type="String" /></InsertParameters></asp:sqldatasource>

4 開啟GridView控制項的編輯列視窗，將stuName 欄位設定成模板列
5 我們要在GridView控制項中實現兩個菜單，一個是在普通模式下的“編輯”和“刪除”，一個是在編輯狀態下的“更新”和“取消”

6 編輯模板列，會發現在視窗中有ItemTemplate和EditItemTemplate兩項，分別在這兩項下添加HoverMenu和Panl控制項，每個Panel控制項中放置兩個LinkButton控制項，屬性設定如下

<edititemtemplate>    &nbsp;<asp:TextBox ID="TextBox1" runat="server" 

Text='<%# Bind("stuName") %>'></asp:TextBox>    <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender2" runat="server" 

TargetControlID="TextBox1" 

PopupControlID="Panel2" OffsetX="10" OffsetY="-1" PopupPosition="right">    </ajaxToolkit:HoverMenuExtender>    <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">    <asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="Update" 

CommandName="Update">更新</asp:LinkButton>    <asp:LinkButton ID="LinkButton4" runat="server" CommandArgument="Cacel" 

CommandName="Cancel">取消</asp:LinkButton></asp:Panel></edititemtemplate><itemtemplate>    <asp:Label ID="Label1" runat="server" Text='<%# Bind("stuName") %>'></asp:Label>    <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 

TargetControlID="Label1" PopupControlID="Panel1" OffsetX="10" OffsetY="-1" 

PopupPosition="right">    </ajaxToolkit:HoverMenuExtender>    <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">    <asp:LinkButton ID="LinkButton1" runat="server" CommandArgument="Edit" 

CommandName="Edit">編輯</asp:LinkButton>    <asp:LinkButton ID="LinkButton2" runat="server" CommandArgument="Delete" 

CommandName="Delete">刪除</asp:LinkButton></asp:Panel></itemtemplate>

在這兒要注意，因為LinkButton要實現對GridView的資料行的編輯功能，所以LinkButton的CommandArgument和CommandName屬性要設定成對應的GridView 的方法的名字，如編輯功能對應的CommandName應該設定成Edit.

7 儲存設計，運行程式，當滑鼠移動到stuName列的資料行上時，就會出現自訂的菜單，可以實現編輯功能。功能和在GridView中啟用編輯的功能一樣