编程少年基地

ASP.NET快速入门系列视频讲座

 

1.拖放textbox到页面,然后拖动calendarextender到页面。

1.拖放textbox控件到页面。
2.拖放TextBoxWatermarkExtender控件到页面,设置属性
3.配合css样式会让这个控件更加的漂亮。

 

更多的教程不用下载直接在线观看

最新推出:

图片 1

http://www.bcsnjd.cn

编程少年基地

最新推出:

2.设置calendarextender的TargetControlID为textbox的id。

 

张孝祥java视频系列教程

ASP.NET快速入门系列视频讲座

控件名:TextBoxWatermarkExtender
效果和用途:这个控件的用途其实很广,在一个textbox中写上提示信息,当鼠标移到上面的时候,则提示消失
属性:
        
TargetControlID
:该控件的目标关联控件。
         WatermarkCssClass:产生水印效果的css样式。
         WatermarkText:有水印效果时,水印上的文本。

 

 

  <style type=”text/css”>
        .unwatermarded
        {
            height:18px;
            ;
            font-weight:bold;
        }
       
        .watermarked
        {
            height:20px;
            ;
            padding:2px 0 0 2px;
            border:1px solid #BEBEBE;
            background-color:#F0F8FF;
            color:gray;
        }
    </style>
   
eg:

.ContainPanel
{
    background:#ffcc00;
    font-size:12px;
    padding:3px;
    border:solid 1px #666;
    line-height:150%;
}
 
.link
{
    color:#666;
    font-size:12px;
}

张孝祥java视频系列教程

————————————————————

控件名: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>

 

 

http://www.bcsnjd.cn

效果为:

更多的教程不用下载直接在线观看

 

图片 2

<head runat=”server”>
    <title>无标题页</title>
   
    <style type=”text/css”>
        .unwatermarded
        {
            height:18px;
            ;
            font-weight:bold;
        }
       
        .watermarked
        {
            height:20px;
            ;
            padding:2px 0 0 2px;
            border:1px solid #BEBEBE;
            background-color:#F0F8FF;
            color:gray;
        }
    </style>
   
</head>
<body style=”text-align: center”>
    <form id=”form1″ runat=”server”>
    <div>
        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
        </asp:ScriptManager>
        <br />
        用户名: 
        <asp:TextBox ID=”TextBox1″ runat=”server”
CssClass=”unwatermarded”></asp:TextBox>
        <cc1:TextBoxWatermarkExtender ID=”TextBoxWatermarkExtender1″
runat=”server” TargetControlID=”TextBox1″
            WatermarkText=”用户名必须以字母开头”
WatermarkCssClass=”watermarked”>
        </cc1:TextBoxWatermarkExtender>
   
    </div>
    </form>
</body>

cs页面:
   protected void OnSelect(object sender, EventArgs e)
    {
        TextBox1.Text = ((LinkButton)sender).Text;
    }
 
css样式:

图片 3

图片 4

提供代码测试、视频培训等功能

图片 5


更多的教程不用下载直接在线观看

图片 6

张孝祥java视频系列教程

————————————————————

5.如果想像某些网站那样既可以输入时间也可以选择,单击日历图片出现日历,供选择可以这样做

效果图:
图片 7图片 8

效果:
图片 9图片 10图片 11

图片 12

提供代码测试、视频培训等功能

ASP.NET快速入门系列视频讲座

在textbox后面加入图片 13这样的一张图片的控件,然后设置calendarextender控件的PopupButtonID=”Image1″

 

编程少年基地

 

http://www.bcsnjd.cn

 

控件名:calendarextender

 

图片 14

提供代码测试、视频培训等功能

图片 15


3.为calendarextender的样式,编写css样式:

图片 16

4.设置calendarextender的CssClass=”MyCalendar”

————————————————————

用途和效果:其实这个控件的效果在网页上很多的地方都可以看到,当然可以完成这个功能的办法也是很多……

效果如图:

最新推出:

.MyCalendar .ajax__calendar_container {
border:1px solid #646464;
background-color: #FFFBCE;
color: red;
}  //这只是一个大概的设置,可以更详细

用法:该控件的用法很是简单,只是简单的拖放就能够完成其功能