038. asp.netWeb用戶控件之六實現日期選擇的用戶控件

本文轉載自查看原文 2016-12-19 09:53 2147 asp.net

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">
                    用&nbsp; 戶&nbsp; 名：</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">
                    密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 碼：</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">
                    年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 齡：</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">
                    性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 別：</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  >
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日：</td>
                <td class="style1">
                    <uc1:SelectDate ID="SelectDate1" runat="server" />
                </td>
                <td >
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style1">
                    <asp:Button ID="Button2" runat="server" Text="注冊" onclick="Button2_Click" 
                        Width="119px"  />
&nbsp;
                    </td>
                <td >
                    &nbsp;</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文件下載地址:

http://pan.baidu.com/s/1dFKavfz

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JAVA實現日期選擇控件用戶控件 ASP.NET--------Web用戶控件 datetimepicker —— 日期選擇控件 ASP.NET(c#) 日期選擇控件的另一種實現方法創建WPF用戶控件 winform用戶控件用戶控件 WebUserControl .ascx WPF 用戶控件的使用 ASP.NET MVC中加載WebForms用戶控件(.ascx)