利用Asp.net中的AJAX制作网页上自动选取开始日期及结束日期的用户自定义控件

简介:
  前段时间用过一个酒店入住预约网站,当你点击"入住时间"时会悬浮出一对并列的日历,然后点击左边的日历就能选择入住时间,点击右侧的日历就能自动得到离店时间,当时没有太留意是怎么实现的,现在在做项目时,需要这样的日期选择功能,又到了那个网站查看了源代码,发现好像是用js和div做出来的,在网上找了很多博客,希望得到这样的代码,但是都不尽如人意,由于我一点都不会js,这个模块又很重要,所以干脆自己做一个用户自定义控件吧,功能是实现了,但是美感和代码质量是一定比不上在客户端做了,如果有路过的朋友知道用js和div做我如下的效果,请一定给小女我留言,给我指点下迷津。
   第一步:制作自定义用户控件datecontrol.ascx,为了实现部分页面刷新,使用了vs2008中的Ajax控件组,在页面拖放scriptmanagerproxy及updatepanel控件,在updatepanel中放入一个label1、一个textbox1、一个button1,给button的text之中加入一个向下的箭头(可以从word文档中粘贴一个特殊符号 ▼,当然如果你有合适的ico也可以拖放一个imagebutton,修饰的更漂亮一些),然后在这三个并排的控件后加一个<br>,另起一行加入一个标准的calendar1(web)控件, 实现效果是当点击button1时,才出现calendar1,textbox1的值就是选择的日期,label1提供了一个只写属性,给这个日历控件定义使用说明,如label1.value=“入店时间"或"开始时间"等。我们来看一下客户端源代码:
