許多人曾問我, 如何才能學好 ASP.NET? 其實成功沒有捷徑, 若要通達 ASP.NET, 最重要的是透過扎實的學習與理解, 掌握 ASP.NET 核心精髓, 方能應付千變萬化的狀況 而 ASP.NET 程式基礎, 除了學會使用 ASP.NET 各種基礎功能 內建控制項外, 對於 C# 語言本身特質, 亦應有清楚理解, 同時對資料庫也要有一定熟悉度, 如此在實務開發中, 就能得心應手, 左右逢源 針對以上目標, 本書以入門及實務學習為出發點, 從 VS 2012 SQL Server 資料庫到 ASP.NET 控制項皆有詳盡介紹, 並融合 C# 基礎語法教學, 讓讀者能夠有全面性的穩健學習方向 同時在詳細的範例步驟引導下, 能有效增進學習效率, 減少實作練習之挫折感, 相信在用心學習後, 都能得到良好的成果 且在書末附有兩章完整範例專題實作, 教您整合 ASP.NET 所有元素, 建構實務的 ASP.NET 網站, 相信能讓您領會專案開發所需注意之種種細節與考量 最後, 入門技術不代表用完即丟, 反而是進階技術的根基, 因為進階技術之突破與解題, 仍須回歸到基礎概念之強弱, 基礎觀念清晰者, 對進階技術領受思維與問題解決能力就愈強 ; 所以衷心建議所有初學者, 在入門書上應多用心研讀與實作, 反覆閱讀與思考, 相信堅實的學習底子, 對日後精通 ASP.NET 定能大大的加分! 聖殿祭司奚江華
ASP.NET 4.5 完美入門 使用 C# 網頁程式常會由 A 頁面切換導向 B 頁面, 而這中間涉及了許多技巧與議題, 例如 : 網頁導向切換的方式 資料參數的傳遞 網頁間的資料共用與狀態管理, 本章將逐一解說這些重要的基礎技術 圖 15-1 網頁切換與狀態管理 15-1 Pages 頁面之間的切換導向技巧 使用者瀏覽網頁時, 常會由 A 頁面導向 (Redirect) 到 B 頁面, 而 B 頁面又可能會切換到 C 頁面, 而網頁間的切換導向技術分為兩大類 : Client 端的頁面切換, Server 端的頁面切換 : Client 端的頁面切換類型 Client 端的網頁切換完全是在 Client 端進行, 不必提交回伺服器處理, 直接在前端就能進行網頁的切換, 常見的指令有 : Location.href Window.navigate() Window.open() 與 <a href=""></a> 四種 Server 端的頁面切換類型 Server 端的網頁切換是依賴後端伺服器來處理, 通常由 ASP.NET 控制項所引發, 進而將 Request 提交回伺服端, 再由伺服端產生網頁切換導向的指令, 常見的指令有 : Response.Redirect() Server.Transfer() 與 跨網頁公佈 (Cross-Page Posting) 三種 15-2
Chapter 15 網頁導向及狀態管理技術 Location.href Window.navigate() Client 端 Window.open() 頁面切換技巧 <a href=""></a> Response.Redirect() Server 端 Server.Transfer() 跨網頁公佈 圖 15-2 Page 頁面切換技巧 頁面切換, 有時是純 Client 端技巧就可以搞定, 有的用純 Server 端技巧就可以完成, 但有時也會視情況而混用 Client 與 Server 端技巧 15-1-1 Client 端的頁面切換類型 Client 端常見的網頁切換導向技術有下表四種 表 15-1 Client 端的網頁切換指令 類型 location.href window.navigate() 使用方式 lcation.href="http://www.sina.com.tw" window.navigate("http://www.pchome.com.tw") window.open() window.open("http://tw.yahoo.com") <a href=""> </a> <a href="http://www.microsoft.com"> 微軟網站 </a> 以上前三種只要在 HTML element 的 onclick 事件中, 套用指令即可, 最後一種則是屬於 HTML 的 Tag 宣告方式 此外網頁在切換時, 若有資料參數需要傳遞至新的網頁, 可在網址末端以問號附加字串, 以此達到傳遞參數的目的 15-3
ASP.NET 4.5 完美入門 使用 C# 範例 15-1 Client 端的網頁切換程式技巧 在此示範表 15-1 的四種 Client 端網頁切換程式技巧, 請參考 ClientNavigate.aspx 程式 : 建立 Client 端 HTML Button 按鈕 從工具箱拖曳建立三個 HTML 的 Button 按鈕 圖 15-3 拖曳建立 HTML 的 Button 按鈕 設定 onclick 事件執行網頁切換移轉 設定 Button 的 id 與 value 屬性, 並加入 onclick 網頁導向設定 : <input id="btnlocation" onclick="location.href='http://www.sina.com.tw'" type="button" value="location.href" /> <input id="btnnavigate" onclick="window.navigate('http://www.pchome.com.tw')" type="button" value="window.navigate" /> <input id="btnopen" onclick="window.open('http://tw.yahoo.com')" type="button" value="window.open" /> 一般在做 Client 端的網頁切換時, 多半由 Hyperlink 超連結或 Button 的 click 事件觸發執行, 在使用者點選後, 才執行導向的動作 設定 <a href=""> <a> 的網頁導向超連結 <a></a> 是在 href 屬性指定導向的網址即可 : <a href="http://www.microsoft.com"> 微軟網站 </a> 15-4
Chapter 15 網頁導向及狀態管理技術 程式說明 當點選任一 Button 時, 即會導向到另一個目標網址頁面 圖 15-4 Client 端網頁的頁面切換 15-1-2 Server 端的頁面切換類型 Server 端頁面切換, 是透過伺服端的程式來進行導向 當使用者點選伺服端控制項後, 然後由 Server 端產生網頁切換移轉的指令, 常見的有下表三種 表 15-2 ASP.NET 伺服端的網頁切換指令 類型 Response.Redirect() 使用方式 Response.Redirect("http://www.google.com") Server.Transfer() Server.Transfer("Login.aspx ") 跨網頁公佈 透過 PreviousPage 物件存取來源網頁之控制項與資料 以上三種方式,Redirect() 與 Transfer() 方法是在 ASP.NET 1.0 就內建的, 第三種跨網頁公佈是在 ASP.NET 2.0 才有的, 而 Redirect() 與 Transfer() 是最常被使用及拿來比較的 15-5
ASP.NET 4.5 完美入門 使用 C# 表 15-3 Redirect 與 Transfer 方法之比較 類型比較 Response.Redirect() Server.Transfer() 導向網站限制目標網頁類型資料參數之傳遞 Url 網址列瀏覽記錄更新 可以導向任何網頁, 不限同一個網站 目標網頁類型可為.htm asp jsp aspx 等任何的網頁類型 透過 QueryString 傳遞資料參數 在導向目標網頁後,Url 網址為目標網頁之網址 會更新瀏覽器記錄 (History), 按下瀏覽器上一頁 / 下一頁或 Refresh 按鈕時, 功能正常 限制來源網頁與目標網頁必須屬於同一個網站 目標網頁類型必須是.aspx 類型, 不可為.asp 或.asmx 網頁 除透過 QueryString 傳遞資料參數外, 還可以讀取 Form 表單集合中的值 在導向目標網頁後,Url 仍維持來源網頁之網址不變 不會更新瀏覽器記錄 (History), 按下瀏覽器上一頁 / 下一頁或 Refresh 按鈕時, 有可能會造成不可預期之結果 範例 15-2 以 Redirect 及 Transfer 方法設計 Server 網頁導向 在此示範 Redirect 及 Transfer 的網頁導向, 雖然二者在深入層面有所差異, 但是就粗淺的導向功能是差不多的, 請參考 ServerNavigate.aspx 程式 : 圖 15-5 Server 端的網頁導向技術 15-6
Chapter 15 網頁導向及狀態管理技術 建立控制項及版面配置 建立兩個 ASP.NET 的 Button 控制項, 給 Response.Redirect() 與 Server.Transfer() 使用 建立伺服端網頁導向之程式 雙擊兩個 Button, 建立 Response.Redirect() 及 Server.Transfer() 導向 程式 : 01 // 以 Response.Redirect() 方法進行網頁切換導向 02 protected void btnredirect_click(object sender, EventArgs e) 03 { 04 Response.Redirect("http://www.microsoft.com"); Redirect 方法 05 } 06 07 // 以 Server.Transfer() 方法進行網頁切換導向 08 protected void btntransfer_click(object sender, EventArgs e) 09 { 10 Server.Transfer("TargetPage.aspx"); Transfer 方法 11 } 建立目標網頁程式 加入 TargetPage.aspx 目標網頁程式 : 01 using System; 02 03 public partial class TargetPage : System.Web.UI.Page 04 { 05 static string sourceurl = ""; // 來源網頁 06 07 protected void Page_Load(object sender, EventArgs e) 08 { 09 if (!IsPostBack) 10 { 11 // 讀取並保存來源網頁 Url 12 sourceurl = Request.RawUrl.ToString(); 保留來源網頁 Url 網址 13 } 14 } 15 16 // 回上一頁 17 protected void btnback_click(object sender, EventArgs e) 18 { 15-7
ASP.NET 4.5 完美入門 使用 C# 19 // 導向回到上一頁之來源網頁 20 Response.Redirect(sourceUrl); 21 } 22 } 程式說明 原本 TargetPage.aspx 目標網頁不需寫任何程式就可正常執行, 但因為目標網頁常會有 回到上一頁 的需求, 所以順道說明如何撰寫回到上一頁的功能 範例 15-3 以跨網頁公佈執行 Server 端網頁導向與資料讀取 在此說明跨網頁公佈技術的運用, 以來源網頁 CrossPageSource.aspx 及目標網頁 CrossPageTarget.aspx 進行解說 : 圖 15-6 跨網頁公佈執行畫面 加入來源及目標網頁加入 CrossPageSource.aspx 及 CrossPageTarget.aspx 程式, 前者為來源網頁, 後者是目標網頁 在來源網頁中輸入使用者姓名, 按下 Button 按鈕後, 會導向目標網頁顯示姓名 指定跨網頁公佈目標網頁來源網頁 CrossPageSource.aspx 最重要的部分, 是將 Button 按鈕的 PostBackUrl 屬性指向目標網頁 CrossPageTarget.aspx, 設定二者導向的關連性 15-8