ASP .net(照片列表詳細功能演示）
大家好,今天我們需要講解的內容就是把上篇文章當中提到的照片列表的很多功能細化去做。
那么之間我們兩篇文章的目的就是要讓大家深刻體會get，post的使用場景極其作用。像一般處理程序的使用，隱藏域的使用，請求上下文，至於用JQuery，AJAX等的介紹在后面會有，前面兩篇文章不做重點講解。
首先在我們上次寫的代碼的基礎之上實現光棒效果,直接寫到模板頁里面就行了。用JavaScript寫的話代碼太多了，所以我們用JQuery來寫。
一、需要注意的地方
二、隔行變色效果
三、比上次好看了吧？
四、光棒效果代碼
五、炫目的光棒效果
下面我們做點擊照片的標題的時候，轉向大圖，還有照片的詳細信息。它能點,需要把它變成超鏈接。點它的時候要轉向一個頁面，建個一般處理程序來做這件事兒。要讓這個頁面變得好看一些，需要建個模板。
六、使用同一個模板
七、使用占位符
八、進行替換
九、讓標題能點
點擊的時候要看照片的詳細頁面，這個時候知道看哪張照片么？所以就要告訴它。應該把id傳過去。把id通過get的方式傳過去，在url上傳個pid
十、傳pid
下面我們要做的就是照片的詳細頁面顯示出來內容。在UI層需要底層根據id返回照片對象，底層還沒有方法呢？先寫底層的方法。
十一、根據id返回照片對象dal代碼
在bll里面調用，
十二、在bll層內調用
底層的代碼寫完以后，要去編譯一下。目的一，保證語法沒有錯誤，二，后面再說。
照片詳細頁面一般處理程序代碼插入位置：
View Code
1 <%@ WebHandler Language="C#" Class="_02_PhotoDetails" %> 2 3 using System; 4 using System.Web; 5 using MyPhotos.Model; 6 using MyPhotos.BLL; 7 using System.Text; 8 9 public class _02_PhotoDetails : IHttpHandler { 10 11 public void ProcessRequest (HttpContext context) { 12 context.Response.ContentType = "text/html"; 13 //1.讀取模板 14 string path = context.Request.MapPath("templete.htm"); 15 string html = System.IO.File.ReadAllText(path); 16 17 //2.獲取pid 18 string s=context.Request.QueryString["pid"]; 19 20 //在url傳過來的值，默認情況下是我們給賦的。 21 int pid; 22 if (int.TryParse(s,out pid)) 23 { 24 //正確的話，調用底層的代碼。 25 //3.讀數據庫 26 PhotosBLL BLL = new PhotosBLL(); 27 Photos p = BLL.GetPhotoByPid(pid); 28 29 //4.拼表格 30 StringBuilder sb = new StringBuilder(); 31 sb.Append("<table id='photoDetails' cellspacing='0px'>"); 32 sb.Append("<tr><td>標題</td><td>"+p.PTitle+"</td></tr>"); 33 sb.Append("<tr><td>圖片</td><td><img src='images/"+p.PUrl+"'width='400px'/></td></tr>"); 34 sb.Append("<tr><td>點擊次數</td><td>" + p.PClicks + "</td></tr>"); 35 sb.Append("<tr><td>支持</td><td>" + p.PUp + "</td></tr>"); 36 sb.Append("<tr><td>反對</td><td>" + p.PDown + "</td></tr>"); 37 sb.Append("<tr><td>發布時間</td><td>" + p.PTime + "</td></tr>"); 38 sb.Append("<tr><td>描述</td><td>" + p.PDes + "</td></tr>"); 39 sb.Append("</table>"); 40 41 //5.替換 42 html=html.Replace("@title","照片詳細頁面").Replace("@table",sb.ToString()); 43 44 //6.輸出 45 context.Response.Write(html); 46 } 47 else 48 { 49 context.Response.Write("參數不正確！！！"); 50 } 51 } 52 53 public bool IsReusable { 54 get { 55 return false; 56 } 57 } 58 59 }
十三、報錯
十四、加個邊框
十五、照片詳細信息演示
這塊有個點擊次數，支持，反對。點擊次數什么時候去加，看的時候就要加上。詳細信息頁面要放個返回按鈕。
寫下底層的方法。
十六、dal更新點擊次數代碼
十七、執行更新點擊次數的SqlHelper代碼
十八、調用寫好的SqlHelper更新點擊次數的方法
十九、在bll里面調用
寫完之后，編譯一下。
這里我們把剛才寫的照片詳細頁面的步驟寫下，幫大家梳理一下思路。
1、照片詳細頁面
1、在照片列表頁面中 點擊照片標題 傳pid（url傳參）
2、照片詳細頁面 讀取模板
3、獲取url中的pid
4、根據pid讀照片對象（bll dal）
5、拼表格
6、替換html中的占位符
7、輸出頁面
2、更新點擊次數
二十、更新點擊次數並且加個返回列表
二十一、手動更改pid
二十二、頁面報錯
二十三、這樣來解決剛才的問題
二十四、報錯解決演示
下面我們寫下刪除照片。
先從底層開始寫。
二十五、刪除照片dal代碼
二十六、在bll里調用刪除
編譯一下。
二十七、讓刪除能點
可以在照片列表頁面直接刪除，但是寫起來比較的麻煩，我們先建個一般處理程序，在這里面去寫，也比較的好理解。
刪除一般處理程序代碼：
View Code
1 <%@ WebHandler Language="C#" Class="_03_PhotoDelete" %> 2 3 using System; 4 using System.Web; 5 6 public class _03_PhotoDelete : IHttpHandler { 7 8 public void ProcessRequest (HttpContext context) { 9 context.Response.ContentType = "text/html"; 10 //1.獲取url 上的pid 11 string s=context.Request.QueryString["pid"]; 12 //判斷一下拿到的pid是不是一個整數 13 int pid; 14 if (int.TryParse(s,out pid)) 15 { 16 MyPhotos.BLL.PhotosBLL bll = new MyPhotos.BLL.PhotosBLL(); 17 if (bll.Delete(pid)) 18 { 19 //提示並跳轉 20 //通過JS實現提示和跳轉 21 context.Response.Write("<script type='text/javascript'>alert('刪除成功;');location.href='01-PhotosList.ashx'</script>"); 22 } 23 else 24 { 25 context.Response.Write("<script type='text/javascript'>alert('刪除失敗;');location.href='01-PhotosList.ashx'</script>"); 26 } 27 } 28 else 29 { 30 context.Response.Write("參數錯誤！！"); 31 } 32 } 33 34 public bool IsReusable { 35 get { 36 return false; 37 } 38 } 39 40 }
如果在刪除的時候有外鍵的關系，這個時候我們要用之前學過的級聯刪除進行刪除。
要是在刪除的時候像刪除部門的時候，這個時候要提示用戶是不是也刪除部門下的員工。
二十八、監視下請求
二十九、做好添加的准備工作
有個表單，放個模板。
畫好的添加表單代碼：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 </head> 7 <body> 8 <form action="04-PhotoAdd.ashx" method="post"> 9 <input type="hidden" name="_viewsatae" value="123" /> 10 標題：<input type="text" name="txtTitle" value="@title" /><br /> 11 照片：<input type="text" name="txtUrl" value="@url" /><br /> 12 描述:<input type="text" name="txtDes" value="@des" /><br /> 13 <input type="submit" value="添加" /> 14 </form> 15 </body> 16 </html>
像上傳圖片，像照片屬於哪個相冊，像照片是哪個人發的，這些我們先都忽略了。
先寫底層的代碼。
看看哪些列是必須得？
三十、畫紅框的都要寫
三十一、寫好增加的dal代碼
三十二、增加在bll調用一下
注意，寫完底層要編譯一下。
三十三、分析過程
上圖中是viewstate。
執行添加的一般處理程序代碼插入位置：
View Code
1 <%@ WebHandler Language="C#" Class="_04_PhotoAdd" %> 2 3 using System; 4 using System.Web; 5 using MyPhotos.BLL; 6 using MyPhotos.Model; 7 public class _04_PhotoAdd : IHttpHandler { 8 9 public void ProcessRequest (HttpContext context) { 10 context.Response.ContentType = "text/html"; 11 //1.讀取模板 12 string path = context.Request.MapPath("add.htm"); 13 string html = System.IO.File.ReadAllText(path); 14 15 //2.判斷頁面是否是首次加載 16 string viewstate=context.Request.Form["_viewstate"]; 17 if (!string.IsNullOrEmpty(viewstate)) 18 { 19 //post,做添加的操作,取那些值，目的-還原照片對象。 20 PhotosBLL bll = new PhotosBLL(); 21 Photos p = new Photos(); 22 p.PDes=context.Request.Form["txtDes"]; 23 p.PTitle=context.Request.Form["txtTitle"]; 24 p.PUrl=context.Request.Form["txtUrl"]; 25 26 p.PTypeId = 1; 27 p.PUserId = 1; 28 29 //3.添加 30 if (bll.AddPhoto(p)) 31 { 32 context.Response.Write("<script type='text/javascript'>alert('添加成功');location.href='01-PhotosList.ashx'</script>"); 33 } 34 else 35 { 36 context.Response.Write("<script type='text/javascript'>alert('添加失敗');location.href='01-PhotosList.ashx'</script>"); 37 } 38 } 39 else 40 { 41 //頁面首次加載 42 context.Response.Write(html); 43 } 44 45 } 46 47 public bool IsReusable { 48 get { 49 return false; 50 } 51 } 52 }
三十四、添加照片演示
下面我們監視一下添加:
三十五、監視post請求
這是添加成功的時候，要是添加失敗的時候應該干什么呢？
讓用戶在這個頁面上把數據改一下重新去提交。
三十六、把代碼改成這樣
三十七、為什么會這樣？
三十八、原因
三十九、解決辦法
下面我們在用戶輸入錯誤的時候，把用戶輸入的內容回填回去。
四十、改造第一步
四十一、改造第二步
下面我們做下編輯功能，點編輯按鈕看到類似添加的頁面，還要看到原來的數據。就跟做詳細頁面一樣，傳過來一個pid，根據pid讀到相應的值。點擊修改，把用戶修改的數據重新提交回數據庫。
先寫底層的代碼。
先寫更新，跟添加一樣。
四十二、寫個底層的修改照片的方法dal
四十三、修改照片在bll里面調用一下
現在寫一般處理程序，需要個html頁面用之前的添加照片的頁面可以。用的時候要放還幾個占位符，再去替換，這塊我們再建個頁面。
四十四、改下之前的頁面
四十五、修改下照片列表頁面
第一階段讀取頁面信息代碼插入位置：
View Code
1 <%@ WebHandler Language="C#" Class="_05_PhotoEdit" %> 2 3 using System; 4 using System.Web; 5 using MyPhotos.BLL; 6 using MyPhotos.Model; 7 8 public class _05_PhotoEdit : IHttpHandler { 9 10 public void ProcessRequest (HttpContext context) { 11 context.Response.ContentType = "text/html"; 12 //1.讀取靜態模板 13 string path = context.Request.MapPath("edit.htm"); 14 string html = System.IO.File.ReadAllText(path); 15 16 //2.判斷是不是第一次加載 17 string s=context.Request.Form["_viewstate"]; 18 if (string.IsNullOrEmpty(s)) 19 { 20 //第一次加載 21 22 //3 讀取url上的pid 23 string str=context.Request.QueryString["pid"]; 24 int pid; 25 if (int.TryParse(str,out pid)) 26 { 27 PhotosBLL bll = new PhotosBLL(); 28 Photos p=bll.GetPhotoByPid(pid); 29 if (p!=null) 30 { 31 //4 給文本框賦值 32 html = html.Replace("@title",p.PTitle).Replace("@url",p.PUrl).Replace("@des",p.PDes); 33 //5 輸出 34 context.Response.Write(html); 35 } 36 else 37 { 38 //沒讀到照片 39 } 40 } 41 else 42 { 43 //參數錯誤 44 } 45 } 46 } 47 48 public bool IsReusable { 49 get { 50 return false; 51 } 52 } 53 54 }
四十六、第一階段讀取頁面信息演示
下面我們做點修改把數據提交給服務器。服務器把修改后的內容提交給數據庫。這有個問題，點擊按鈕重新提交給服務器的時候，能不能讀到pid？
沒有了。
四十七、修改照片的請求過程
四十八、解決pid問題一
四十九、再把pid放進來
五十、看下源代碼，這個時候有值了。
第二階段獲取post過來的數據更新操作代碼插入位置：
View Code
1 <%@ WebHandler Language="C#" Class="_05_PhotoEdit" %> 2 3 using System; 4 using System.Web; 5 using MyPhotos.BLL; 6 using MyPhotos.Model; 7 8 public class _05_PhotoEdit : IHttpHandler { 9 10 public void ProcessRequest (HttpContext context) { 11 context.Response.ContentType = "text/html"; 12 //1.讀取靜態模板 13 string path = context.Request.MapPath("edit.htm"); 14 string html = System.IO.File.ReadAllText(path); 15 16 //2.判斷是不是第一次加載 17 string s=context.Request.Form["_viewstate"]; 18 if (string.IsNullOrEmpty(s)) 19 { 20 //第一次加載 21 //3 讀取url上的pid 22 string str=context.Request.QueryString["pid"]; 23 int pid; 24 if (int.TryParse(str,out pid)) 25 { 26 PhotosBLL bll = new PhotosBLL(); 27 Photos p=bll.GetPhotoByPid(pid); 28 if (p!=null) 29 { 30 //4 給文本框賦值 31 html = html.Replace("@title",p.PTitle).Replace("@url",p.PUrl).Replace("@des",p.PDes).Replace("@pid",p.PId.ToString()); 32 //5 輸出 33 context.Response.Write(html); 34 } 35 else 36 { 37 //沒讀到照片 38 } 39 } 40 else 41 { 42 //參數錯誤 43 } 44 } 45 else 46 { 47 PhotosBLL bll = new PhotosBLL(); 48 //二、postback 49 //接收提交過來的數據 50 Photos p = new Photos(); 51 p.PId=int.Parse(context.Request.Form["hdPid"]); 52 p.PTitle=context.Request.Form["txtTitle"]; 53 p.PDes=context.Request.Form["txtDes"]; 54 p.PUrl=context.Request.Form["txtUrl"]; 55 // 56 p.PTypeId = 1; 57 p.PUserId = 1; 58 //更新數據 59 if (bll.UpdatePhoto(p)) 60 { 61 context.Response.Write("<script type='text/javascript'>alert('修改成功');location.href='01-PhotosList.ashx'</script>"); 62 } 63 else 64 { 65 //給文本框賦值 66 html = html.Replace("@title", p.PTitle).Replace("@url", p.PUrl).Replace("@des", p.PDes).Replace("@pid", p.PId.ToString()); 67 //輸出 68 context.Response.Write(html); 69 //提示 70 context.Response.Write("<script type='text/javascript'>alert('修改失敗');</script>"); 71 } 72 } 73 } 74 75 public bool IsReusable { 76 get { 77 return false; 78 } 79 } 80 81 }
五十一、第二階段獲取post過來的數據更新操作演示
到這里ASP.net的增刪改查我們就都寫完了，並且復習了我們之前文章重點講解的三層，JQuery，數據庫等知識點。
五十二、常見錯誤一
五十三、常見錯誤二
五十四、做個刪除的提示功能
下面我們看看一般處理程序執行的過程:
五十五、請求響應的過程
五十六、HTTP請求詳解圖
通過socket建立連接，去收發數據，因為傳輸層用的是TCP協議。經過三次握手，創建一個連接。
創建連接之后，服務器處理完了，把數據發送給瀏覽器。
DNS尋址--把輸入的域名解析成IP地址。
五十七、執行過程圖解一
五十八、執行過程圖解二
五十九、十九個事件
一般處理程序過程原理：
1.當瀏覽器（B）請求(Request)發送到服務器電腦，電腦將請求交給指定80端口的軟件IIS，IIS發現.aspx和.ashx它自己處理不了，
就將請求交給IIS擴展程序 ASPNET_isapi.dll來處理(交給FrameWork中的w3wp.exe(工作者進程)，然后創建一個Application Domain(應用程序域)，把一個進程放在一個應用程序域中，防止崩潰)。
然后請求被交給HttpRuntime（是一個類，http運行時) ProcessRequest（靜態方法）(HttpWorkerRequest wr）處理，HttpRuntime會將[http請求報文]封裝到HttpContext(用來請求上下文，HttpRequest，HttpReponse)對象中，並通過HttpApplicationFactory來創建一個【HttpApplication】，同時將HttpContext對象傳給它。
接下來，大部分處理都是由HttpApplication(負責創建和執行頁面，里面有十九個事件，其中HttpModel就是對請求事件過濾)來完成的！
包括 調用處理管道(一系列過濾器---本質上就是調用一系列委托)以及創建被請求的頁面類的對象並處理。
注：一次請求過來能被好多個HttpModel處理，但最終只能交給一個handler.
下面我們跟蹤一下這個流程：
我們從HttpRuntime開始看，創建那些對象都是通過HttpRuntime開始創建的。HttpRuntime是由其它人去調用的。
六十、找到我們最感興趣的方法
這個方法是靜態的，里面傳過來一個參數，HttpWorkerRequest，是由調用者把這個參數傳過來的。我們見過httpcontext，就是通過HttpWorkerRequest而來的。它是底層的請求上下文。
六十一、把wr傳過去
六十二、又調用了一遍
六十三、最終幫我們創建了什么？
六十四、創建HttpContext的時候，又干了什么？
六十五、init內部都干了什么？
六十六、看下Request怎么創建的？
六十七、context是高層的請求上下文，HttpWorkerRequest是底層的請求上下文。
這是HttpRuntime幫我們創建了一個context高層的請求上下文。
我們再看下創建Httpapplication.
六十八、說明執行過程圖解一二
創建的過程比較的復雜。我們來簡單的看一下。
六十九、看這兒是怎么實現的
七十、HttpApplication都實現了什么
七十一、實現了兩個接口
七十二、異步接口實現了什么？
七十三、通過反編譯我們知道的事情
七十四、調用過程
回到起始位置
作者近期文章列表:
| C#中級進階教程（完全免費，獻給代碼愛好者的最好禮物。注：本作者分享自己精心整理的C#中級進階教程，無任何商業目的。希望與更多的代碼愛好者交流心得，也請高手多多指點！！！） | |
| ASP.net項目 | 圖書商城項目總論 |
| ASP.net系列 | ASP.NET（get和post比較） |
| asp.net-(含：模擬登陸，照片列表） | |
| 三層及其它內容 | 遞歸 |
| 三層（一） | |
| 三層相關案例（及常見的錯誤） | |
| 三層實例（內涵Sql CRUD） | |
| 手寫代碼生成器 | |
| SQL數據庫 ADO.net | 數據庫的應用圖解一 |
| 數據庫的應用詳解二 | |
| ADO.NET（內涵效率問題） | |
| ADO.NET實例教學一 | |
| ADO.NET實例教學二 | |
| 數據庫的應用詳解三 | |
| ADO.NET（內含存儲過程講解） | |
| 面向過程，面向對象中高級 | 面向過程，面向對象的深入理解一 |
| 面向過程，面向對象的深入理解二 | |
| 面向對象的深入理解三 | |
| 正則表達式 | |
| 無處不在的XML | |
| winform基礎 | Winform基礎 |
| winform中常用的控件 | |
| 面向過程 | 三種循環的比較 |
| C#中的方法（上） | |
| 我們常見的數組 | |
| 面向對象 | 思想的轉變 |
| C#中超級好用的類 | |
| C#中析構函數和命名空間的妙用 | |
| C#中超級好用的字符串 | |
| C#中如何快速處理字符串 | |
| 值類型和引用類型及其它 | |
| ArrayList和HashTable妙用一 | |
| ArrayList和HashTable妙用二 | |
| 文件管理File類 | |
| 多態 | |
| C#中其它一些問題的小節 | |
| GDI+ | 這些年我收集的GDI+代碼 |
| 這些年我收集的GDI+代碼2 | |
| HTML概述以及CSS | 你不能忽視的HTML語言 |
| 你不能忽視的HTML語言2精編篇 | |
| 你不能忽視的HTML語言3 | |
| html-綜合篇 | |
| CSS基本相關內容--中秋特別奉獻 | |
| CSS基本相關內容2 | |
| JavaScript基礎 | JavaScript基礎一 |
| javascript基礎二JavaScript DOM編程 | |
| jQuery | jQuery(內涵: jquery選擇器) |
| jquery實例教學一 | |