WebApp


    打开 Visual Studio - 新建项目 - Visual C#(.NET Framework4) Web ASP.NET Web 应用程序 Visual C# -位置 - WebApp 名称 -确定

    打开 Site.Master 在h1中写 Welcome To 我的 ASP.NET 应用程序NICE TO MEET YOU!

web.config  --配置 ASP.NET 应用程序

Site.master     母版页

Default.aspx

Scripts

Login.aspx.cs   登录

Register.aspx   注册

ChangePassword.aspx  密码

引用

Properties  项目

 正则表达式构成了可用于在字符串中查找精确定义格式的语言


在WebApp 文件夹下 添加 images 文件  在 VS 中 解决方案资源管理器 中 - 显示所有文件 看见 images 右键 包括在项目中 (从项目中排除)

添加 Picture.aspx 

在设计页面上 添加 Image 控件  -  button 按钮

Image   ImageUrl 
        ImageAlign - Middle

在 Site.Master 中 添加
    <asp:MenuItem NavigateUrl="~/Picture.aspx" Text="PictureView" />
    <body>
    <bgsound src="sounds\Free Party - 拥抱着你的滋味.mp3" />   
    <bgsound src="file:///D:\Training\NewWebApp\NewWebApp\sounds\aimini - 遇.mp3" />
    <bgsound src="sounds\04 You & Me.mp3" />
    <bgsound src="sounds\because of you 凯丽 克莱克森.mp3" />
    </body>

在设计上双击按钮到 Picture.aspx.cs 中写:

      protected void Button1_Click(object sender, EventArgs e)
        {   //using System.IO;
            string[] pictrues = Directory.GetFiles(@"C:\Users\zhen\Desktop\11\WebApp\WebApp\images\");
            Random random = new Random();

            string path = pictrues[random.Next(1,pictrues.Length) ];

            string imageUrl = path.Substring(path.IndexOf("image")).Replace("\\", @"/");           

            Image1.ImageUrl = imageUrl;
            //Image1.ImageUrl = "image/g.jpg";
        }
    } 
 
---------------------------------------------

添加 Reservation.aspx 预订(使用Site.Master)页面母版

-- 添加控件和文本

“设计”视图,键页标题,如 “Submit a Reservation”(提交预订)

插入表 -- 2 列 7 行  最后两列分别- 合并单元格


“工具箱”-“标准”组中,将控件拖该页上 按指示设置其属性
 在文本框之前键入文本作为标题
-------------------------------------------------
left

电子邮件
预订人数
预订日期
Checkbox 属性
ID                checkPhone
AutoPostBack      True
Text               通过电话确认预订
确认电话号码
------------------------------------
right

  控件          属性
TextBox   ID : "textEmail"
TextBox   ID : "textNumber"
TextBox   ID :"textDate"

TextBox
          ID :  textPhoneNumber
       Enabled :        False

TextBox   ID:     textagain
           Enabled :False  
           TextMode:Password
---------------------------------

验证控件属性

    属性               设置
1) RequiredFieldValidators1
ControlToValidate    textEmail
Display              Dynamic
ErrorMessage         电子邮件地址必填
ForeColor            red
Text                 *
ValidationGroup      AllValidators

2) RequiredFieldValidators2
ControlToValidate    textNumber
Display              Dynamic
ErrorMessage         请输入预订人数
ForeColor            red
Text                 *
ValidationGroup      AllValidators

3) RequiredFieldValidators3
ControlToValidate    textDate
Display              Dynamic
ErrorMessage         请输入预订日期
ForeColor            red
Text                 *
ValidationGroup      AllValidators

4) RequiredFieldValidator 属性
               ID:    requirePhone
ControlToValidate:    textPhoneNumber 
 ErrorMessage:       请输入正确的确认电话号码
      Text :               *
                           red
ValidationGroup:     AllValidators

5) RequiredFieldValidator
               ID:    requirePhone0
ControlToValidate:    textagain 
 ErrorMessage:       请输入正确的确认电话号码
      Text :               *
                           red
ValidationGroup:     AllValidators
Display                 Dynamic

1) RegularExpressionValidator1
ControlToValidte    textEmail
Display             Dynamic
ErrorMessage        电子邮件地址必须是name@domain.xyz的形式
ForeColor            red
Text                 无效格式
ValidationExpression \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
ValidationGroup     AllValidators

2) RangeValidator1
ControlToValidte     textNumber
Display              Dynamic
ErrorMessage         请填入1~20的数字
ForeColor            red
MaximumValue          20
MinimumValue           1
Text                 预订人数不正确
Type                 Integer
ValidationGroup      AllValidators

3) CustomValidator1
ControlToValidate    textDate
Display              Dynamic
ErrorMessage         预订不正确
ForeColor            red
Text                 请输入正确的日期
ValidationGroup      AllValidators

4) RegularExpressionValidator
ID                   regularPhone
ControlToValidte    textPhoneNumber
Display             Dynamic
ErrorMessage        电话号码格式不正确
ForeColor            red
Text                 电话号码格式无效!
ValidationExpression "(\(\d{3}\)|\d{3}-)?\d{8}"


 5.)CompareValidator 属性  
          ID:             comparePhone
 ControlToCompare:        textPhone
 ControlToValidate:       textagain
      Display:              Dynamic
  ErrorMessage:     两次输入的电话号码不一样
                            red
     Text:          两次输入的电话号码不一样

-------------------------------------
all

