第 2 章使用VWD建立ASP.NET網頁

第2章使用VWD建立ASP.NET網頁

第2章使用VWD建立ASP.NET網頁 • 2-1 建立ASP.NET網頁 • 2-2 Web Form表單的程式架構 • 2-3 設計檢視與程式碼編輯器的使用 • 2-4 網頁內容的基本編輯 • 2-5 水平線、項目符號與編號 • 2-6 新增圖片與超連結 • 2-7 表格的版面配置

2-1 建立ASP.NET網頁 • 2-1-1 ASP.NET網頁的基本架構 • 2-1-2 在VWD建立ASP.NET網頁

2-1-1 ASP.NET網頁的基本架構-內嵌於HTML標籤 • ASP.NET網頁的架構是使用「<% %>」符號，將程式碼內嵌於HTML標籤中，這種架構屬於傳統ASP技術（Class ASP）的寫法，其主要目的是與舊版ASP技術相容，如下所示： <% int balance = 1000; interest = balance * rate; %> • 上述「<% %>」符號間就是Visual C# 2008程式碼片斷，在本書的範例網站並沒有使用此架構，進一步說明請參閱傳統ASP或舊版ASP.NET的相關書籍。

2-1-1 ASP.NET網頁的基本架構-內嵌程式碼分割 • 內嵌程式碼分割（Inline Code Separation）的程式架構主要分成兩大部分：伺服端控制項的Web Form表單和事件處理程序。VWD內建【Web Form】範本建立的ASP.NET網頁就屬於此架構，在本書主要就是使用此架構來建立ASP.NET網頁。 • 雖然事件處理程序和伺服端控制項的標籤程式碼在同一個檔案，但是分割成不同區塊，事件處理程序是在<script>標籤，控制項位在<body>標籤的<form>子標籤。詳細的架構說明請參閱第2-2節。

2-1-1 ASP.NET網頁的基本架構-隱藏程式碼模型 • 在ASP.NET 2.0版時新增隱藏程式碼模型（Code Behind Model），可以將前述內嵌程式碼分割架構的控制項和事件處理程序都獨立成檔案，換句話說，完整的ASP.NET網頁是由兩個檔案所組成。 • 例如：在第1-5節建立網站產生的Default.aspx和Default.aspx.cs兩個檔案，Default.aspx擁有控制項；Default.aspx.cs是事件處理程序的類別檔，這就是隱藏程式碼模型。

2-1-2 在VWD建立ASP.NET網頁-說明 • 在VWD新增ASP.NET網站後，我們就可以建立兩種Web網頁，其說明如下所示： • Web Forms表單：這是包含HTML標籤和伺服端控制項的網頁，即ASP.NET網頁，其副檔名為.aspx。 • HTML網頁：內含HTML標籤的Web網頁，並不含任何ASP.NET控制項，其副檔名是.htm。

2-1-2 在VWD建立ASP.NET網頁-事件驅動程式設計 • 在VWD建立的ASP.NET網頁是使用事件驅動程式設計（Event-driven Programming），其執行順序需視使用者的操作而定，也就是依觸發的事件來執行適當的處理。 • 例如：當我們在網頁的表單輸入註冊資料後，按【送出】鈕，就會觸發Click事件，程式依此事件來執行對應的事件處理程序，進行進一步的處理，關於事件的說明請參閱第4章。

2-1-2 在VWD建立ASP.NET網頁-步驟一 步驟一：新增與刪除ASP.NET網頁 • 在VWD新增ASP.NET網站後，預設使用隱藏程式碼模型建立名為Default.aspx的ASP.NET網頁，所以我們需先刪除此網頁，然後建立使用內嵌程式碼分割的ASP.NET網頁，如下圖所示：取消勾選【將程式碼置於個別檔案中】

2-1-2 在VWD建立ASP.NET網頁-步驟二 步驟二：在Web Form表單新增控制項 • VWD編輯視窗的【設計】檢視是一種隨看即所得的視覺化編輯工具，我們只需在「工具箱」視窗選取控制項，就可以在Web Form表單上新增控制項的元件，如下圖所示：

