html5 input date 掩码

转载

mob64ca13fe62db 2025-01-06 12:57:16

文章标签 html5 input date 掩码服务器 button server html 文章分类 HTML5 移动开发

开发环境：
Microsoft Visual Studio 2005
系统：
Microsoft Windows XP SP2

一、使用 HtmlInputHidden 控件在本页面保持状态，并讨论在生成页面后通过 JavaScript 获取由HtmlInputHidden 控件生成的隐藏文本值。

    先说说在本页面保持状态，我们一般采用 ViewState 可以在同一页的多个请求间保存和还原服务器控件的视图状态，这种用法一般在服务器端使用。但是如果我们需要在生成页面后（也就是说要在客户端中）的 JavaScript 函数需要使用页面保持状态的值，我们可以将这类值在服务器端处理过程中放到隐藏文本框中，然后在 JavaScript 函数中来获取隐藏文本值。

   范例分别通过使用 html 服务器控件和 web 服务器控件来演示。

   先简单说说 html 服务器控件和 web 服务器控件的区别。

   HTML 服务器控件，服务器公开的 HTML 元素，可以通过添加 runat="server" 属性表明应将 HTML 元素作为服务器控件进行处理，还可以设置元素的 id 属性，可以通过编程方式引用控件，可以通过设置属性 (Attribute) 来声明服器控件实例上的属性 (Property) 参数和事件绑定。HTML 服务器控件公开一个对象模型，该模型十分紧密地映射到相应控件所呈现的 HTML 元素。[1]

    Web 服务器控件,它比 HTML 服务器控件具有更多内置功能。Web 服务器控件不仅包括窗体控件（例如按钮和文本框），而且还包括特殊用途的控件（例如日历、菜单和树视图控件）。Web 服务器控件与 HTML 服务器控件相比更为抽象，因为其对象模型不一定反映 HTML 语法。[1]

(1)使用 html服务器控件演示

Test.aspx 代码如下:

<% 
  ... 
  @ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test"  
  %> 
  

 
  <! 
  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 
  > 
  
 
  </ 
  head 
  > 
  
 
  < 
  body 
  > 
  
     
  < 
  form  
  id 
  ="form1" 
   runat 
  ="server" 
  > 
  
     
  < 
  div 
  > 
  
     
  < 
  input  
  id 
  ="HiddenValue" 
   type 
  ="hidden" 
   value 
  ="初始化的值为空" 
   runat 
  ="server" 
  /> 
  
         
  < 
  br  
  /> 
  
         
  < 
  input  
  id 
  ="txtTestValue" 
   type 
  ="text" 
   runat 
  ="server" 
  />< 
  br  
  /> 
  
         
  < 
  span  
  id 
  ="Span1" 
   runat 
  ="server" 
  > 
  
           标签:用来显示上一次隐藏文本框的值,完成保持页面状态的值功能 
  < 
  br  
  /> 
  
         
  </ 
  span 
  > 
  
         
  < 
  input  
  id 
  ="Submit1" 
   type 
  ="submit" 
   value 
  ="改变隐藏文本的值" 
   runat 
  ="server" 
   onserverclick 
  ="Submit1_ServerClick" 
  /> 
  
         
  < 
  input  
  id 
  ="Button2" 
   onclick 
  ="GetHideValue();" 
   type 
  ="button" 
   value 
  ="获得隐藏文本的值" 
    
  /></ 
  div 
  > 
  
     
  </ 
  form 
  > 
  
 
  </ 
  body 
  > 
  
 
  </ 
  html 
  > 