Button    ID : "buttonSubmit"
          Text:"Submit Request"(提交申请)
          ValidationGroup:"AllValidators"

--显示错误信息的方法 
ValidationSummary 控件 拖动 Button
 后 ValidationGroup - AllValidators

--弹出消息
 ValidationSummary - ShowMessageBox - true

Label     ID:"labelMessage"
          Text:(空白)

-------------------------------------------------
--SUBMIT 按钮 Click 事件

protected void buttonSubmit_Click(object sender,EventArgs e)
{
   if(Page.IsValid) {labelMessage.Text = "Your reservation has been processed";}
}

--创建 Page_Load 处理程序

设计视图 - 双击页上空白区域 - 创建 Page_Load 处理程序protected void Page_Load(object sender,EventArgs e)
{
   labelMessage.Text = "";
   //labelMessage.Text = string.Empty;
}

--测试基本验证

 在输入有效值后 单击 提交申请 按钮 验证正常工作后 关闭浏览器


双击 CustomValidator 控件-为ServerValidate 事件创建一个处理程序

protected void CustomValidator1_ServerValidate(object source,ServerValidateEventArgs args)
{    
             try
            {
                DateTime.ParseExact(args.Value, "d", System.Globalization.DateTimeFormatInfo.InvariantInfo);
                args.IsValid = true;
            }
            catch (Exception)
            {
                args.IsValid = false;
                //throw;
            }
}

修改 Button_Click 事件

protected void buttonSubmit_Click(object sender,EventArgs e)
{
   if(Page.IsValid)
  {
    labelMessage.Text = "Your reservation has been processed.";
   else
    {
    labelMessage.Text = "Page is not valid.";
    }
  }
}

Page.IsValid 属性

打开或切换到 Reservation.asx 的源代码中 在</tabel>后 添加以下客户端脚本块
客户端脚本

<script language ="javascript" type="text/javascript">
function validateDate(oSrc,args)
{
 var iDay,iMonth,iYear;
 var arrValues;
 arrValues = args.Value.split("/");
 iMonth = arrValues[0];
 iDay = arrValues[1];
 iYear = arrValues[2];

 var testDate = new Date(iYear,iMonth - 1,iDay);
 if ((testDate.getDate() != iDay) ||
     (testDate.getMonth() != iMonth - 1)||
     (testDate.getFullYear() != iYear))
    //(testDate.getYear() != iYear))
  {
    args.IsValid = false;
    return;
  }
  return true;
}</script>

修改:源代码

style="text-align: center"<table style="border-style: groove; border-width: thin; height:240px; width: 100%;">

 添加:style="text-align: center"

 <td style="text-align: center">预订人数</td>

------------------------------------------------------------------------

将插入点放在 <asp:customvalidator> 元素在“属性”窗口中,将该控件的 ClientValidationFunction 属性设置为 validateDate

CustomValidator  EnableClientScript - false

 ClientValidationFunction   validateDateTime

在浏览器查看---在Site.Master上添加

<asp:MenuItem NavigateUrl="~/Reservation.aspx" Text="预订餐厅" />

-添加单选框事件处理程序

protected void checkPhoneConfirmation_CheckedChanged(object sender, EventArgs e)
        {
             if (checkPhone.Checked)
            {
                textPhoneNumber.Enabled = true;
                textagain.Enabled = true;
                requirePhone.ValidationGroup = "AllValidators";
                //requirePhone0.ValidationGroup = "AllValidators";
                regularPhone.ValidationGroup = "AllValidators";
                comparePhone.ValidationGroup = "AllValidators";
            }
            else
            {
                textPhoneNumber.Enabled = false;
                textagain.Enabled = false;
                requirePhone.ValidationGroup = "";
                //requirePhone0.ValidationGroup = "";
                regularPhone.ValidationGroup = "";
                comparePhone.ValidationGroup = "";
            }
           
        }   

 “美国电话号码”
格式正确的电话号码应包括区号(3 个数字,可选字段),后跟一组 3 个数字字符、一个短划线加上一组 4 个数字字符
 
示例:(425) 555-0123、425-555-0123 或 555-0123

 (010)12345678
 010-12345678
 12345678

------------------------------------------------------------------
Site.css
/*自己加的
----------------------------------------------------*/
.leftColumn
        {
            width: 30%;
            height:28px;
            text-align:center;
            background-color:Blue;
        }
        .allColumn
        {
            width: 100%;
            height:28px;
            text-align:center;
        }
        .rightColumn
        {
             width: 70%;
             background-color:Green;
                    
        }

Reservation.aspx

 预订餐厅
    <table style="border: thick groove #00FFFF; border-width: thin; width: 100%; height: 240px;">
        <tr>
            <td class="leftColumn">
                电子邮件
            </td>
            <td class="rightColumn">
               
            <td class="leftColumn">
                预定人数
            </td>
            <td class="rightColumn">
               
            <td class="leftColumn">
                预定日期
            </td>
            <td class="rightColumn">
      
            <td class="leftColumn">
                <asp:CheckBox ID="checkPhone" runat="server" AutoPostBack="True" CausesValidation="True"
                    Text="通过电话进行验证" />
            </td>
            <td class="rightColumn">
               
            <td class="allColumn" colspan="2">
               
            <td class="allColumn" colspan="2" >
            
    </table>
--

posted @ 2012-04-20 17:45  珍爱贝贝1314  阅读(399)  评论(0编辑  收藏  举报