2-1-2 在VWD建立ASP.NET網頁-步驟三 步驟三：設定控制項屬性 • 在Web Form表單新增控制項後，就可以在右下方「屬性」視窗設定控制項屬性，如下圖所示：【Label1】控制項屬性值屬性

2-1-2 在VWD建立ASP.NET網頁-步驟四 步驟四：新增其他控制項 • 接著請重複步驟二和三新增TextBox和Button按鈕控制項，並且設定相關屬性，如下圖所示： TextBox Button

2-1-2 在VWD建立ASP.NET網頁-步驟五 步驟五：在Button控制項新增事件處理程序 • 目前在Web Form表單共新增Label1、TextBox1和Button1三個控制項。接著，就可以新增按鈕控制項的事件處理程序，如下所示： 01: protected void Button1_Click(object sender, EventArgs e) 02: { 03: String temp = Label1.Text; 04: Label1.Text = TextBox1.Text; 05: TextBox1.Text = temp; 06: }

2-1-2 在VWD建立ASP.NET網頁-步驟六 步驟六：預覽ASP.NET網頁內容 • 在完成Web Form表單設計和輸入程式碼後，我們就可以預覽ASP.NET網頁內容，請執行「檔案/在瀏覽器中檢視」指令或右鍵快顯功能表的【在瀏覽器中檢視】指令，可以看到瀏覽程式顯示的執行結果。

2-2 Web Form表單的程式架構-說明 • Web Form表單可以建立跨平台和跨瀏覽程式Web應用程式的輸入介面，其使用的技術如同在VB、JBuilder等視覺化開發工具建立Windows應用程式的「GUI」（Graphics User Interface）圖形使用介面。 • Web Form表單程式架構是一種事件驅動程式設計模型（Event-driven Programming Model），它是使用伺服端控制項建立Web Form表單的使用介面。當產生事件時，建立對應的事件處理程序來處理事件。

2-2 Web Form表單的程式架構-程式架構1 <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void Button1_Click(object sender, EventArgs e) { String temp = Label1.Text; Label1.Text = TextBox1.Text; TextBox1.Text = temp; } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>未命名頁面</title> </head> 第一部分

2-2 Web Form表單的程式架構-程式架構2 <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Font-Size="Larger" Text="ASP.NET網頁設計"> </asp:Label> <br /><br /> <asp:TextBox ID="TextBox1" runat="server" Height="30px" Width="199px"></asp:TextBox> <asp:Button ID="Button1" runat="server" Height="41px" onclick="Button1_Click" Text="交換" Width="82px" /> </div> </form> </body> </html> 第二部分

2-2 Web Form表單的程式架構-程式架構說明 • VWD的Web Form範本程式架構，主要分成兩個部分，如下所示： • 第一部分：<script>標籤的事件處理程序或函數，以此例是Button1_Click()事件處理程序，VWD建立的事件處理程序預設使用Protected存取修飾子。 • 第二部分：XHTML文件的<html>標籤，我們是在<form runat="server">子標籤建立Web Form表單，在<div>標籤中新增伺服端控制項（Server Controls），以此例擁有Label、TextBox和Button控制項。

2-2 Web Form表單的程式架構- @ Page指引指令 • @ Page是ASP.NET「指引」（Directive）指令，提供多種屬性來定義ASP.NET網頁。 • Language屬性（Attribute）定義ASP.NET網頁使用的程式語言，C#就是指Visual C# 2008語言。

2-2 Web Form表單的程式架構-<script>標籤 • <script>標籤是位在DOCTYPE之後；<html>標籤之前，其內容是ASP.NET網頁使用的C#函數，和Web Form表單控制項的事件處理程序，關於函數與事件處理程序的進一步說明，請參閱第3和4章。

2-2 Web Form表單的程式架構-<form>標籤 • <form>標籤是位在<body>標籤中，因為指定runat屬性值server，表示它是一個HTML控制項，如下所示： <form runat="server"> ……… </form> 在「屬性」視窗上方選【DOCUMENT】文件物件後，就可以指定Title屬性的瀏覽程式上方標題文字

