Ajax控件之DropDown
Ajax控件之DropDown
实现的效果:可以将lable,textBox转换成菜单的形式
1,加入UpdatePanel,里再加入TextBox,修改TextMode为:MultiLine,成多行写入
2.加入一个Button,一点击实现快快速回复
3.修改OnClientClick为return false是为了不让它提交给服务器,否则人实现页面的刷新
在快速注册下面加入一个Panel,在里面加入三个LinkButton
4.将三个LinkButton的OnClientClic f都改为: return false防止提交服务器和页面的刷新
5.加入控件DropDown用来绑定Button,让Button实现快速注册
6.用DropDown来控制Panel,还要在源中加入代码
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="Button1" DropDownControlID ="Panel1">
</cc1:DropDownExtender> DropDownControlID=”Panel1”为要加入的代码
7添加一个样式文件:用来控制Panel1(包含那在三个LinkButton的Panel1)
8..ContextMenuPanel
{
border:1px solid #868686 //边框是实线
padding :1px 1px 1px 1px//距离边缘的象束
font-size:11px;
}
9.ContextMenuItem//这里用来控制Menu的子项,就是那三个LinkButton
{
margin:1px 0 1px 0; //边缘
display:block ; //让LinkButton整行出现即三个LinkButton占有三个行
//display: inherit则与block相反
color:#003399;
text-decoration:none;
padding: 4px 19px 4px 33px;
white-space:nowrap ; // 指示对象内部是自动换行的值;
}
10.ContextMentItem:hover//显示连接的样式,在LinkButton 中有个连接这里就是那准备的
{
background-color:#FFE6A0;
color :#003399;
border:1px solid #D2B47A;
padding :3px 18px 3px 32px;
}
把ContextMenuItem加入三个LinkButton的CssClass中
把ContextMenuPanel加入 包含三个LinkButton的Panel中
11．在Default.aspx的源中加入代码，当选择其中一个LinkButton中的值时会赋值到UpdatePanel中的TextButton中
12．当单击其中的一个LinkButton时会把值传到onSelect(object sender,EventArgs e),由OnClick=”onSelect”所触发
13．修改UpdatePanel的Triggers 添加：行为ControlID:分别为：LinkButton1,2,3EvetnName：Click
14.把在个OnClientClick三个属性return false 去掉因为他已经有OnClick事件
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="74px" Width="299px"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="LinkButton3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<asp:Button ID="Button1" runat="server" OnClientClick="return false" Text="快速回复"
Width="133px" /> <br />
<asp:Panel ID="Panel1" runat="server" Height="92px" Width="185px" CssClass="ContextMenuPanel">
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="ContextMenuItem" OnClick="onSelect">我正在演示哦!</asp:LinkButton>
<br />
<br />
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="ContextMenuItem" OnClick="onSelect">欢迎访问文宇专栏</asp:LinkButton><br />
<br />
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="ContextMenuItem" OnClick="onSelect">http://blog.csdn.net/meng1986</asp:LinkButton></asp:Panel>
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="Button1" DropDownControlID ="Panel1">
</cc1:DropDownExtender>
</form>
</body>
</html>
StyleSheet.css
.ContextMenuPanel
{
border:1px solid #868686;
padding: 1px 1px 1px 1px;
font-size:11px;
}
a.ContextMenuItem
{
margin:1px 0 1px 0;
display:block ;
color:#003399;
text-decoration:none;
padding: 4px 19px 4px 33px;
white-space:nowrap ;
}
a.ContextMenuItem:hover
{
background-color:#FFE6A0;
color :#003399;
border:1px solid #D2B47A;
padding :3px 18px 3px 32px;
}
Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void onSelect(object sender, EventArgs e)
{
this.TextBox1.Text = ((LinkButton)sender).Text;
}
}