InBlock.gif 1<%@ Control Language= "C#" AutoEventWireup= "true" CodeFile= "datecontrol.ascx.cs" Inherits= "datecontrol"%>         
InBlock.gif 2                        <asp:ScriptManagerProxy ID= "ScriptManagerProxy1" runat= "server"
InBlock.gif 3</asp:ScriptManagerProxy> 
InBlock.gif 4                         <asp:UpdatePanel ID= "UpdatePanel1" runat= "server"
InBlock.gif 5                                <ContentTemplate> 
InBlock.gif 6                                        <asp:Label ID= "Label1" runat= "server"></asp:Label> 
InBlock.gif 7                                        <asp:TextBox ID= "TextBox1" runat= "server" ValidationGroup= "a"></asp:TextBox> 
InBlock.gif 8                                        <asp:Button ID= "Button1" runat= "server" Font-Size= "XX-Small"    
InBlock.gif 9                                                ForeColor= "#006600" Height= "22px" onclick= "Button1_Click" Text= "▼"    
InBlock.gif10                                                Width= "19px" /><br> 
InBlock.gif11                                        <asp:Calendar ID= "Calendar1" runat= "server" BackColor= "White"    
InBlock.gif12                                                BorderColor= "#3366CC" BorderWidth= "1px" CellPadding= "1"    
InBlock.gif13                                                DayNameFormat= "Shortest" Font-Names= "Verdana" Font-Size= "8pt"    
InBlock.gif14                                                ForeColor= "#003399" Height= "82px"    
InBlock.gif15                                                onselectionchanged= "Calendar1_SelectionChanged" Width= "297px"    
InBlock.gif16                                                Visible= "False"
InBlock.gif17                                                <SelectedDayStyle BackColor= "#009999" Font-Bold= "True" ForeColor= "#CCFF99" /> 
InBlock.gif18                                                <SelectorStyle BackColor= "#99CCCC" ForeColor= "#336666" /> 
InBlock.gif19                                                <WeekendDayStyle BackColor= "#CCCCFF" /> 
InBlock.gif20                                                <TodayDayStyle BackColor= "#99CCCC" ForeColor= "White" /> 
InBlock.gif21                                                <OtherMonthDayStyle ForeColor= "#999999" /> 
InBlock.gif22                                                <NextPrevStyle Font-Size= "8pt" ForeColor= "#CCCCFF" /> 
InBlock.gif23                                                <DayHeaderStyle BackColor= "#99CCCC" ForeColor= "#336666" Height= "1px"/> 
InBlock.gif24                                                <TitleStyle BackColor= "#003399" BorderColor= "#3366CC" BorderWidth= "1px"    
InBlock.gif25                                                        Font-Bold= "True" Font-Size= "10pt" ForeColor= "#CCCCFF" Height= "25px" /> 
InBlock.gif26                                        </asp:Calendar>                                        
InBlock.gif27                                </ContentTemplate> 
InBlock.gif28                        </asp:UpdatePanel>
设计页面的效果图如下:
第二步:实现自定义控件服务器端代码:
InBlock.gif 1using System.Linq; 
InBlock.gif 2using System.Web; 
InBlock.gif 3using System.Web.Security; 
InBlock.gif 4using System.Web.UI; 
InBlock.gif 5using System.Web.UI.HtmlControls; 
InBlock.gif 6using System.Web.UI.WebControls; 
InBlock.gif 7using System.Web.UI.WebControls.WebParts; 
InBlock.gif 8using System.Xml.Linq; 
InBlock.gif 9 
InBlock.gif10public partial  class datecontrol : System.Web.UI.UserControl 
InBlock.gif11{     
InBlock.gif12         protected  void Page_Load( object sender, EventArgs e) 
InBlock.gif13        {             
InBlock.gif14        } 
InBlock.gif15         //在拖放日历控件是,先把它的visible=“false”;点击button是日历控件显示出来。 
InBlock.gif16         protected  void Button1_Click( object sender, EventArgs e) 
InBlock.gif17        { 
InBlock.gif18                 this.Calendar1.Visible =  true;            
InBlock.gif19        }    
InBlock.gif20      //在日历控件的选中事件中写textbox1获取选中的日期的方法,并且选择后,日历再隐藏。 
InBlock.gif21         protected  void Calendar1_SelectionChanged( object sender, EventArgs e) 
InBlock.gif22        { 
InBlock.gif23                 this.TextBox1.Text = Calendar1.SelectedDate.ToShortDateString(); 
InBlock.gif24                 this.Calendar1.Visible =  false
InBlock.gif25        } 
InBlock.gif26         //提供一个只读属性,可以得到textbox1的内容text 
InBlock.gif27         public  string DateStr 
InBlock.gif28        { 
InBlock.gif29                get 
InBlock.gif30                { 
InBlock.gif31                         return TextBox1.Text; 
InBlock.gif32                } 
InBlock.gif33        } 
InBlock.gif34         //提供一个只写属性,可以按照你的用法自己填写它的内容。 
InBlock.gif35         public  string LableText 
InBlock.gif36        { 
InBlock.gif37                set { Label1.Text = value; } 
InBlock.gif38        } 
InBlock.gif39}
 这样一个自定义的日历控件就写完了。
第三步:具体使用。现在我们来看一下具体怎么用这个自定义控件,下面是我现在做的一个项目,有个页面hisotrytime.aspx中用到时间段查询,我就使用了在这个页面中使用了两个自定义的日历控件,拖放到页面上的<tr>中,他们分别是date1、date2.在使用这个控件时,因为用到了Ajax,就必须加入一个scriptmanager,具体为什么加,小女因为没学过Ajax,只是在报错时vs提示必须加我就加上了,结果好用 。现在还没有时间好好研究为什么,将来一定苦心专研技术,希望路过的朋友们提出自己的见解, 我好吸取你的精华,加入到我的hisotrytime.aspx页面的效果图是这样的。
设置自定义控件 lableText的只写属性(我们自己封装好的只写属性第二步中的第35行),添加内容“开始时间:”,date2中lableText=“结束时间”;
        在页面hisotrytime.aspx中添加一个imagebutton1,图片显示为“开始搜索”,也将是选择完开始时间和结束时间后,点击搜索,我的GridView7中,就填充好所有符合条件的数据,看一下我hisotrytime.aspx页面的客服端代码:
