asp.net Ajax--HoverMenu控件使用

    简介
    通过名字我们可以看出这是一个菜单控件，当鼠标移动到指定的位置时，在不影响其他的元素的情况下出现一个菜单，并允许用户进行一些操作。

    重要属性
    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样式，用来实现鼠标移动到目标控件时的样式，如下

.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">

<asp:Parameter Name="original_stuID" Type="String" />

<asp:Parameter Name="original_stuName" Type="String" />

</DeleteParameters>

<asp:Parameter Name="stuName" Type="String" />

<asp:Parameter Name="original_stuID" Type="String" />

<asp:Parameter Name="original_stuName" Type="String" />

</UpdateParameters>

<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控件，属性设置如下

 <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>

<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中启用编辑的功能一样

posted @ 2007-09-06 14:11 oec2003 阅读(1505) 评论(2) 编辑收藏网摘所属分类: Asp.net Ajax

发表评论

回复引用查看

#1楼 2007-09-29 08:19 | 专研.NET

谢谢，学习了

回复引用

#2楼 2008-07-25 21:31 | zljyunxuan[未注册用户]

我遇到一个问题想要请教一下。我在ASP.NET中用Ajax--HoverMenu控件把装有菜单的Panel挂在导航的linkbutton上的，而且在linkbutton下面一行还有其他控件，运行的时候Panel的内容只显示一部分，另一部分被linkbutton下面一行的控件遮掉了，请问这个问题怎么解决啊？