ASP.NET 互動式網頁程式設計 (使用 C#)
CSIE NTU
1
實例探討 sample3-a1 (1)
2
程式功能
建立與資料庫間的連線
程式內容
protected void Page_Load(object sender, EventArgs e) {
Response.Write("尚未連線..<br>");
Response.Write("進行連線..<br>");
AccessDataSource conn =
new AccessDataSource(Server.MapPath("member.mdb"),
"select * from member");
實例探討 sample3-a1 (2)
3
程式內容
conn.DataBind();
GridView1.DataSourceID = "";
GridView1.DataSource = conn;
GridView1.DataBind();
Response.Write("連線成功..<br>");
}
SQL 結構化查詢語言
4
SQL 結構化查詢語言是一套標準的語言，用以管理或存 取資料庫
SQL 主要包含二部份
DML 資料處理語言
包含 SELECT、INSERT、UPDATE 及 DELETE…
DDL 資料定義語言
包含 CREATE、DROP、ALTER 及 GRANT…
SQL 語法 – SELECT
5
SELECT 查詢命令可用來取得資料表中的資料
語法
SELECT 欄位名稱1, 欄位名稱2, … FROM 資料表名稱
WHERE 條件式 ORDER BY 欄位名稱 (字串需以單引號 ' 括住表示之)
用法
select * from student
select id,name from student order by id desc
select id from student where id<10
實例探討 sample3-a2 (1)
6
程式功能
會員登入
使用 select 來確認帳號密碼是否正確
程式內容
private bool check(string id, string pw) {
bool flag = false;
string dataSource = Server.MapPath("member.mdb");
string sqlStr = "select * from member ";
sqlStr += "where id='" + id + "' and pw='" + pw + "'";
AccessDataSource conn =
new AccessDataSource(dataSource, sqlStr);
實例探討 sample3-a2 (2)
7
程式內容
GridView grid = new GridView();
grid.DataSource = conn;
grid.DataBind();
if (grid.Rows.Count > 0) flag = true;
return flag;
}
實例探討 sample3-a2 (3)
8
程式內容
protected void Button1_Click(object sender, EventArgs e) {
if (idTB.Text != "" && pwTB.Text != "") { if (check(idTB.Text, pwTB.Text))
Response.Write("登入");
else
messageLB.Text = "帳號密碼輸入錯誤!!";
} else
messageLB.Text = "帳號密碼不可空白!!";
} }
課堂練習 sample3-b1
9
資料庫內容
建立一討論區資料表
包含識別碼、主題、內容、發表者、瀏覽人數及回覆人 數六個欄位
程式功能
建立討論區主題列表畫面
基本概念
利用 select 語法取得資料表中資料
SQL 語法 – INSERT
10
INSERT 新增命令用來新增一筆資料至指定資料表中
語法
INSERT INTO 資料表名稱 ( 欄位名稱1, 欄位名稱2, …) VALUES ('資料1', '資料2', …)
用法
INSERT INTO student(id, name) VALUES(3, 'Ives')
SQL 語法–INSERT
實例探討 sample3-a3 (1)
11
程式功能
新增會員帳號
程式內容
protected void upDG() {
string dataSource = Server.MapPath("member.mdb");
string SqlCmd = "select * from member";
conn = new AccessDataSource(dataSource, SqlCmd);
memberDG.DataSource = conn;
memberDG.DataBind();
}
實例探討 sample3-a3 (2)
12
程式內容
protected void addBTN_Click(object sender, EventArgs e) {
if (idTB.Text != "" && pwTB.Text != "") {
conn.InsertCommand =
"insert into member (id,pw) values
('" + idTB.Text + "','" + pwTB.Text + "')";
conn.Insert();
memberDG.DataBind();
} }
課堂練習 sample3-b2
13
程式功能
延續 sample3-b1 加入一超連結至 WebForm2
在 WebForm2 中設計發表新文章頁面
基本概念
利用 insert 語法新增文章至資料表中
畫面只提供作者、主題及文章內容輸入功能
SQL 語法–DELETE
14
DELETE 刪除命令用來刪除資料表中的指定資料
語法
DELETE FROM 資料表名稱 WHERE 條件式
用法
DELETE FROM student WHERE id = 3 AND name = 'Ives'
刪除資料行
15
刪除資料行提供刪除資料功能
文字–欲顯示的文字 (全一致)
文字欄位–欲顯示的資料內容 (繫結)
用法
當刪除資料行中的按鈕被點選時，會引發 RowDeleting 事件
RowDeleting 事件會將選取到的資料列傳入事件參數 e 當中
可在該事件中撰寫修改資料庫資料相關程式
實例探討 sample3-a4
16
程式功能
刪除會員帳號
程式內容
protected void memberDG_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
conn.DeleteCommand =
"DELETE FROM member WHERE id ='" +
memberDG.Rows[e.RowIndex].Cells[1].Text + "'";
conn.Delete();
memberDG.DataBind();
}
課堂練習 sample3-b3
17
程式功能
延續 sample3-b1，設計討論區刪除主題功能
在每一資料列加入刪除功能
設計全部刪除按鈕
基本概念
利用 delete 語法刪除資料
利用刪除資料行建立刪除按鈕
SQL 語法 – Update
18
UPDATE 更新命令用來修改資料表中的指定資料
語法
UPDATE 資料表名稱 SET 欄位1=資料1, 欄位2=資料2, … WHERE 條件式
用法
UPDATE student SET name=„Bob‟ where id = 2
編輯、更新、取消資料行
編輯、更新、取消資料行提供資料功能
編輯文字–設定編輯按鈕顯示文字
更新文字–設定更新按鈕顯示文字
取消文字–設定取消按鈕顯示文字
用法
當編輯按鈕被點選時，會引發 RowEditing 事件
RowEditing 事件會將選取到的資料列傳入事件參數 e 當中
可將 GridView 的 EditIndex 屬性設定為該選取資料列的索引 值 e.NewEditIndex 並重新執行繫結動作
編輯和取消按鈕被點選時，會引發 RowUpdating 及 RowDeleting 事件，可在該事件中撰寫對應處理程式
19
實例探討 sample3-a5
20
程式功能
修改會員密碼
程式內容
protected void upDG() {
string dataSource = Server.MapPath("member.mdb");
string SqlCmd = "select * from member";
conn = new AccessDataSource(dataSource, SqlCmd);
memberDG.DataSource = conn;
memberDG.DataBind();
}
實例探討 sample3-a5
21
程式內容
protected void memberDG_RowEditing(object sender, GridViewEditEventArgs e)
{
string id =
memberDG.Rows[e.NewEditIndex].Cells[1].Text;
string pw = TextBox.Text;
conn.UpdateCommand =
"UPDATE member SET pw='" + pw + "' WHERE id='" + id + "'";
conn.Update();
memberDG.DataBind();
}
課堂練習 sample3-b4
22
程式功能
設計討論區修改主題功能
提供選取按鈕
將選取項目顯示於文字方塊中
提供修改按鈕
基本概念
利用 Update 語法修改資料
利用選取資料行建立選取按鈕
樣板資料行 (1)
GridView 中的樣板資料行可加入任意的控制項，
允許我們自由的設計資料顯示方式
23
樣板資料行 (2)
在 GridView 控制項中點選右鍵，可在『編輯樣板
』選項中選取欲編輯的樣板資料行
24
樣板資料行 (3)
在樣板編輯視窗中，從工 具箱拖曳 LinkButton 控制 項至 ItemTemplate 項目中
將該 LinkButton 控制項的 CommandName 屬性設定 為 Select
25
樣板資料行 (4)
右鍵點選 LinkButton 控制項的 (Edit DataBindings…) ，在自 訂繫結運算式視窗中，加入繫結語法
Eval(“name”)
26
樣板資料行 (5)
同樣繫結樣板資料行中的 Image 控制項Eval(“image")
27
實例探討 sample3-a6 (1)
28
程式功能
藝人簡介
點選藝人名稱導至該藝人詳細資料頁面
程式內容
利用 GridView 中的樣板資料行加入 LinkButton 及 Image 控制 項，用來連結藝人詳細資料頁面及顯示藝人照片縮圖
實例探討 sample3-a6 (2)
程式內容
29
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Select") {
Session.Add("name",
((LinkButton)e.CommandSource).Text);
Response.Redirect("WebForm1.aspx");
} }
實例探討 sample3-a6 (2)
程式內容
顯示詳細資料
30
protected void Page_Load(object sender, EventArgs e) {
string name = Session["name"].ToString();
string SqlStr = "select * from member where name = '“
+name+"'";
AccessDataSource conn =
new AccessDataSource(Server.MapPath("member.mdb"),SqlStr);
conn.DataBind();
GridView temp = new GridView();
temp.DataSource = conn;
temp.DataBind();
Response.Write(temp.Rows[0].Cells[0].Text + temp.Rows[0].Cells[1].Text);
Image1.ImageUrl =temp.Rows[0].Cells[2].Text.ToString();
}
課堂練習 sample3-b5
程式功能
更新瀏覽人數資料
基本概念
利用 GridView 中的樣板資料行加入 一 LinkButton 控制項
點選該控制項時連接資料庫更新瀏覽人數欄位資料
利用 CommandArgument 來儲存識別碼
31
DataList 控制項 (1)
DataList 控制項可使用樣板與樣式定義的格式來 顯示資料
常用屬性
DataSource – 設定資料來源
常用方法
DataBind – 進行資料繫結
32
DataList 控制項 (2)
在 DataList 控制項上點選右鍵，選擇欲編輯的樣 板區塊
33
DataList 控制項 (3)
項目樣板的編輯畫面 中，可以在
ItemTemplate 中設定 欲顯示的資料格式
可利用 HTML 控制項 中的 Table 控制項進 行排版動作
(最好將 Table 格式設定 好後，再拖曳至
DataList 的 ItemTemplate 項目中)
34
實例探討 sample3-a7 (1)
程式功能
購物清單
程式內容
35
protected void totalBTN_Click(object sender, System.EventArgs e)
{
int total = 0;
foreach (DataListItem item in shoppingDL.Items) {
if (((CheckBox)item.FindControl("purchaseCB")).Checked) total +=
int.Parse(((Label)item.FindControl("costLB")).Text);
}
totalLB.Text = total.ToString();
}
課堂練習 sample3-b6
程式功能
延續 sample3-b5
利用 DataList 控制項顯示文章內容
基本概念
在 Table 中放置 Web 控制項中的 Label 控制項，設定該 Label 控制項的資料繫結運算式，以顯示資料表中資料
最後將 Table 控制項拖曳至 DataList 的 ItemTemplate 項 目中
主程式需設定 DataList 的 DataSource 屬性及進行 DataBind 動作
36
常用樣板
ItemTemplate
設計控制項中每一列資料的外觀
AlternatingItemTemplate
類似 ItemTemplate 樣板，此樣板為每隔一資料列的 方式呈現
EditItemTemplate
設計編輯模式資料列的外觀
SelectedItemTemplate
設計選取模式資料列的外觀
37
實例探討 sample3-a8 (1)
程式功能
購物清單
程式內容
38
protected void Page_Load(object sender, System.EventArgs e) {
string dataSource = Server.MapPath("db1.mdb");
string sqlStr = "select * from shopping " ;
conn = new AccessDataSource(dataSource, sqlStr);
if(!IsPostBack) upDL();
}
protected void upDL()
shoppingDL.DataSource = conn;
shoppingDL.DataBind();
}
課堂練習 sample3-b7
程式功能
利用 DataList 控制項設計學生成績表
以二行不同色彩方式顯示學生成績並提供編輯功能
基本概念
利用 Table 設定欲顯示畫面
在 DataList 的 ItemTemplate 及
AlternatingItemTemplate 項目中置入不同樣式格式
設計 EditItemTemplate 項目
39
使用者控制項
使用者控制項允許我們自訂所需的控制項形式
設計使用者控制項
在方案總管專案名稱上點選右鍵來加入使用者控制 項
可藉由 HTML 控制項中的 GridLayoutPanel 來進行絕 對座標排版
引用使用者控制項
從方案總管中將使用者控制項拖曳至設計畫面即可
40
加入使用者控制項 (1)
在專案名稱上點選右鍵，即可加入一使用者控 制項
41
加入使用者控制項 (2)
在加入新項目視窗中，選取 Web 使用者控制項 項目
42
加入使用者控制項 (3)
成功加入後，方案總管中即會產生一副檔名為 ascx 的使用者控制項檔案
43
實例探討 sample3-a9
程式功能
登入帳號密碼檢驗
程式內容
44
private void submitBTN_Click(object sender, System.EventArgs e) {
if(idTB.Text == "alice" && pwTB.Text == "alice") messageLB.Text = "登入成功";
else
messageLB.Text = "資料錯誤";
messageLB.Visible = true;
}
存取使用者控制項成員內容
如果需要在引用的程式碼中，存取使用者控制 項的欄位屬性值，或是呼叫方法時，必須在引 用的程式碼中先宣告該使用者控制
宣告方式
public 使用者控制項類別名 使用者控制項 ID;
public WebUserControl1 myControl;
45
課堂練習 sample3-b8
程式功能
登入系統
基本概念
利用 UserControl 建立一登入控制項，允許使用者設 定資料庫、資料表及登入成功連結網頁等資訊
在主程式中設定上述參數資訊
46