InBlock.gif 1using System; 
InBlock.gif 2using System.Collections; 
InBlock.gif 3using System.Configuration; 
InBlock.gif 4using System.Data; 
InBlock.gif 5using System.Linq; 
InBlock.gif 6using System.Web; 
InBlock.gif 7using System.Web.Security; 
InBlock.gif 8using System.Web.UI; 
InBlock.gif 9using System.Web.UI.HtmlControls; 
InBlock.gif10using System.Web.UI.WebControls; 
InBlock.gif11using System.Web.UI.WebControls.WebParts; 
InBlock.gif12using System.Xml.Linq; 
InBlock.gif13 
InBlock.gif14public partial  class Teacher_hisotrytime : System.Web.UI.Page 
InBlock.gif15{ 
InBlock.gif16         string constr = ConfigurationManager.ConnectionStrings[ "constr"].ConnectionString; 
InBlock.gif17        DataOperate DO =  new DataOperate(); 
InBlock.gif18         string marketid; 
InBlock.gif19         string year; 
InBlock.gif20         string sql; 
InBlock.gif21             
InBlock.gif22         protected  void Page_Load( object sender, EventArgs e) 
InBlock.gif23        { 
InBlock.gif24                 if (! this.IsPostBack) 
InBlock.gif25                { //这个页面下面(我没有截图的部分)是一个点击GridView7中的button列所产生的数据显示,我放到一个panel1中,页面第一次加载是不体现,当点击button传入主键后才会显示。 
InBlock.gif26                         this.Panel1.Visible =  false;                                         
InBlock.gif27                } 
InBlock.gif28                 //用一个隐藏控件保存主键,这样页面加载后不会丢失主键。 
InBlock.gif29                marketid = HiddenField1.Value; 
InBlock.gif30        } 
InBlock.gif31         protected  void ImageButton1_Click1( object sender, ImageClickEventArgs e) 
InBlock.gif32        { 
InBlock.gif33              string begindate=  this.date1 .DateStr; //利用自定义控件的只读属性得到textbox中的text日期值作为开始时间 
InBlock.gif34              string enddate =  this.date2.DateStr; //利用自定义控件的只读属性得到textbox中的text日期值作为结束时间 
InBlock.gif35              //当用户没有选取日期时,为避免报错,就直接获取当前时间 
InBlock.gif36                 if (begindate == "") 
InBlock.gif37             { 
InBlock.gif38                     begindate = DateTime.Now.ToShortDateString(); 
InBlock.gif39             } 
InBlock.gif40              if (enddate == "") 
InBlock.gif41             { 
InBlock.gif42                     enddate = DateTime.Now.ToShortDateString(); 
InBlock.gif43             } 
InBlock.gif44              //在market表中查询符合我时间段的数据,利用数据源绑定控件SqlDataSource6,直接填充到GridView7中 
InBlock.gif45             sql =  "select * from market    where    marketdate between    '" + begindate +  "'    and    '" + enddate +  "'";
InBlock.gif46                 //getdatatable()方法是我写的一个数据处理方法,返回查询满足sql条件的datatable。 
InBlock.gif47                DataTable dt = DO.GetDataTable(sql); 
InBlock.gif48                Label1.Text =  "共有" + dt.Rows.Count +  "个市场"
InBlock.gif49                SqlDataSource6.ConnectionString = constr; 
InBlock.gif50                SqlDataSource6.SelectCommand = sql; 
InBlock.gif51                GridView7.DataSourceID = SqlDataSource6.ID; 
InBlock.gif52        } 
InBlock.gif53     //下面是对GridView7做操作,目的是点击GridView7中的button列得到主键,我现在正在筹划一个GridView系列专题,会具体讲解下面的代码。 
InBlock.gif54              protected  void GridView7_RowCommand( object sender, GridViewCommandEventArgs e) 
InBlock.gif55        { 
InBlock.gif56                 if (e.CommandName ==  "cksj") //当鼠标点击的所有命令名中是“cksj”的事件命令时发生如下: 
InBlock.gif57                { 
InBlock.gif58                        marketid = e.CommandArgument.ToString(); 
InBlock.gif59                        HiddenField1.Value = marketid; 
InBlock.gif60                         this.Panel1.Visible =  true
InBlock.gif61                        gv6fill(); 
InBlock.gif62                        yearlist(); 
InBlock.gif63                } 
InBlock.gif64        }
第四步:写客户端的js脚本,提示开始时间不能大于结束时间,因为本人基本上不会js,所以从网上找到了一个获得当前时间的一个js的代码,在这里谢谢这位仁兄,下面我们来看一下客户端源代码。
    1 < asp:Content  ID ="Content1"  ContentPlaceHolderID ="head"  Runat ="Server" > 
    2         < style  type ="text/css" > 
    3        .style1 
    4        { 
    5                width: 100%; 
    6        } 
    7                .style4 
    8                { 
    9                        width: 660px; 
10                } 
11                
12                .style6 
13                { 
14                        height: 15px; 
15                } 
16         </style> 
17 </asp:Content> 
18 < asp:Content  ID ="Content2"  ContentPlaceHolderID ="ContentPlaceHolder1"  Runat ="Server" > 
19 < script  language ="javascript"  > 
20function getDate() 
21{ 
22     var d,s,t; 
23    d=new Date(); 
24    s=d.getFullYear().toString(10)+"-"; 
25    t=d.getMonth()+1; 
26    s+=(t>9?"":"0")+t+"-"; 
27    t=d.getDate(); 
28    s+=(t>9?"":"0")+t+" "; 
29//    t=d.getHours(); 
30//    s+=(t>9?"":"0")+t+":"; 
31//    t=d.getMinutes(); 
32//    s+=(t>9?"":"0")+t+":"; 
33//    t=d.getSeconds(); 
34//    s+=(t>9?"":"0")+t; 
35    return s; 
36} 
37function bj() 
38{ 
39if(document .getElementById ("ctl00$ContentPlaceHolder1$date1$TextBox1").value=="") 
40{ 
41var begin=getDate (); 
42} 
43else    
44{ 
45var begin=document.getElementById ("ctl00$ContentPlaceHolder1$date1$TextBox1").value; 
46} 
47if(document .getElementById ("ctl00$ContentPlaceHolder1$date2$TextBox1").value=="") 
48{ 
49var end=getDate (); 
50} 
51else    
52{ 
53var end= document.getElementById ("ctl00$ContentPlaceHolder1$date2$TextBox1").value; 
54} 
55if(begin>end) 
56{ 
57alert ("开始时间大于结束时间!"); 
58return false ; 
59} 
60else 
61{ 
62return true ; 
63} 
64 
65} 
66 
67 </script> 
68         < table  class ="style1" > 
69                 < tr > 
70                         < td  style ="font-weight: bold; font-size: x-large; color: #800000"  colspan ="2" > 
71                                 < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" > 
72                                 </asp:ScriptManager> 
73                                按创建时间查找市场     
74                                                                        <asp:ImageButton ID="ImageButton1" runat="server" Height="26px"    
75                                                                                ImageUrl="~/ICO/kaishi.gif" OnClientClick="return bj();"     Width="79px" /> 
76                                                                 </td> 
77                 </tr> 
78                                                         < tr > 
79                                                                <td style="font-weight: bold; font-size:large; color: #800000" align="left"    
80                                                                        valign="top"> 
81                                                                         < uc1:date  ID ="date1"  runat ="server"  LableText ="开始时间:" /> 
82                                                                 </td> 
83                                                                        <td style="font-weight: bold; font-size:large; color: #800000" align="left"    
84                                                                        valign="top"> 
85                                                                         < uc1:date  ID ="date2"  runat ="server"  LableText ="结束时间:" /> 
86                                                                 </td> 
87                                                         </tr> 
88                                                         < tr > 
89                                                                <td style="font-weight: bold; font-size:large; color: #800000" align="left"    
90                                                                        colspan="2"> 
91                                                                         < asp:Label  ID ="Label1"  runat ="server" > </asp:Label> 
92                                                                         < asp:SqlDataSource  ID ="SqlDataSource6"  runat ="server" > </asp:SqlDataSource> 
93                                                                 </td> 
94                                                         </tr> 
95                                                         < tr > 
96                         < td  class ="style4"  align ="left"  colspan ="2" > 
97                                <asp:GridView ID="GridView7" runat="server" AutoGenerateColumns="False"    
98                                        BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"    
99                                        CellPadding="3" ForeColor="Black" GridLines="Vertical" Width="107%"    
100                                        onrowcommand="GridView7_RowCommand" DataKeyNames="id" > 
101                                         < FooterStyle  BackColor ="#CCCCCC"  /> 
102                                         < Columns > 
103                                                 < asp:BoundField  DataField ="marketname"  HeaderText ="市场名称"  /> 
104                                                 < asp:BoundField  DataField ="marketpass"  HeaderText ="市场密码"  /> 
105                                                 < asp:BoundField  DataField ="marketyear"  HeaderText ="市场年份"  /> 
106                                                 < asp:BoundField  DataField ="groupnum"  HeaderText ="市场组数"  /> 
107                                                 < asp:BoundField  DataField ="csxj"  HeaderText ="初始现金"  /> 
108                                                 < asp:BoundField  DataField ="marketdate"  HeaderText ="市场创建时间"  /> 
109                                                 < asp:BoundField  DataField ="marketbz"  HeaderText ="市场描述"  /> 
110                                                 < asp:BoundField  DataField ="marketover"  HeaderText ="市场完成情况"     /> 
111                                                 < asp:TemplateField  HeaderText ="查看市场详情" > 
112                                                         < ItemTemplate > 
113                                                                 < asp:LinkButton  ID ="LinkButton1"  runat ="server" CommandArgument='<%#Eval("id") % >'    
114                                                                        CommandName="cksj">查看本市场企业数据 </asp:LinkButton> 
115                                                         </ItemTemplate> 
116                                                 </asp:TemplateField> 
117                                         </Columns> 
118                                         < PagerStyle  BackColor ="#999999"  ForeColor ="Black"  HorizontalAlign ="Center"  /> 
119                                         < SelectedRowStyle  BackColor ="#000099"  Font-Bold ="True"  ForeColor ="White"  /> 
120                                         < HeaderStyle  BackColor ="Black"  Font-Bold ="True"  ForeColor ="White"  /> 
121                                         < AlternatingRowStyle  BackColor ="#CCCCCC"  /> 
122                                         < EmptyDataTemplate >温馨提示:当前没有任何记录 </EmptyDataTemplate> 
123                                 </asp:GridView> 
124                         </td> 
125                 </tr>
 第20行的getdate()方法是获取当前时间,第37行bj()方法是比较开始时间不能大于结束时间,否则弹出对话款提示错误,在这里要说一下,39和47中的一串看似很奇怪的代码就是执行我的hisotry.aspx页面后,ie把我的自定义控件date1、date2中的textbox翻译成我们看到的源代码,找到这个源代码后,才能在客户端的脚本中判断它的.value了。
以上就是我总结的获取时间的日历控件的步骤,希望大家能用得上。
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185702如需转载请自行联系原作者

叶子文文
相关文章
|
2月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
2月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
7月前
|
XML 数据采集 JSON
scrapy_selenium爬取Ajax、JSON、XML网页:豆瓣电影
在网络爬虫的开发过程中,我们经常会遇到一些动态加载的网页,它们的数据不是直接嵌入在HTML中,而是通过Ajax、JSON、XML等方式异步获取的。这些网页对于传统的scrapy爬虫来说,是很难直接解析的。那么,我们该如何使用scrapy_selenium来爬取这些数据格式的网页呢?本文将为你介绍scrapy_selenium的基本原理和使用方法,并给出一个实际的案例。
|
4月前
|
开发框架 前端开发 JavaScript
Asp.net动态加载用户自定义控件,并转换成HTML代码
Asp.net动态加载用户自定义控件,并转换成HTML代码
23 0
|
4月前
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
32 0
|
4月前
|
存储 前端开发
ajax实现简单的点击左侧菜单,右侧加载不同网页
ajax实现简单的点击左侧菜单,右侧加载不同网页
32 0
|
7月前
|
数据采集 前端开发 JavaScript
Python爬虫实战:抽象包含Ajax动态内容的网页数据
Python爬虫实战:抽象包含Ajax动态内容的网页数据
|
7月前
|
前端开发 数据库
通过ajax调用数据字典数据动态添加到网页下拉列表
通过ajax调用数据字典数据动态添加到网页下拉列表
|
8月前
|
前端开发
解决.NET Core Ajax请求后台传送参数过大请求失败问题
解决.NET Core Ajax请求后台传送参数过大请求失败问题
|
9月前
|
开发框架 前端开发 JavaScript
【Asp.net】 Ajax小例子
【Asp.net】 Ajax小例子
61 0

热门文章

最新文章

相关产品

  • 云迁移中心