《Lect04Web页面设计实例.ppt》由会员分享，可在线阅读，更多相关《Lect04Web页面设计实例.ppt（53页珍藏版）》请在三一办公上搜索。
1、计算机与IT入门,第四讲：Web页面设计实例,2,Outline,文件上传示例（FileUpload）调查页面（SurveyForm）表单验证（FormValidation）网格控件示例(GridView)连接Excel数据源Login页面示例,3,文件上传示例,文件上传是网页中常备的功能之一。时常需要编辑如下界面：,4,上传单个文件,使用FileUpload控件来作单个文件的上传控件基本语法如下,FileUpload控件可以视为一个文本框+浏览按钮的组合单击浏览按钮选择要上传的文件，文本框会显出被选中的文件路径,真正完成上传还需要另用一个按钮来处理,5,为了构建上述简单的界面，需要在页面的b
2、ody部分写入一个form代码,Label控件来显示一些信息，比如文件上传是否成功等,6,为了构建上述简单的界面，需要在页面的body部分写入一个form代码,到此，还有什么工作没有完成呢？,需要定义Button1的单击事件（消息）处理函数,7,Button1的单击处理函数编写（采取直接嵌在asp页面代码中的方法）,protected void Button1_Click(objectsender,EventArgse)/等待填入实际的代码,8,Button1的单击相应函数实际内容,功能：判断是否已经选中文件，是，将上传的文件保存在指定位置 否，输出错误信息,要操纵的变量：FileUpload
3、1,FileUpload控件的ID,9,现在，需要被操控的是一个FileUpload类的对象，要想使用该对象，必须先了解FileUpload类的成员变量以及方法请查阅要查阅起所有成员，check out,10,需要查两个点如何判断是否已有文件被选择上传？FileUpload类的成员HasFile如果其值为true，则表示有文件要上传如何将上传文件保存到server的某个位置？FileUpload类的方法SaveAs,11,protected void Button1_Click(objectsender,EventArgse)if(FileUpload1.HasFile)FileUpload1
4、.SaveAs(“CUploads”+FileUpload1.FileName);else Label1.Text=“你没有选择要上传的文件！”;,注：SaveAs的方法参数是服务器端的文件路径名,12,使用Label来显示一些被上传文件的信息,protected void Button1_Click(objectsender,EventArgse)if(FileUpload1.HasFile)FileUpload1.SaveAs(“CUploads”+FileUpload1.FileName);Label1.Text=“File Name:“+FileUpload1.PostedFile.F
5、ileName+FileUpload1.PostedFile.ContentLength+kb+Content type:+FileUpload1.PostedFile.ContentType;else Label1.Text=“你没有选择要上传的文件！”;,13,因为FileUpload.SaveAs()方法涉及到I/O操作，可能产生异常，因此需要进行处理,14,使用Label来显示一些被上传文件的信息,protected void Button1_Click(objectsender,EventArgse)if(FileUpload1.HasFile)try FileUpload1.Sav
6、eAs(“CUploads”+FileUpload1.FileName);Label1.Text=“File Name:“+FileUpload1.PostedFile.FileName+FileUpload1.PostedFile.ContentLength+kb+Content type:+FileUpload1.PostedFile.ContentType;catch(Exception ex)Label1.Text=ex.Message.ToString();else Label1.Text=“你没有选择要上传的文件！”;,15,上传多个文件,借助JavaScript来控制先来看一下初
7、始页面,添加附件,16,我们期望的效果：需要添加新的上传文件时，点击“添加附件”,17,上传多个文件,主要就看怎么动态改变页面，添加新的文件上传控件,添加附件,Onclick属性规定在点击这个链接的时候应该执行的动作,18,Javascript代码的编写,var MAXFILES=5;/文件计数器 var fileCount=0;function addAttach(noAlert)/待添加的增加attachment的代码,19,看addAttach()的内部代码,function addAttach(noAlert)if(fileCount=MAXFILES,注：判断添加的attachmen
8、t(附件)有没有超过最大限额（MAXFILES）,20,看addAttach()的内部代码,function addAttach(noAlert)if(fileCount=MAXFILES,注：获取用来存放上载控件Div区域，用变量fileSectionDiv表示 新建Div的Item变量fileItemDiv,21,看addAttach()的内部代码,function addAttach(noAlert)if(fileCount=MAXFILES,注：逐个添加FileUpload控件，到files这个Div区域内,22,删除文件上传控件,function delAttach(fileInde
9、x)var fileSectionDiv=document.getElementById(files);var fileItemDiv=document.getElementById(fileItemDiv+fileIndex);fileSectionDiv.removeChild(fileItemDiv);return false;,23,发送时的btnSend的单击相应函数,protected void btnSend_Click(object sender,EventArgs e)for(int index=0;index Request.Files.Count;index+)if(!s
10、tring.IsNullOrEmpty(Request.Filesindex.FileName)Request.Filesindex.SaveAs(Path.Combine(C:Files,System.IO.Path.GetFileName(Request.Filesindex.FileName);,24,Outline,文件上传示例（FileUpload）调查页面（SurveyForm）表单验证（FormValidation）网格控件示例(GridView)连接Excel数据源Login页面示例,25,市调页面示例,页面head部分代码,兴趣调查 voidClick(Objects,Eve
11、ntArgse)feedbackLabel.Text=Yournameis:+name.Value+;feedbackLabel.Text+=Youremailis:+email.Value+;feedbackLabel.Text+=Youliketoworkwith:+;for(inti=0;i;feedbackLabel.Text+=Youlike.NET:+likeDotNet.Value;,26,Lets Take a Survey!Name:Email:Which server technologies do you use?ASP.NET PHP JSP Do you like.N
12、ET so far?Yes No Confirm,27,Outline,文件上传示例（FileUpload）调查页面（SurveyForm）表单验证（FormValidation）网格控件示例(GridView)连接Excel数据源Login页面示例,28,从form开始,29,表单放在一个table控件里面,30,表单的第二行（第2对）,Last Name*,31,年龄的验证,Age,32,Hire Date,33,Membership Level,34,function CheckMembership(source,arguments)arguments.IsValid=false;var
13、 buf=arguments.Value;if(buf=Normal|buf=Silver|buf=Gold|buf=Platinum)arguments.IsValid=true;,35,36,Outline,文件上传示例（FileUpload）调查页面（SurveyForm）表单验证（FormValidation）网格控件示例(GridView)连接Excel数据源Login页面示例,37,使用Gridview来作一下Dir功能,从页面开头写起：导入页面代码所需名字空间,38,/declare the page level variable for the pathString FileP
14、ath;protected void Page_Load(object sender,EventArgs e)FilePath=Server.MapPath(/);GetFiles();/call the GetFiles method lblHeader.Text=Files in+FilePath;,39,private void GetFiles()/Create the DataTable,with columns in which to add the file list DataTable dt=new DataTable();dt.Columns.Add(FileName,typ
15、eof(System.String);dt.Columns.Add(Size,typeof(System.String);DataRow dr=null;DirectoryInfo dir=new DirectoryInfo(FilePath);/Iterate through the datatable,/adding file to a new row,along with the filesize to each row foreach(FileInfo fi in dir.GetFiles()dr=dt.NewRow();dr0=fi.Name.ToString();dr1=fi.Le
16、ngth.ToString(N0);/N0formats the number with commas dt.Rows.Add(dr);/Bind DataTable to GridView-voila!grdFiles.DataSource=dt;grdFiles.DataBind();,40,Outline,文件上传示例（FileUpload）调查页面（SurveyForm）表单验证（FormValidation）网格控件示例(GridView)连接Excel数据源Login页面示例,41,连接Excel数据示例,一个Web网站背后应该有个数据库支撑常用的数据库包括SQL ServerOr
17、acleMySQL标准的数据库需要首先进行配置，不方便及时演示。为了避免繁冗的数据库配置过程，集中看一下数据连接的基本方法，和通过连接提取数据的方法，选择了Excel表格作为后台数据进行展示。,42,C#中进行数据库连接的方式,String connstr=Driver=Microsoft Excel Driver(*.xls);Dbq=D:test1.xls;,注：采用ODBC数据源，要根据数据源的类型选择不同的Driver，Dbq则用来表示数据源的路径,需要使用Odbcusing System.Data.Odbc;,43,C#中进行数据库连接的方式,String connstr=Drive
18、r=Microsoft Excel Driver(*.xls);Dbq=D:test1.xls;OdbcConnection myConnection=new OdbcConnection(connstr);myConnection.Open();,注：创建一个OdbcConnection对象，通过第一行定义的连接字符串建立连接,44,C#中进行数据库连接的方式,String connstr=Driver=Microsoft Excel Driver(*.xls);Dbq=D:test1.xls;OdbcConnection myConnection=new OdbcConnection(co
19、nnstr);myConnection.Open();OdbcCommand myCommand=new OdbcCommand(select*fromSheet1$,myConnection);,注：创建一个OdbcCommand对象，执行一个SQL语句,45,C#中进行数据库连接的方式,String connstr=Driver=Microsoft Excel Driver(*.xls);Dbq=D:test1.xls;OdbcConnection myConnection=new OdbcConnection(connstr);myConnection.Open();OdbcComman
20、d myCommand=new OdbcCommand(select*fromSheet1$,myConnection);MyDataGrid.DataSource=myCommand.ExecuteReader();MyDataGrid.DataBind();,注：MyDataGrid对象，定义一个网格控件，通过OdbcCommand对象执行SQL语句之后得到的视图数据，并将数据与DataGrid对象绑定,46,在结束的时候，将数据库连接关闭,myConnection.Close();,47,使用GridView控件展示读取的数据,48,Outline,文件上传示例（FileUpload）调
21、查页面（SurveyForm）表单验证（FormValidation）网格控件示例(GridView)连接Excel数据源Login页面示例,49,使用Login控件设计简单的登录界面,定义登录验证的函数,protectedvoidLogin1_Authenticate(objectsender,AuthenticateEventArgse)if(Login1.UserName=A,50,使用Login控件设计简单的登录界面,设计包含Login控件的页面,LoginPage,51,使用excel表格形式的数据作为验证,OdbcDataReader dr;protected void Page_
22、Load(object sender,EventArgs e)String connstr=Driver=Microsoft Excel Driver(*.xls);Dbq=D:account.xls;OdbcConnection myConnection=new OdbcConnection(connstr);myConnection.Open();OdbcCommand myCommand=new OdbcCommand(select*fromSheet1$,myConnection);dr=myCommand.ExecuteReader();,52,使用excel表格形式的数据作为验证,protected void Login1_Authenticate(object sender,AuthenticateEventArgs e)while(dr.Read()if(Login1.UserName=dr0.ToString(),53,Thank You!,祝同学们暑假愉快！,
