038. asp.netWeb用户控件之六实现日期选择的用户控件
web用户控件的ascx代码:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SelectDate.ascx.cs" Inherits="SelectDate" %> <script type="text/javascript" src="js/jquery.1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.datepick.js"></script> <script type="text/javascript" src="js/jquery.datepick-zh-CN.js"></script> <script type="text/javascript"> $(function() { $('#txtdate').datepick({ dateFormat: 'yyyy/mm/dd'}); }); </script> <link href="js/redmond.datepick.css" rel="stylesheet" type="text/css" /> <%--将datepick框架应用到txtdate输入框中--%> <input type="text" id="txtdate" name="tdate" style="width: 120px"; readonly="readonly"/> <%--该用户控件中包含了一个文本输入框, 该文本输入框通过JQuery和DatePick实现了日期选择, 但并未实现输入内容的合法性验证, 最简单的方式就是设置其readonly--%>
web用户控件的ascx.cs代码
public partial class SelectDate : System.Web.UI.UserControl { /// <summary> /// 该方法用户返回用户选中的日期 /// </summary> /// <returns></returns> public string getvalue() { System.Collections.Specialized.NameValueCollection nv = new System.Collections.Specialized.NameValueCollection(System.Web.HttpContext.Current.Request.Form); return nv.GetValues("tdate")[0].ToString(); } protected void Page_Load(object sender, EventArgs e) { } }
Default.aspx页面代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register src="SelectDate.ascx" tagname="SelectDate" tagprefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <style type="text/css"> .style1 { width: 127px; } .style2 { width: 100px; } </style> </head> <body> <form id="form1" runat="server"> <table align="center" cellpadding="0" cellspacing="0" style="width: 315px"> <tr> <td class="style2"> 用 户 名：</td> <td class="style1"> <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox> </td> <td > <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUserName" ErrorMessage="*"></asp:RequiredFieldValidator> </td> </tr> <tr> <td class="style2"> 密 码：</td> <td class="style1"> <asp:TextBox ID="txtPwd" runat="server"></asp:TextBox> </td> <td > <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPwd" ErrorMessage="*"></asp:RequiredFieldValidator> </td> </tr> <tr> <td class="style2"> 年 龄：</td> <td class="style1"> <asp:TextBox ID="txtAge" runat="server"></asp:TextBox> </td> <td > <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="年龄输入有误" Font-Size="9pt" MaximumValue="100" MinimumValue="18" Type="Integer"></asp:RangeValidator> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator> </td> </tr> <tr> <td class="style2"> 性 别：</td> <td class="style1"> <asp:RadioButtonList ID="rdbSex" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Selected="True">男</asp:ListItem> <asp:ListItem>女</asp:ListItem> </asp:RadioButtonList> </td> <td > </td> </tr> <tr> <td class="style2"> 生 日：</td> <td class="style1"> <uc1:SelectDate ID="SelectDate1" runat="server" /> </td> <td > </td> </tr> <tr> <td class="style2"> </td> <td class="style1"> <asp:Button ID="Button2" runat="server" Text="注册" onclick="Button2_Click" Width="119px" /> </td> <td > </td> </tr> </table> </form> </body> </html>
Default.aspx.cs页面代码:
protected void Button2_Click(object sender, EventArgs e) { if (SelectDate1.getvalue() != "") { string info ="用户名："+txtUserName.Text + "/密码：" + txtPwd.Text + "/年龄：" + txtAge.Text + "/性别：" + rdbSex.SelectedValue + "/生日：" + SelectDate1.getvalue(); ClientScript.RegisterStartupScript(this.GetType(), "", "alert('" + info+ "');", true); } else { ClientScript.RegisterStartupScript(this.GetType(), "", "alert('请选择生日');", true); } }
程序中所用到的JS文件下载地址:
