TextBoxWatermarkExtender

最新推荐文章于 2019-07-02 23:26:54 发布

转载最新推荐文章于 2019-07-02 23:26:54 发布 · 402 阅读

3 篇文章

订阅专栏

1)在VS2005中新建一个ASP.NET AJAX-Enabeld Web Project项目工程，命名为TextBoxWatermarkExtender1。

2)在Default.aspx中添加两个TextBox，分别用于输入FirstName 和LastName。然后对每个TextBox添加一个TextBoxWatermarkExtender控件，用于添加水印效果。

代码如下：

1 FirstName: 2 <asp:TextBox ID="txtFirstName" runat="server" CssClass="unwatermarked"></asp:TextBox> 3 <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender1" runat="server" targetcontrolid="txtFirstName" WatermarkCssClass="watermarked" WatermarkText="please input the first name"></cc1:textboxwatermarkextender>4 <br />5 LastName: 6 <asp:TextBox ID="txtLastName" runat="server" CssClass="unwatermarked"></asp:TextBox>7 <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender2" runat="server" targetcontrolid="txtLastName" WatermarkCssClass="watermarked" WatermarkText="please input the last name"></cc1:textboxwatermarkextender>8 <br />

属性说明：

         TargetControlID：该控件的目标关联控件。
         WatermarkCssClass：产生水印效果的css样式。
         WatermarkText：有水印效果时，水印上的文本。

3)要看到水印效果的关键的css样式。

代码如下：

1        .watermarked {
2            height:20px;
3            width:150px;
4            padding:2px 0 0 2px;
5            border:1px solid #BEBEBE;
6            background-color:#F0F8FF;
7            color:gray;
8        }

4)在页面上添加一个UpdatePanel控件，在该控件中添加一个Button和Label，用于显示用户的输入。

代码如下：

1        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
2            <ContentTemplate>
3                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" />
4                <br />
5                <br />
6                <asp:Label ID="message" runat="server"></asp:Label>
7            </ContentTemplate>
8        </asp:UpdatePanel>

Button按钮的处理代码：

            this.message.Text = "欢迎你：" + this.txtFirstName.Text + " " + this.txtLastName.Text;

5)按下CTRL+F5,在浏览器里查看效果。