作者在 2008-05-03 16:10:16 发布以下内容
控件名:DropDownExtender
效果和用途:配合asp.net控件做一个带有dropdownlist的组合控件
属性:
TargetControlID 用来现实dropdownlist的内容的控件。(其实那不是dropdownlist控件,但是功能差不多)
DropDownControlID 充当dropdownlist的控件,一般是panel
做法:
1.托一个UpdatePanel控件。
2.在UpdatePanel控件中放上textbox控件和一个panel控件
3.在panel控件中放上若干个LinkButton控件
4.托一个DropDownExtender控件,并设置其属性TargetControlID ,DropDownControlID
5.设置updatepanel控件的Triggers属性,为其添加click事件。
6.在后台编写给textbox控件的赋值代码。
7.给linkbutton添加onclik事件。
8.编写css样式,并应用到各个控件。
eg:
aspx页面:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server" Height="53px" "153px" CssClass="ContainPanel" Style="visibility: hidden"> //这里给panel加上hidden要不会出现闪的样子,效果不是很好。
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="OnSelect" CssClass="link">选择第一个</asp:LinkButton><br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="OnSelect" CssClass="link">选择第二个</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton3" runat="server" OnClick="OnSelect" CssClass="link">选择第三个</asp:LinkButton></asp:Panel>
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1" DropDownControlID="panel1">
</cc1:DropDownExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="LinkButton3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
cs页面:
protected void OnSelect(object sender, EventArgs e)
{
TextBox1.Text = ((LinkButton)sender).Text;
}
css样式:
.ContainPanel
{
background:#ffcc00;
font-size:12px;
padding:3px;
border:solid 1px #666;
line-height:150%;
}
.link
{
color:#666;
font-size:12px;
}
效果:
效果和用途:配合asp.net控件做一个带有dropdownlist的组合控件
属性:
TargetControlID 用来现实dropdownlist的内容的控件。(其实那不是dropdownlist控件,但是功能差不多)
DropDownControlID 充当dropdownlist的控件,一般是panel
做法:
1.托一个UpdatePanel控件。
2.在UpdatePanel控件中放上textbox控件和一个panel控件
3.在panel控件中放上若干个LinkButton控件
4.托一个DropDownExtender控件,并设置其属性TargetControlID ,DropDownControlID
5.设置updatepanel控件的Triggers属性,为其添加click事件。
6.在后台编写给textbox控件的赋值代码。
7.给linkbutton添加onclik事件。
8.编写css样式,并应用到各个控件。
eg:
aspx页面:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server" Height="53px" "153px" CssClass="ContainPanel" Style="visibility: hidden"> //这里给panel加上hidden要不会出现闪的样子,效果不是很好。
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="OnSelect" CssClass="link">选择第一个</asp:LinkButton><br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="OnSelect" CssClass="link">选择第二个</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton3" runat="server" OnClick="OnSelect" CssClass="link">选择第三个</asp:LinkButton></asp:Panel>
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1" DropDownControlID="panel1">
</cc1:DropDownExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="LinkButton3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
cs页面:
protected void OnSelect(object sender, EventArgs e)
{
TextBox1.Text = ((LinkButton)sender).Text;
}
css样式:
.ContainPanel
{
background:#ffcc00;
font-size:12px;
padding:3px;
border:solid 1px #666;
line-height:150%;
}
.link
{
color:#666;
font-size:12px;
}
效果:
————————————————————