Asp.Net Ajax--HoverMenuコントロール使用

概要

名前から、マウスが指定した位置に移動すると、他の要素に影響を及ぼさずにメニューが表示され、ユーザーがいくつかの操作を行うことができるメニューコントロールであることがわかります.

重要な属性

TargetControl:メニューを表示するターゲットコントロールのID PopupControl:ポップアップメニューとしてのコントロールのID HoverCssClass:ターゲットコントロールにマウス移動するときのターゲットコントロールのスタイルPopupPosition:ポップアップメニューがある場所、合計5つの値(bottom,top,left,right,center)OffsetX:メニュー距離ターゲットコントロールの位置--横座標Offsety:メニュー距離ターゲットコントロールの位置--縦座標PopDelay:ポップアップメニューの遅延時間

例1

1 vs 2005を開き、oec 2003_という名前のAjaxControlToolKitのWebサイトを作成します.HoverMenu 2はデフォルトのDefaultを開きます.aspxページは、デザインビュー3に切り替えてTextBoxとPanelコントロールを1つ追加し、PanelコントロールにLinkButtonコントロールを3つ追加します.

<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前にパネルに3つの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設計を保存して、プログラムを実行して、マウスをテキストの枠の上で移動する時、発見することができて、テキストの枠の様式は私達のカスタマイズした様式になって、その上また1つのメニューを弾いて、パネルのコントロールはメニューの中のボタンをクリックしてテキストの枠の中で相応の内容が現れます

例2

上は1つのHoverMenuコントロールの简単な応用をして、実はHoverMenuコントロールもGridViewコントロールの中で编集机能を交换するために使うことができて、编集列を私达のカスタマイズしたメニューの中で现れることができて、以下はどのように実现するかを见てみましょう1ウェブサイトの中で新しい1つのウェブページを作って、oec 2003_と命名しますGridViewHoverMenu.aspx 2をデザインビューに切り替え、ScriptManagerとUpdatePanelコントロール3をページに追加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編集テンプレート列の2つのメニューを実現します.各パネルコントロールにはLinkButtonコントロールが2つ配置され、プロパティは以下のように設定されています.

<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のCommand ArgumentとCommand Name属性は、編集機能に対応するCommand NameのようなGridViewのメソッドの名前に設定する必要がある.
7設計を保存し、プログラムを実行し、stuName列のデータ行にマウスを移動すると、カスタムメニューが表示され、編集機能が実現します.機能はGridViewで編集を有効にする機能と同じです