2-2 Web Form表單的程式架構-<div>標籤 • <div>標籤是HTML 4.0x版的物件標籤，這是一個空白、沒有任何樣式的容器標籤，其主要目的是用來群組HTML標籤或控制項。 • 基於編排所需，VWD預設將伺服端控制項的標籤程式碼置於此HTML標籤中。換句話說，<div>標籤可以視為Web Form表單的編輯區域（如同Windows應用程式的視窗範圍），換句話說，我們就是在此範圍內新增控制項。

2-2 Web Form表單的程式架構-伺服端控制項 • Web Form表單是由伺服端控制項（Server Controls）組成，它是一種伺服端可程式化物件。 • 在ASP.NET網頁可以使用HTML或Web控制項來建立使用介面，進一步說明請參閱第4章。

2-3 設計檢視與程式碼編輯器的使用 • 2-3-1 設計檢視的控制項定位 • 2-3-2 指定ASP.NET網頁的頁面起始位置 • 2-3-3 程式碼編輯器的使用

2-3-1 設計檢視的控制項定位-預設定位方式 • 因為ASP.NET網頁本身是一份文件，其內容排列方式類似記事本或Word編輯的文件，預設控制項的編排方式是從左至右排列，如果超過文件寬度就自動換行靠左對齊，然後從下一行繼續排列，如同在Word中輸入一個個文字，如下圖所示：

2-3-1 設計檢視的控制項定位-絕對定位方式 • 絕對定位方式可以任意調整控制項的位置，如同在畫布上的指定位置繪出控制項，如下圖所示： [格式/位置]選【絕對】

2-3-1 設計檢視的控制項定位-相對定位方式 • 相對定位方式是指其位置是相對於前一個控制項，位置與前一個控制項相關連，換句話說，如果調整前一個控制項的位置，也會同時自動調整後一個控制項的位置，以維持兩個控制項相對的間距。在前一個Label控制項使用Enter鍵換行，可以看到TextBox控制項也自動往下移

2-3-2 指定ASP.NET網頁的頁面起始位置 • 在ASP.NET網站開啟ASP.NET網頁時，預設使用【原始檔】檢視，我們可以指定ASP.NET網頁的頁面起始位置，改為一開啟就是【設計】檢視，請執行「工具/選項」指令，可以看到「選項」對話方塊。

2-3-3 程式碼編輯器的使用-切換檔案與輸入程式碼 • 請開啟兩頁ASP.NET網頁，並且選【原始檔】檢視，在上方選檔名標籤可以切換編輯的程式碼檔案，檔案名稱後如有星號，表示有更改但尚未儲存。原始程式碼的標籤是深紅色，屬性是紅色，Visual C#關鍵字為藍色，註解為綠色，其他程式碼為黑色。

2-3-3 程式碼編輯器的使用-輸入HTML或伺服端控制項標籤 • 在VWD程式碼編輯視窗輸入HTML或伺服端控制項標籤，例如：表格的<table>標籤，只需輸入「<」的部分標籤，就會顯示可能標籤的清單，如下圖所示：

2-3-3 程式碼編輯器的使用-智慧Visual C#程式碼輸入 • 在程式碼編輯視窗輸入Visual C#程式碼時，VWD提供智慧提示，可以在輸入程式碼時，只需輸入部分內容，即可顯示程式語法可能的關鍵字清單、物件的屬性與方法語法等提示訊息。

2-4 網頁內容的基本編輯 • 2-4-1 輸入ASP.NET網頁的文字內容 • 2-4-2 調整文字內容的字型與尺寸 • 2-4-3 指定文字效果 • 2-4-4 文字內容的前景與背景色彩 • 2-4-5 標題或段落的文字編排

2-4-1 輸入ASP.NET網頁的文字內容 • 在VWD設計檢視的編輯區域輸入的文字內容，就是ASP.NET網頁顯示的文字內容。VWD是將Enter鍵視為換行分隔符號，如果文字內容需要換行，也就是插入HTML的<br/>標籤，我們只需輸入Enter鍵，即可替文字內容換行。換行

2-4-2 調整文字內容的字型與尺寸 • VWD支援HTML標籤文字尺寸的1~7級，它是使用8~36點字來對應，級數愈大，字型尺寸愈大。如果覺得字型不夠漂亮，在VWD也可以將文字重設成電腦安裝的其他漂亮字型。尺寸字型