Test.aspx.cs 代码如下:
 
   
using    System;
   using 
   System.Data;
   using 
   System.Configuration;
   using 
   System.Collections;
   using 
   System.Web;
   using 
   System.Web.Security;
   using 
   System.Web.UI;
   using 
   System.Web.UI.WebControls;
   using 
   System.Web.UI.WebControls.WebParts;
   using 
   System.Web.UI.HtmlControls;

   public 
    
  partial 
    
  class 
   Test : System.Web.UI.Page
   ... 
  {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        string csName = "TextScript";
        Type csType = this.GetType();
        ClientScriptManager cs = Page.ClientScript;

        // 检查是否脚本是否已经被注册
        if (!cs.IsStartupScriptRegistered(csType, csName))
        ...{
            string csText = @"function GetHideValue()
                {                   
                    var obj = document.getElementById(""" + HiddenValue.ClientID + @""");
                    var str = obj.value;
                    alert(str);                             
                }";
            cs.RegisterStartupScript(csType, csName, csText, true);
        }
        if (Page.IsPostBack)
        ...{
            Span1.InnerHtml = "保存上一次的值: <b>" +
                            HiddenValue.Value + "</b>";
        }
    }
    protected void Submit1_ServerClick(object sender, EventArgs e)
    ...{
        HiddenValue.Value = txtTestValue.Value;
    }
} 
(2)使用 web 服务器控件来演示

TestWebControl.aspx 代码如下: 
   
<%   ...   @ Page Language="C#" AutoEventWireup="true" CodeFile="TestWebControl.aspx.cs" Inherits="TestWebControl"  
  %> 
  

   <!   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 
  > 
  
   </   head 
  > 
  
   <   body 
  > 
  
       <   form  
  id 
  ="form1" 
   runat 
  ="server" 
  > 
  
       <   div 
  > 
  
           <   input  
  id 
  ="HiddenValue" 
   runat 
  ="server" 
   type 
  ="hidden" 
   value 
  ="初始化的值为空" 
    
  />< 
  br  
  /> 
  
           <   asp:TextBox  
  ID 
  ="txtTestValue" 
   runat 
  ="server" 
  ></ 
  asp:TextBox 
  >< 
  br  
  /> 
  
           <   span  
  id 
  ="Span1" 
   runat 
  ="server" 
  > 
  标签:用来显示上一次隐藏文本框的值,完成保持页面状态的值功能. 
  </ 
  span 
  >< 
  br  
  /> 
  
           <   asp:Button  
  ID 
  ="Button1" 
   runat 
  ="server" 
   Text 
  ="改变隐藏文本的值" 
   OnClick 
  ="Button1_Click" 
    
  /> 
  
           <   input  
  id 
  ="Button2" 
   type 
  ="button" 
   value 
  ="获得隐藏文本的值" 
   onclick 
  ="GetHideValue();" 
    
  /> 
  
       </   div 
  > 
  
       </   form 
  > 
  
   </   body 
  > 
  
   </   html 
  > 
