ajax控件DropDownExtender做带DropDownList的TextBox控件

作者在 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;
}

效果:


 
 
————————————————————
技术日志 | 阅读 3898 次
文章评论,共0条
游客请输入验证码