使用VWD建立ASP.NET網頁

Download Report

Transcript 使用VWD建立ASP.NET網頁 

第2章 使用VWD建立
ASP.NET網頁
第2章 使用VWD建立ASP.NET網
頁
建立ASP.NET網頁
 2-2 Web Form表單的程式架構
 2-3 設計檢視與程式碼編輯器的使用
 2-4 網頁內容的基本編輯
 2-5 水平線、項目符號與編號
 2-6 新增圖片與超連結
 2-7 表格的版面配置
 2-1
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-2 指定ASP.NET網頁的頁面起始位置
 2-3-3 程式碼編輯器的使用
 2-3-1
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 網頁內容的基本編輯
輸入ASP.NET網頁的文字內容
 2-4-2 調整文字內容的字型與尺寸
 2-4-3 指定文字效果
 2-4-4 文字內容的前景與背景色彩
 2-4-5 標題或段落的文字編排
 2-4-1
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-2 插入水平線
 2-5-1
2-5-1 項目符號與編號
 ASP.NET網頁的項目符號與編號就是一種
清單項目，可以將文字內容以項目方式來
一一的列出，讓文字內容更簡潔有力。清
單項目主要分為兩種，如下所示：


項目符號：項目符號的每一個項目都是使用符
號●、□、◇或小圖示等開頭，屬於一種沒有
順序的項目。
編號：如同項目符號，改為使用數字、英文和
羅馬字母開頭的項目，在項目間擁有前後順序。
2-5-2 插入水平線
水平線在網頁內容中可以分隔標題文字、段落和
圖片，最常使用在標題文字和內文段落之間，可
以提供文件更佳的編排效果。
 在網頁文字內容的段落編排上，我們可以適度插
入水平線來美化文件的編排，這就是HTML的
<hr/>標籤。

2-6 新增圖片與超連結
插入網頁圖片
 2-6-2 建立超連結
 2-6-1
2-6-1 插入網頁圖片
 如果擁有網頁支援格式的現成圖檔，我們
就可以在VWD將這些圖片檔案插入
ASP.NET網頁中。
2-6-2 建立超連結
網頁的超連結可以使用文字或圖片作為媒介，換
句話說，超連結的連接點可以是文字內容或圖片，
如果使用文字內容稱為超文件，如果使用圖片或
視訊元素稱為超媒體文件。
 在網頁中的文字超連結是最常使用的超連結媒介，
預設是藍色底線字的文字內容，當滑鼠移到文字
超連結上時，游標會成為「手」形。

2-7 表格的版面配置
建立表格
 2-7-2 編輯表格
 2-7-1
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);
}
%>