Web表单程式设计模型课件_第1页
Web表单程式设计模型课件_第2页
Web表单程式设计模型课件_第3页
Web表单程式设计模型课件_第4页
Web表单程式设计模型课件_第5页
已阅读5页，还剩41页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章Web表單程式設計模型5-1Web表單程式設計模型5-2ASP.NET的Page物件5-3ASP.NET執行Script的控制項5-4ASP.NET的輸出控制項5-5設定伺服端控制項的樣式5-6動態產生伺服端控制項5-7VisualWebDeveloper建立Web表單第5章Web表單程式設計模型5-1Web表單程式設計模型5-1Web表單程式設計模型5-1-1Web表單程式設計模型5-1-2隱藏程式碼模型5-1Web表單程式設計模型5-1-1Web表單程式設計5-1-1Web表單程式設計模型-說明ASP.NET的Web表單可以建立跨平台和跨瀏覽程式Web應用程式的輸入介面，其使用的技術如同在VB、JBuilder等視覺化開發工具建立Windows應用程式的「GUI」（GraphicsUserInterface）介面。Web表單程式設計模型是一種事件驅動程式設計模型（Event-drivenProgrammingModel），使用伺服端控制項建立Web表單的使用介面。當產生事件時，ASP.NET程式可以建立對應的事件處理程序來處理事件。5-1-1Web表單程式設計模型-說明ASP.NET的We5-1-1Web表單程式設計模型-架構<%@PageLanguage=“VB”%><!–前置指令區<!--事件處理程序區--><scriptRunat="server">Subbutton1_Click(SenderAsObject,EAsEventargs)label1.Text="按下Button控制項<br>"EndSub</script><!--Web表單區--><html><headRunat="server"><title>Ch5-1-1.aspx</title></head><body><formId="form1"Runat="server"><asp:ButtonId="button1"Text="按下按鈕"OnClick="button1_Click"Runat="Server"/><br><asp:LabelId="label1"Runat="server"/></form></body></html>5-1-1Web表單程式設計模型-架構<%@PageL5-1-1Web表單程式設計模型-架構說明程式是第1章VisualWebDeveloper的WebForm範本程式架構，架構主要分成兩個部分，如下所示：第一部分：<script>標籤的事件處理程序或函數。第二部分：<formRunat="server">標籤建立Web表單，內含Form表單標籤和伺服端控制項（ServerControls）。5-1-1Web表單程式設計模型-架構說明程式是第1章Vi5-1-1Web表單程式設計模型-Head標頭標籤在ASP.NET2.0版的<head>標籤，可以改為<headRunat="server">的HtmlHead控制項物件，如下所示：<headRunat="server">

……</head>Head標頭標籤可以建立HtmlHead物件，我們可以使用ASP.NET程式來指定HtmlTitle物件的標題文字（即<title>標籤）和CSS樣式，如下所示：Page.Header.Title="Ch5-1-1Head.aspx"程式碼使用Title屬性指定頁面的標題文字。5-1-1Web表單程式設計模型-Head標頭標籤在ASP5-1-1Web表單程式設計模型-Form表單標籤Web表單的伺服端控制項是置於<formRunat="server">的HTML控制項之間，它就是HtmlForm控制項物件，如下所示：<formRunat="server">