TestWebControl.aspx.cs 代码如下:
 
   
using    System;
   using    System.Data;
   using    System.Configuration;
   using    System.Collections;
   using    System.Web;
   using    System.Web.Security;
   using    System.Web.UI;
   using    System.Web.UI.WebControls;
   using    System.Web.UI.WebControls.WebParts;
   using    System.Web.UI.HtmlControls;

   public       partial 
    
  class 
   TestWebControl : System.Web.UI.Page
   ...   {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        string csName = "TextScript";
        Type csType = this.GetType();
        ClientScriptManager cs = Page.ClientScript;

        // 检查是否脚本是否已经被注册
        if (!cs.IsStartupScriptRegistered(csType, csName))
        ...{
            string csText = @"function GetHideValue()
                {                   
                    var obj = document.getElementById(""" + HiddenValue.ClientID + @""");
                    var str = obj.value;
                    alert(str);                             
                }";
            cs.RegisterStartupScript(csType, csName, csText, true);
        }
        if (Page.IsPostBack)
        ...{
            Span1.InnerHtml = "保存上一次的值: <b>" +
                            HiddenValue.Value + "</b>";
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    ...{
        HiddenValue.Value = txtTestValue.Text;
    }
} 
 
二、使用 HtmlInputHidden 控件跨页面传值

     通过指定服务器控件 Button 的 PostBackUrl属性可以提交到指定的页面。在该方式下，既然提到跨页面传值，除了使用 HtmlInputHidden 控件跨页面传值，范例中还提供其他四种传值方式！非通过指定服务器控件 Button 的 PostBackUrl属性跨页面传值的其他方式见：

源页面:FormerPage.aspx 代码如下:
 
   
<%   ...   @ Page Language="C#" AutoEventWireup="true" CodeFile="FormerPage.aspx.cs" Inherits="FormerPage"    %>   

   <!   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 
  > 
  
   </   head   >   
   <   body   >   
       <   form    id   ="form1" 
   runat 
  ="server" 
  > 
  
       <   div   >   
           <   input    id   ="HiddenValue" 
   runat 
  ="server" 
   type 
  ="hidden" 
   value 
  ="初始化的值为空" 
    
  />< 
  br  
  /> 
  
           <   asp:TextBox    ID   ="txtTestValue" 
   runat 
  ="server" 
  ></ 
  asp:TextBox 
  >< 
  br  
  /> 
  
           <   asp:Button    ID   ="Button1" 
   runat 
  ="server" 
   OnClick 
  ="Button1_Click" 
   PostBackUrl 
  ="~/DestinationPage.aspx" 
  
            Text   ="改变隐藏文本的值"       />     
  </ 
  div 
  > 
  
       </   form   >   
   </   body   >   
   </   html   > 
FormerPage.aspx.cs 代码如下:
 
   
using    System;
   using    System.Data;
   using    System.Configuration;
   using    System.Collections;
   using    System.Web;
   using    System.Web.Security;
   using    System.Web.UI;
   using    System.Web.UI.WebControls;
   using    System.Web.UI.WebControls.WebParts;
   using    System.Web.UI.HtmlControls;

   public       partial       class 
   FormerPage : System.Web.UI.Page
   ...   {
    public string TestValue
    ...{
        get
        ...{
            return this.txtTestValue.Text;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    ...{
        
    }
    protected void Button1_Click(object sender, EventArgs e)
    ...{
        HiddenValue.Value = txtTestValue.Text;

        ArrayList myList = new ArrayList(3);//创建动态数组
        myList.Add("Hello,Array1! ");//向动态数组中添加新的值
        myList.Add("Hello,Array2!");
        myList.Add("Hello,Array3!");
        //Context可保存任意数据类型,Context字典特定于某个Http请求。
        //对于不同客户端,值是不一样的。
        Context.Items["destinationList"] = myList;//在Context.Items中保存动态数组

        Context.Items.Add("newContext", "Hello,NewContext");//在Context.Items中保存一组名称-值的数据
    }
} 
目标页面:

DestinationPage.aspx 代码如下: 
   
<%   ...   @ Page Language="C#" AutoEventWireup="true" CodeFile="DestinationPage.aspx.cs" Inherits="DestinationPage"    %>   
   <%   ...   @ PreviousPageType VirtualPath="~/FormerPage.aspx"    %>    
   <!   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 
  > 
  
   </   head   >   
   <   body   >   
       <   form    id   ="form1"    runat   ="server" 
  > 
  
       <   div   >   
    
       </   div   >   
       </   form   >   
   </   body   >   
   </   html   > 
DestinationPage.aspx.cs 代码如下:
 
   
using    System;
   using    System.Data;
   using    System.Configuration;
   using    System.Collections;
   using    System.Web;
   using    System.Web.Security;
   using    System.Web.UI;
   using    System.Web.UI.WebControls;
   using    System.Web.UI.WebControls.WebParts;
   using    System.Web.UI.HtmlControls;

   public       partial       class    DestinationPage : System.Web.UI.Page
   ...   {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        if (Page.PreviousPage != null)
        ...{
            //通过隐藏文本框传递值
            HtmlInputHidden htmlInputHidden = (HtmlInputHidden)Page.PreviousPage.FindControl("HiddenValue");
            if (htmlInputHidden != null)
            ...{
                string htmlInputHiddenValue = htmlInputHidden.Value;
                Response.Write("<script language='javascript'>alert('传递过来的值:" + htmlInputHiddenValue  + "');</script>"); 
            }
            //通过服务器控件传递值
            TextBox tb  = (TextBox)Page.PreviousPage.FindControl("txtTestValue");
            if (tb != null)
            ...{
                string testValue1 = tb.Text;
            }
            
            string testValue2 = PreviousPage.TestValue;//通过属性跨页面传递值
            string　contextItemsValue = Context.Items["newContext"].ToString();//通过FormerPage中Context的Items获取值 
            ArrayList　listResult = (ArrayList)Context.Items["destinationList"];//通过FormerPage中Context的Items获取对象，强制转换类型:

        }
    }
}

本文：
[1] MSDN 服务器控件

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。