2-4-3 指定文字效果 • 在VWD的「格式」工具列提供按鈕來指定常用的文字效果，如下所示： • 粗體：顯示粗體字效果的<b>標籤，如果需要強調的文字內容，就可以使用粗體字來增加文字在段落中的明顯度。 • 斜體：顯示斜體字效果的<i>標籤，不過此效果使用在英文字比中文字來的好。 • 底線：顯示底線字效果的<u>標籤，對於中文來說，底線字強調的效果比斜體字好，不過可能與藍色底線字的超連結文字產生混淆。

2-4-4 文字內容的前景與背景色彩 • 在VWD可以指定文字的前景和背景色彩，我們只需選擇文字內容，再套用所需的色彩，就可以輕鬆更改文字顯示的色彩，和套用的背景色彩。

2-4-5 標題或段落的文字編排 • 在VWD的區塊格式提供現成HTML標籤的多種樣式，我們可以在段落直接套用現成樣式，也就是套用HTML標籤，其中標題1~6的樣式就是HTML標籤<h1>~<h6>，可以建立主標題、次標題和小標題的段落樣式。 • 至於HTML標籤<p>的段落樣式是類似Enter鍵的另一種段落編排，不過，其段落間距比較大。

2-5 水平線、項目符號與編號 • 2-5-1 項目符號與編號 • 2-5-2 插入水平線

2-5-1 項目符號與編號 • ASP.NET網頁的項目符號與編號就是一種清單項目，可以將文字內容以項目方式來一一的列出，讓文字內容更簡潔有力。清單項目主要分為兩種，如下所示： • 項目符號：項目符號的每一個項目都是使用符號●、□、◇或小圖示等開頭，屬於一種沒有順序的項目。 • 編號：如同項目符號，改為使用數字、英文和羅馬字母開頭的項目，在項目間擁有前後順序。

2-5-2 插入水平線 • 水平線在網頁內容中可以分隔標題文字、段落和圖片，最常使用在標題文字和內文段落之間，可以提供文件更佳的編排效果。 • 在網頁文字內容的段落編排上，我們可以適度插入水平線來美化文件的編排，這就是HTML的<hr/>標籤。

2-6 新增圖片與超連結 • 2-6-1 插入網頁圖片 • 2-6-2 建立超連結

2-6-1 插入網頁圖片 • 如果擁有網頁支援格式的現成圖檔，我們就可以在VWD將這些圖片檔案插入ASP.NET網頁中。

2-6-2 建立超連結 • 網頁的超連結可以使用文字或圖片作為媒介，換句話說，超連結的連接點可以是文字內容或圖片，如果使用文字內容稱為超文件，如果使用圖片或視訊元素稱為超媒體文件。 • 在網頁中的文字超連結是最常使用的超連結媒介，預設是藍色底線字的文字內容，當滑鼠移到文字超連結上時，游標會成為「手」形。

2-7 表格的版面配置 • 2-7-1 建立表格 • 2-7-2 編輯表格

2-7-1 建立表格 • 表格（Tables）是一種資料排列方式，可以將資料分類和系統化處理，在ASP.NET網頁使用表格的主要目的是用來進行版面配置，對齊和編排多個控制項。 • 在VWD的「表格」功能表提供建立和編輯表格指令，只需輸入表格列和欄數，就可以建立網頁表格。

2-7-2 編輯表格 • 在建立網頁表格後，「表格」功能表提供進一步編輯表格內容的指令。例如：在表格插入或刪除列、欄或儲存格，或是合併、分割、平均分配列高或欄寬等。 • 選取表格、列、欄和儲存格 • 插入列、欄和儲存格 • 刪除表格、列、欄和儲存格 • 表格的修改

Asp 程式範例 • Html 端 <head> <title></title> </head> <body> <p>Hello!</p> <form action="http://localhost:57093/WebSite6/Default3.aspx" method="post"> <input type="text" name="ttt"/><br /> <input name="Submit1" type="submit" value="submit" /> </form> </body> </html>

Asp 程式範例 • Server 端 (Default3.aspx) <% String test = Request.Form["ttt"]; Response.Write("<p>" + test); int i = 1; for (i = 1; i <= 9; i++) { Response.Write("<p>"+i); } %>

End

第 2 章 使用VWD建立ASP.NET網頁