………</form>Web表單和HTML表單差異只在Runat屬性，此屬性將HTML表單轉換成ASP.NET的Web表單。5-1-1Web表單程式設計模型-Form表單標籤Web表5-1-1Web表單程式設計模型-伺服端控制項Web表單是由伺服端控制項（ServerControls）組成，它是一種伺服端可程式化物件，用來建立ASP.NET程式的使用介面。ASP.NET伺服端控制項的語法類似HTML標籤，可以設定控制項的屬性，主要分為兩種，如下所示：HTML控制項：對應System.Web.UI.HtmlControls名稱空間的物件，這些控制項直接對應HTML標籤，只是新增Id和Runat屬性，例如：前述的<head>和<form>標籤。Web控制項：對應System.Web.UI.WebControls名稱空間的控制項物件，它是使用asp字頭的XML標籤，例如：Button、TextBox或RadioButton等。5-1-1Web表單程式設計模型-伺服端控制項Web表單是5-1-1Web表單程式設計模型-處理伺服端控制項的事件Web表單是一種事件基礎的設計模型，當使用者按下或選擇控制項等操作時，就會造成控制項的狀態改變，進而觸發事件；當事件產生時，就可以建立事件處理程序來處理此事件，如下所示：Subbutton1_Click(SenderAsObject,_EAsEventargs)label1.Text="按下Button控制項<br>"EndSub5-1-1Web表單程式設計模型-處理伺服端控制項的事件W5-1-2隱藏程式碼模型-說明ASP.NET2.0版支援隱藏程式碼模型（CodeBehindModel），可以將事件處理程序獨立成類別檔案。簡單的說，隱藏程式碼模型的ASP.NET程式是將第5-1-1節程式架構的兩大部分都獨立成檔案。5-1-2隱藏程式碼模型-說明ASP.NET2.0版支援5-1-2隱藏程式碼模型-ASP.NET程式在ASP.NET程式本身只包含伺服端控制項的Web表單，Page指引指令可以指定事件處理程式所在的類別檔案，如下所示：<%@PageLanguage="VB"CodeFile="Ch5_1_2.vb"Inherits="Ch5_1_2"%>Page指引指令Inherits屬性指定Partial類別名稱，CodeFile屬性指定類別檔案是在Ch5_1_2.vb。5-1-2隱藏程式碼模型-ASP.NET程式在ASP.NE5-1-2隱藏程式碼模型-Partial類別Ch5_1_2.vb類別架構如下所示：ImportsMicrosoft.VisualBasicPartialClassCh5_1_2InheritsSystem.Web.UI.PageProtectedSubbutton1_Click(ByValSender_AsObject,ByValEAsSystem.EventArgs)

………EndSubEndClass類別檔案宣告Partial類別Ch5_1_2，它是繼承自Page類別，內含控制項的事件處理程序button1_Click()。5-1-2隱藏程式碼模型-Partial類別Ch5_1_25-2ASP.NET的Page物件-說明ASP.NET的Web表單程式設計模型屬於事件驅動程式設計（類似VB或VB.NET），我們建立的每一頁ASP.NET程式，在編譯後就是建立一個System.Web.UI.Page物件，即Page物件。事實上，ASP.NET程式除了Web表單控制項產生的事件外，當使用者請求ASP.NET程式，在載入和執行ASP.NET時，也會觸發一系列Page物件的事件。5-2ASP.NET的Page物件-說明ASP.NET的W5-2ASP.NET的Page物件-事件Page物件的常用事件，如下表所示：5-2ASP.NET的Page物件-事件Page物件的常用5-3ASP.NET執行Script的控制項5-3-1Button按鈕控制項5-3-2LinkButton控制項5-3-3ImageButton控制項5-3ASP.NET執行Script的控制項5-3-1B5-3-1Button按鈕控制項-標籤Button控制項是一個顯示按鈕外觀的控制項，它是最常用來執行Script程序或函數的控制項，按一下可以產生Click或Command事件，如下所示：<asp:ButtonId="button1"Text="Command按鈕"CommandName="排序"CommandArgument="由小到大"OnCommand="Command_Click"Runat="server"/><asp:ButtonId="button2"Text="Button按鈕"OnClick="button2_Click"Runat="server"/>5-3-1Button按鈕控制項-標籤Button控制項是5-3-1Button按鈕控制項-屬性5-3-1Button按鈕控制項-屬性5-3-1Button按鈕控制項-事件當按下Button控制項button1時，可以產生Command事件，它是傳遞命令名稱和參數到事件處理程序。Web表單可以建立多個Button控制項，但只使用一個事件處理程序，程序使用命令名稱和參數來分辨出是按下哪一個按鈕，如下所示：SubCommand_Click(SenderAsObject,_CEAsCommandEventArgs)show.Text="按下Button控制項:"&_CE.CommandName&"/"&_CE.CommandArgumentEndSub5-3-1Button按鈕控制項-事件當按下Button控5-3-2LinkButton控制項LinkButton控制項提供Button控制項的功能，只是顯示外觀是一個超連結文字，如下所示：<asp:LinkButtonId="button0"Text="LinkButton控制項“OnClick="button0_Click“Runat="server"/>標籤建立名為button0的LinkButton控制項，其相關屬性與事件處理程序和Button控制項相同。5-3-2LinkButton控制項LinkButton控5-3-3ImageButton控制項-標籤ImageButton控制項的功能也和Button控制項相同，只是改為圖片來顯示按鈕，如下所示：<asp:ImageButtonId="button0"ImageUrl="back.gif"OnClick="button0_Click“Runat="server"/>標籤建立名為button0的ImageButton控制項。5-3-3ImageButton控制項-標籤ImageBu5-3-3ImageButton控制項-屬性其相關屬性和Button控制項相似，只差Text屬性，但是多了繼承自Image類別的屬性，如下表所示：5-3-3ImageButton控制項-屬性其相關屬性和B5-3-3ImageButton控制項-事件ImageButton控制項的Click事件處理程序和Button控制項稍有不同，第2個參數是ImageClickEventArgs，而不是Eventargs，如下所示：Subbutton0_Click(SenderAsObject,_ICEAsImageClickEventArgs)show.Text=_"按下ImageButton控制項<br>"EndSub5-3-3ImageButton控制項-事件ImageBu5-4ASP.NET的輸出控制項5-4-1Label標籤控制項5-4-2Panel控制項5-4-3GenericControl控制項5-4-4Image圖片控制項5-4-5表格控制項5-4-6清單控制項5-4ASP.NET的輸出控制項5-4-1Label標籤5-4-1Label標籤控制項Label標籤控制項是ASP.NET主要的輸出控制項，可以在網頁定義一塊顯示區域來輸出所需的內容，轉換成HTML標籤就是<span>標籤，如下所示：<asp:LabelId="label1"Runat="server"><p>ASP.NET伺服端控制項提供輸出資料的控制項，其HTML控制項，可以顯示圖片、表格和清單網頁元素。</p></asp:Label><asp:LabelId="label2"Runat="server"/>5-4-1Label標籤控制項Label標籤控制項是ASP5-4-2Panel控制項Panel控制項如同是一個容器，它的功能類似HTML標籤的<div>，主要的目的是群組其他控制項，以便建立一塊網頁的輸出區域，來靈活控制網頁內容的顯示樣式，或切換顯示，如下所示：<asp:Panelid="panel"BackColor="Yellow"ForeColor="Blue"Runat="server"><asp:Labelid="label"Runat="server">

