项目2任务1

项目二设计制作网络计算器•步骤一：界面设计—基本控件•步骤二：编写代码—语言基础•步骤三：数据验证—验证控件本项目学习目标掌握ASP.NET基本控件的使用方法掌握C#基本语句的编写方法掌握验证控件的使用方法服务器控件概述在Asp.net页面元素中，除了标准的HTML元素外，所有控件均运行于服务器端，所以称为服务器控件。Asp.net2.0中既有Html服务器控件，又有Web服务器控件，还有大量其他人提供的第三方服务器控件。这么多的控件，究竟怎样才能全部掌握啊？显然，要想掌握全部控件和属性是不可能的，一般只能掌握最常用的控件和属性。对于一些特殊控件和特殊属性，可以在用到的时候再去查阅有关资料。下面给大家两条建议。(1)注意总结共性(2)注意查阅.Net文档服务器控件分类在创建ASP.NET网页时，可以使用以下类型的控件：1.HTML服务器控件：HTML服务器控件属于HTML元素。2.Web服务器控件：这些控件比HTML服务器控件具有更多内置功能。Web服务器控件与HTML服务器控件相比更为抽象，因为其对象模型不一定反映HTML语法。3.用户控件：使用创建ASP.NET网页的相同技术创建可重复使用的自定义控件。VS2008工具箱中的控件类型Web服务器控件标准的Web服务器控件：包括最常用的控件，这类控件在网页中占90％。主要是指传统的Web窗体控件。数据控件：这类控件用来链接数据源。该类控件可细分为两种类型：数据源控件和数据绑定控件。验证控件：这类控件用来验证用户的输入。导航控件：与站点导航数据结合，实现站点导航功能。登录控件：为Web应用程序提供可靠完整的登录解决方案。服务器控件的基本属性HTML控件在创建站点时，有时对某些控件不需要服务器端做任何事。在这种情况下，只是想在页面上添加简单的静态HTML元素。如只是决定网页上元素的位置或提供一个容器给一组元素。HTML控件工具箱中包含一系列拖放控件，如Input、Table控件和div等，这些HTML控件对应着标准HTML元素。如inputtype=“text”name=“txtName”HTML服务器控件HTML服务器控件派生自命名空间System.Web.UI.HtmlControls。默认情况下，服务器无法使用纯粹的HTML控件，只有将HTML元素转换为HTML服务器控件，才将其公开为可在服务器上编程的元素。如inputtype=“text”name=“txtName”id=“txtName”runat=“server”HTML服务器控件比HTML元素多了两个服务器属性id和runat.HTML服务器控件HTML服务器控件具有以下几个重要特点：可在服务器上使用面向对象技术对其进行编程控制，这为编程开发提供了便利。提供了一组事件，可以为事件编写事件处理程序。自动维护控件状态。在页面窗体到服务器端往返期间，用户在HTML服务器控件中输入的值将在页面回传中自动维护。与验证控件进行交互。便于验证用户是否在控件输入了适当的信息。允许在HTML服务器控件中自定义属性。开发人员可以将任何需要的属性添加到HTML服务器控件的属性集中，页框架将读取并呈现它们而不更改其他任何功能。HTML输入控件工具箱的“HTML”选项卡上提供多个基于HTMLinput元素的控件：Input(Text)控件：inputtype=text元素Input(Password)控件：inputtype=password元素Input(Button)控件：inputtype=button元素Input(Submit)控件：inputtype=submit元素Input(Reset)控件：inputtype=reset元素Input(Checkbox)控件：inputtype=checkbox元素Input(Radio)控件：inputtype=radio元素Input(File)控件：inputtype=file元素Input(Hidden)控件：inputtype=hidden元素输入姓名：inputid=Text1type=textrunat=server/br/输入密码：inputid=Password1type=passwordrunat=server/inputid=Submit1type=submitvalue=提交onserverclick=Submit1_ServerClickrunat=server/inputid=Reset1runat=serveronserverclick=Reset1_ServerClicktype=resetvalue=重置/inputid=Button1runat=serveronserverclick=Button1_ServerClicktype=buttonvalue=按钮/ spanid=span1style=color:Greenrunat=server/注意：将此段代码复制到VS2003的文件中，并在界面文件中分别双击三个按钮，才起作用。protectedvoidSubmit1_ServerClick(objectsender,EventArgse){if(Password1.Value==asp)span1.InnerHtml=密码正确;elsespan1.InnerHtml=密码不正确;}protectedvoidReset1_ServerClick(objectsender,EventArgse){Text1.Value=;Password1.Value=;}protectedvoidButton1_ServerClick(objectsender,EventArgse){span1.InnerHtml=你单击了按钮;}计算器是我们日常生活中常用的工具之一，Windows系列操作系统本身也拥有计算器功能。网络计算器是通过Web页面，在网站上提供的计算服务，常见的形式有：住房公积金贷款利率计算器、商品价格折扣计算器等，因其方便、实用，被广泛运用到许多专业网站提供的服务中。图2-1计算器设计界面本计算器的功能和使用流程如下：根据用户输入的购房单价（元/M2）和购房面积（M2），以及选择的按揭成数和按揭年数，在点击“计算”之后，计算器会将计算出的结果“房款总额”、“月均还款”、“贷款总额”、“还款总额”、“首期付款”和“支付息款”，显示在对应的位置上。任务1掌握ASP.NET基本输入输出控件输入、输出控件是程序设计界面中最常用的控件。本任务将制作住房公积金贷款利率计算器的界面部分。具体包括，输入控件TextBox控件，输出控件Label控件以及Button按钮控件。1.1创建Label文本显示控件-WebForm2.aspx图2-2界面效果预览•作用：在页面中显示文本。一是起标识作用如“姓名”等，二是显示程序运行结果。•主要属性•Text•ID图2-3设计界面播放LabelP23.avi双击ImageButton控件，在该控件的单击事件中添加代码2-1。代码2-1：ImageButton按钮控件的单击事件protectedvoidImageButton1_Click(objectsender,ImageClickEventArgse){Label1.Text=您单击的图片像素点是:(+e.X.ToString()+,+e.Y.ToString()+);}1.2创建TextBox文本框控件图2-4界面效果预览TextBox控件作用：TextBox控件是一个可以输入单行文本、密码或者多行文本的控件。默认的情况下TextBox控件的TextMode属性是SingleLine，可以修改为MultiLine或Password。TextBox控件的格式：asp:TextBoxoptions/asp:TextBoxTextBox控件常用的属性、方法和事件属性/事件名说明Text字符串，初始化时显示的文字TextModeSingleLine/MultiLine/PasswordMaxLength表示在文本框中输入的最大字符数Rows当为多行文本时的行数Columns控件的宽度Wrap表示是否运行自动换行AutoPostBack是否允许自动回传事件到服务器TextChanged()当文字改变时触发的事件过程Focus()为控件设置输入焦点FindControl()查找指定参数ID的控件图2-5设计界面-WebForm3.aspx事件示例：privatevoidTextBox1_TextChanged(objectsender,System.EventArgse){Label1.Text=(TextBox1.Text);}//同时设置AutopostBack属性为True代码2-3：“测试”按钮的单击事件protectedvoidButton1_ServerClick(objectsender,EventArgse){passcheck();}双击“确定”按钮，添加代码2-4。代码2-4：“确定”按钮的单击事件protectedvoidSubmit1_ServerClick(objectsender,EventArgse){passcheck();}然后再添加一个方法，如代码2-5所示。代码2-5：passcheck方法protectedvoidpasscheck(){if((TextBox1.Text==asp.net)&&(TextBox2.Text==1234)){Response.Write(通过验证，您好！);}else{Response.Write(帐号或者密码错误，请重新输入！);TextBox1.Text=;TextBox2.Text=;}}1.3创建Button按钮控件图2-6•作用：触发某一事件。•主要属性•ID•Text•主要方法•Click()•类型•Button：分为提交按钮（默认）和命令按钮控件•LinkButton：超链接按钮控件，PostBackUrl•ImageButton：图像按钮控件，PostBackUrl，Imageurl•HyperLink：超链接控件，NavigateUrl界面部分代码：asp:Buttonid=Button1runat=serverText=OnClick事件Width=134px/asp:Buttonasp:Buttonid=Button2onmouseover=this.style.backgroundColor='green'onmouseout=this.style.backgroundColor='buttonface'runat=serverText=OnMouseOver事件/asp:Buttonasp:Buttonid=Button3onmouseover=this.style.fontWeight='bold'onmouseout=this.style.fontWeight='normal'runat=serverText=OnMouseOut事件Width=134px/asp:Button•CS代码：protectedvoidButton1_Click(objectsender,EventArgse){Label1.Text=OnClick事件触发;}1.4设计计算器界面图2-8界面的布局Table控件或元素创建Table控件包括两个步骤：添加表本身，然后再分别添加行和单元格。如果是在设计时添加行和列来创建静态表，最好使用HTML表元素(菜单：表－插入表)，而不使用Table服务器控件，因为HTML的表元素更简单。如果希望在运行时通过代码向表中添加行和列时，可以使用Table服务器控件（工具箱：标准－Table）。Table控件是用来在Web窗体页上创建通用表的。每个Table控件包含一个或多个TableRow对