程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> asp.net Ajax--HoverMenu控件使用

asp.net Ajax--HoverMenu控件使用

編輯：.NET實例教程

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

    重要屬性
    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>
                                 <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=&q
uot;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中啟用編輯的功能一樣