………</asp:Label><asp:ButtonId="button1"Text="更改內容"OnClick="changeText"Runat="server"/></asp:Panel>5-4-2Panel控制項Panel控制項如同是一個容器，5-4-3GenericControl控制項HTML控制項<div>和<span>是HtmlGenericControl物件，它也是一種輸出控制項，可以在<div>和<span>控制項顯示其他事件處理產生的執行結果，如下所示：<divId="show1"Runat="server"/><spanId="show2"Runat="server"/><div>和<span>標籤是HTML控制項。在建立好HTML控制項後，就可以在事件處理程序指定標籤內容，也就是控制項的值，如下所示：show1.innerText="顯示innerText的內容"show2.innerHTML="<b>顯示innerHTML的內容</b>"5-4-3GenericControl控制項HTML控制項5-4-4Image圖片控制項-標籤伺服端HTML控制項的HtmlImage和Web控制項的Image都可以在網頁上顯示圖片。首先是HtmlImage控制項，如下所示：<imgId="image1"Src="email1.gif"Runat="server"/>標籤建立名為image1的HtmlImage控制項。如果使用Image控制項，如下所示：<asp:ImageId="image0“

ImageUrl="back1.gif"AlternateText="返回1“Runat="server"/>5-4-4Image圖片控制項-標籤伺服端HTML控制項的5-4-4Image圖片控制項-屬性5-4-4Image圖片控制項-屬性5-4-5表格控制項-HtmlTable、HtmlTableRow和HtmlTableCell控制項HtmlTable、HtmlTableRow和HtmlTableCell控制項是HTML控制項，可以對應HTML表格標籤的<table>、<tr>和<td>，只是加上Id和Runat屬性，如下所示：<tableId="newtable"Border="2"Runat="server"><trId="row1"Runat="server"><tdId="column1"Runat="server"></td><tdId="column2"Runat="server"></td>

…</tr>

……</table>5-4-5表格控制項-HtmlTable、HtmlTabl5-4-5表格控制項-Table、TableRow和TableCell控制項Table、TableRow和TableCell控制項是Web控制項，可以對應HTML表格標籤的<table>、<tr>和<td>。表格Web控制項標籤，如下所示：<asp:TableId="newtable"Border="2"Runat="server"><asp:TableRowRunat="server"><asp:TableCellRunat="server"></asp:TableCell><asp:TableCellRunat="server"></asp:TableCell>

…</asp:TableRow>

……</asp:Table>5-4-5表格控制項-Table、TableRow和Tab5-4-6清單控制項-標籤BulletedList控制項可以建立符號字元或數字開頭的清單項目，每一個項目是一個ListItem控制項，可以是文字、LinkButton或超連結項目，如下所示：<asp:BulletedListId="bl1"BulletStyle="Circle"Runat="server"><asp:ListItemText="ASP.NET"/><asp:ListItemText="PHP"/><asp:ListItemText="JSP"/></asp:BulletedList>5-4-6清單控制項-標籤BulletedList控制項可5-4-6清單控制項-屬性1BulletedList控制項相關屬性說明，如下表所示：5-4-6清單控制項-屬性1BulletedList控制項5-4-6清單控制項-屬性2ListItem控制項的相關屬性，如下表所示：5-4-6清單控制項-屬性2ListItem控制項的相關屬5-4-6清單控制項-事件BulletedList控制項的模式如果是LinkButton，我們可以使用OnClick屬性指定事件處理程序，如下所示：Subbl3_Click(SenderAsObject,_BLEAsBulletedListEventArgs)IfBLE.Index=0Thenlabel.Text="按下LinkButton1"EndIfIfBLE.Index=1Thenlabel.Text="按下LinkButton2"EndIfEndSub5-4-6清單控制項-事件BulletedList控制項的5-5設定伺服端控制項的樣式5-5-1在控制項套用CSS5-5-2伺服端的樣式屬性5-5設定伺服端控制項的樣式5-5-1在控制項套用CSS5-5-1在控制項套用CSS-CSS首先定義CSS樣式名稱的Classes，如下所示：<style>.spanStyle{font:12pt細明體;font-weight:500;color:orange;}.buttonStyle{font:18pt標楷體;background-color:lightgreen;border-color:black;width:150}.button1Style{font:14pt新細明體;background-color:yellow;border-style:dashed;border-color:red;width:100;}</style>5-5-1在控制項套用CSS-CSS首先定義CSS樣式名稱5-5-1在控制項套用CSS-HTML控制項套用CSS在HTML控制項可以使用Class屬性套用CSS樣式名稱，如下所示：<spanClass="spanStyle"Runat="server">在HTML控制項套用CSS</span><br><buttonId="button2"Class="buttonStyle"Runat="server">第二個按鈕</button><span>標籤使用Class屬性套用spanStyle樣式名稱，HtmlButton控制項是套用buttonStyle樣式名稱。5-5-1在控制項套用CSS-HTML控制項套用CSS在H5-5-1在控制項套用CSS-Web控制項套用CSS在Web控制項是使用CSSClass屬性來套用CSS樣式名稱，如下所示：<asp:ButtonId="button3“Text="第三個按鈕“CSSClass="button1Style“Runat="server"/>Button控制項使用CSSClass屬性套用button1Style樣式名稱。5-5-1在控制項套用CSS-Web控制項套用CSS在We5-5-2伺服端的樣式屬性-使用例如：在Label控制項指定樣式屬性，如下所示：<asp:LabelId="label1"Font-Size="11pt"BackColor="#CC9999"Runat="server"><p>ASP.NET伺服端控制項提供輸出資料的控制項，其HTML控制項，可以顯示圖片、表格和清單網頁元素。</p></asp:Label>Label控制項指定Font-Size和BackColor屬性。5-5-2伺服端的樣式屬性-使用例如：在Label控制項指5-5-2伺服端的樣式屬性-屬性15-5-2伺服端的樣式屬性-屬性15-5-2伺服端的樣式屬性-屬性25-5-2伺服端的樣式屬性-屬性25-6動態產生伺服端控制項-建立控制項物件伺服端控制項本身是一種物件，所以我們可以使用程式碼建立控制項物件，如下所示：Dimlabel1AsNewLabelDimlabel2AsNewLabelDimbutton0AsNewButton程式碼建立名為label1和label2的Label控

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论