MIS2000 Lab. - ASP.NET專題實務 & WebForm +MVC 遠距教學: 2013/7/28

2013年8月2日星期五

[習題]ASP.NET 搭配美工人員設計好的HTML網頁 #2 -- Repeater

此為文章備份，原文請看我的網站：http://www.dotblogs.com.tw/mis2000lab/archive/2013/06/25/repeater_html_table_20130625.aspx

[習題]ASP.NET 搭配美工人員設計好的HTML網頁 #2 -- Repeater

請您先看過上一篇文章，再依序作下去

[習題]ASP.NET 搭配美工人員設計好的HTML網頁

http://www.dotblogs.com.tw/mis2000lab/archive/2013/03/19/aspnet_html_table_20120319.aspx

如果看不懂 HTML網頁，那就沒辦法了

看得懂的人

只要把美工人員的HTML碼（例如
或是

）

分別放在Repeater的三個樣版內，就行了。

表頭

<ItemTemplate> 身體（內文、文章主體），單數列。

另外有隔列換底色的、複數列（偶數列）的ItemTemplate>

表尾

執行成果如下，非常簡單

（嚴格來說，這跟ASP.NET控制項無關，也無關 .NET語法，純粹就是HTML碼而已）

圖片與HTML碼都可以在上一篇文章下載 ........ images.rar

===============================================================================

原始的HTML碼（表格），請您看懂以下的排版，

然後拆分成三大塊，放到 Repeater的「樣版」內

        與美工人員設計好的HTML一起搭配。




border="0" width="626px" id="table1" cellspacing="0" cellpadding="0">






                    漂亮的網站首頁

                    (HTML 網頁與 ASP.NET檔案結合)

                    ******** 這裡就是畫面中，可以放入ASP.NET控制項的位置******

















                    ===================================================

                    XYZ公司

                    台北市中華路一段七號八樓

                    TEL : (02) 1234-5678

===============================================================================

轉換成 Repeater

將上面的HTML表格，拆分成三大塊，放到 Repeater的「樣版」內

上面的黃色區塊，就是「反覆出現」的文章主題，也就是 <ItemTemplate>。

下面的紅字，就是資料繫結運算式（DataBinding Expression），這東西用途不少。請看書本「下集」的說明。

ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

與美工人員設計好的HTML一起搭配。

漂亮的網站首頁

(HTML 網頁與 ASP.NET檔案結合)

******** 這裡就是畫面中，可以放入ASP.NET控制項的位置******

<%# Eval("test_time", "{0:yyyy/MM/dd}") %>

<%# Eval("title") %>

===================================================

XYZ公司

台北市中華路一段七號八樓

TEL : (02) 1234-5678

ConnectionString="<%$ ConnectionStrings:testConnectionString %>"

SelectCommand="SELECT top 5 [id], [test_time], [title] FROM [test]">

另外一個FAQ，就是「Repeater如何搭配分頁？」

[習題]上集 Ch 14-4 撰寫ADO.NET DataReader的分頁程式#1（搭配SQL指令 ROW_NUMBER）

http://www.dotblogs.com.tw/mis2000lab/archive/2010/11/30/datareader_paging_row_number.aspx

[習題]上集 Ch 14-4 (Repeater與 ListView版) -- 撰寫ADO.NET DataReader的分頁程式#2（搭配SQL指令 ROW_NUMBER）

http://www.dotblogs.com.tw/mis2000lab/archive/2011/05/20/datareader_paging_row_number_repeater.aspx

............................. 寫信給我，mis2000lab (at) yahoo.com.台灣.........................................................
網頁上的補充範例（售後服務），不一定能立即提供 VB / C#語法（看時間夠不夠寫，請不要跟我們要）。

但書本上面的範例，一定有 VB / C#雙語法給您學習。請看我們的「售後服務」範圍（嚴格認定）。

防範SQL Injection / XSS攻擊，請看：ASP.NET安全寫作 資料來源 -- TWISC@NTUST網路應用安全知識庫

VS 2013 Preview裡面的WCF Data Service不見了？

此為文章備份，原文請看我的網站：http://www.dotblogs.com.tw/mis2000lab/archive/2013/06/28/vs2013_preview_wcf_data_service.aspx

VS 2013 Preview裡面的WCF Data Service不見了？

安裝 VS 2013 Preview版之後，開始測試一些書本上的範例。

第一個發現 WCF Data Service項目（.svc檔）消失了

查了一下原廠說明：

http://blogs.msdn.com/b/astoriateam/archive/2013/05/30/wcf-data-services-5-5-0-release.aspx

2013/5月底已經推出最新版（正式釋出）5.5.0版。

並建議在網站、專案內，使用 NuGet來加入新版本。

.............................................................................................

之前發現的 Bug，在 VS 2012 Update 3 (2012.3)仍存在。

Bug --

「加入服務參考」，探索這個網站的WCF Data Service

現在重新 Compiler就會出現下面的錯誤

錯誤 1 Reference.datasvcmap: 型別 'System.Data.Services.Client.DataServiceCollection`1' 模稜兩可。

其來源可能是組件 'C:\Windows\Microsoft.Net\assembly\GAC_MSIL\Microsoft.Data.Services.Client\v4.0_5.0.0.0__31bf3856ad364e35\Microsoft.Data.Services.Client.dll'

也可能是組件 'C:\Windows\Microsoft.Net\assembly\GAC_MSIL\System.Data.Services.Client\v4.0_4.0.0.0__b77a5c561934e089\System.Data.Services.Client.dll'。請在型別名稱中明確指定組件。 App_WebReferences/ServiceReference1/

特別跟讀者報告一聲。

但書本上面的範例，一定有 VB / C#雙語法給您學習。請看我們的「售後服務」範圍（嚴格認定）。

防範SQL Injection / XSS攻擊，請看：ASP.NET安全寫作 資料來源 -- TWISC@NTUST網路應用安全知識庫

文章內容的段落？分行？分段？換行？#2 (DetailsView、FormView為例) DataBinding Expression

此為文章備份，原文請看我的網站： http://www.dotblogs.com.tw/mis2000lab/archive/2013/07/09/detailsview_formview_article_br_databinding_expression.aspx

文章內容的段落？分行？分段？換行？#2 (DetailsView、FormView為例) DataBinding Expression

================================================

上一篇文章 文章內容的段落？分行？分段？換行？#1 (DetailsView、FormView為例) -- FindControl + DataBound事件

相同的成果，我們用另一種方法來撰寫

書本「下集」有一章很特別，專門講「DataBinding與 DataBinding Expression」

以前也有相關範例。

我們將沿用這一章的技巧來作這個範例。您可以在以前的範例看到類似的作法：

DataBinding？資料繫結？資料綁定？ #4--繫結運算式原來可以這樣用？(DataSet / DataReader)

[習題]DataBinding？資料繫結？資料綁定？ #6 -- 傷腦筋的 GridView加總、小計

.....................................................................................................................................................

Q : 我用 FormView與 DetailsView來呈現一篇文章、一個產品的內容

如何讓文章段落（換行、換列）能呈現在畫面上？

原本的畫面呈現，文章擠在一起，沒有分段落

修改後，變成這樣的畫面（文章每一段都有分段、換行、分段落）

當您輸入文字時，按下「Enter」鍵換行、換列、換段落（分段落）

瀏覽器是無法辨識這種「段落符號」的

瀏覽器只認識HTML碼！......
或是等等

您在文字方塊（TextBox）輸入的段落符號是這種：

C#的換行、換列 "\r\n"

VB的換行、換列 vbcrlf

.....................................................................................................................................................

HTML畫面設計：

1. DetailsView + SqlDataSource，並且把文章內容（article欄位）設定為樣板 / Template

2. 把原本的 Label

Text='<%# Bind("article") %>'

改成 Text='<%# myArticle() %>'

.....................................................................................................................................................

ASP.NET課程 / ASP.NET教學，請看

http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx

[台北] ASP.NET入門實戰 + ADO.NET進階【二合一】49 hr

ASP.NET影片、遠距教學，請看：

http://www.dotblogs.com.tw/mis2000lab/archive/2015/03/09/aspnet-online-learning-distance-education-2015.aspx

[遠距教學、教學影片] ASP.NET (Web Form) 六週課程上線了！

後置程式碼：

傳統的ADO.NET程式寫上去即可

public String myArticle()

{

//=======微軟SDK文件的範本=======

SqlConnection Conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["Web.Config設定檔裡面的DB連結字串"].ConnectionString);

SqlDataReader dr = null;

SqlCommand cmd = new SqlCommand("select article from test where id = " + DetailsView1.DataKey.Value , Conn);

String ArticleString = "";

try //==== 以下程式，只放「執行期間」的指令！=====================

{

//== 第一，連結資料庫。

Conn.Open(); //---- 這時候才連結DB

//== 第二，執行SQL指令。

dr = cmd.ExecuteReader(); //---- 這時候執行SQL指令，取出資料

//==第三，自由發揮，把執行後的結果呈現到畫面上。

dr.Read();

ArticleString = dr["article"].ToString().Replace("\r\n", "
");

//建議使用 .ExecuteScalar() 會更好

}

catch (Exception ex)

{

Response.Write("Error Message---- " + ex.ToString() + "

");

}

finally

{

// == 第四，釋放資源、關閉資料庫的連結。

if (dr != null)

{

cmd.Cancel();

dr.Close()

}

if (Conn.State == ConnectionState.Open)

{

Conn.Close();

}

return ArticleString;

}

這個範例有哪些缺點呢？

請參閱 jeff的文章 -- http://www.dotblogs.com.tw/jeff-yeh/archive/2009/12/14/12446.aspx

剩下兩個作法，包含這篇（前一篇文章）的範例，請由此下載：

MIS2000Lab_Article_BR.rar

但書本上面的範例，一定有 VB / C#雙語法給您學習。請看我們的「售後服務」範圍（嚴格認定）。

防範SQL Injection / XSS攻擊，請看：ASP.NET安全寫作 資料來源 -- TWISC@NTUST網路應用安全知識庫

[習題]ASP.NET AJAX 超入門「線上戰情室」#2 -- 圖片切換效果（障眼法）

此為文章備份，原文請看我的網站：http://www.dotblogs.com.tw/mis2000lab/archive/2013/07/10/asp_net_ajax_war_room2.aspx

[習題]ASP.NET AJAX 超入門「線上戰情室」#2 -- 圖片切換效果（障眼法）

上一篇文章： [習題]ASP.NET AJAX 超入門「線上戰情室」#1 -- 即時列出各門市的出貨狀況

有人說：他還是不會做出畫面的效果

書本上，有一個範例 Warning_Color.aspx 不就是作這件事嗎？

只好繼續作給讀者看看................

這個範例可以補充在書本「上集」第十九章

(1). 範例 Warning_Color_2.aspx

畫面上 DropDownList（已經設定AutoPostBack = true）

透過他來操作，進行圖片變化（後置程式碼，動態修改 Image控制項的 ImageUrl屬性）

(2). 範例 Warning_Color_3_Auto.aspx

加入了 Timer，做到每一秒變化圖片。（後置程式碼，動態修改 Image控制項的 ImageUrl屬性）

protected void Timer1_Tick(object sender, EventArgs e)

{

int i = System.DateTime.Now.Second;

String i_str = (i % 5).ToString(); //--計算後，傳回餘數。

switch (i_str)

{

case "1":

Image1.ImageUrl = "Chart_Images/1.jpg";

break;

case "2":

Image1.ImageUrl = "Chart_Images/2.jpg";

break;

case "3":

Image1.ImageUrl = "Chart_Images/3.jpg";

break;

case "4":

Image1.ImageUrl = "Chart_Images/4.jpg";

break;

default:

Image1.ImageUrl = "Chart_Images/5.jpg"; //--以上皆非。餘數為零。

break;

}

如果您把上一個範例（上一篇文章）的程式，放在 Timer_Tick事件裡面

不就可以「定時」更新資訊，並且用畫面（圖片）展示了嗎？

因為有了AJAX效果，圖片切換時，頁面不會閃爍（難怪大陸把AJAX稱為「非閃爍頁面」）

看起來像是圖片會動

上面範例的圖片下載：Chart_Images.rar

當然，您如果更厲害，可以寫 Silverlight or Flash

真正做到圖片以動態的方式展示（類似動態影片）

不過，為了這樣的功能，您要花多少時間去學習（請自己衡量）

我們用兩篇文章解釋了這個功能

只要「畫面上的圖片變化」、「程式裡面撈資料庫」都能解決，搭配AJAX就能做出實用的功能。

您手邊的書、ASP.NET入門書的內容，跟我的一樣實用嗎？

深入？精彩？簡單好學嗎？

AJAX (UpdatePanel) 有介紹到後置程式碼的撰寫嗎？

畫面上，出現「多個」UpdatePanel 的時候會互相干擾？該怎麼解決？

...........我用一招就可以處理各種情況，只要一招，處處可用！

我相信別本書都沒有！......因為（台灣）市面上的入門書，我隨時都有買來看、比對

您！該換一本書了！

該來上課了！ 該來上課了！ 該來上課了！ 該來上課了！

ASP.NET課程 / ASP.NET教學，請看

http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx

[台北] ASP.NET入門實戰 + ADO.NET進階【二合一】49 hr

ASP.NET影片、遠距教學，請看：

http://www.dotblogs.com.tw/mis2000lab/archive/2015/03/09/aspnet-online-learning-distance-education-2015.aspx

[遠距教學、教學影片] ASP.NET (Web Form) 六週課程上線了！

但書本上面的範例，一定有 VB / C#雙語法給您學習。請看我們的「售後服務」範圍（嚴格認定）。

防範SQL Injection / XSS攻擊，請看：ASP.NET安全寫作 資料來源 -- TWISC@NTUST網路應用安全知識庫

上課第一天的觀念 -- 網頁程式設計(ASP.NET / Web Form)與大家常見的Windows程式有何不同？

此為文章備份，原文請看我的網站：http://www.dotblogs.com.tw/mis2000lab/archive/2013/07/16/asp_net_first_day_concept20130716.aspx

上課第一天的觀念 -- 網頁程式設計(ASP.NET / Web Form)與大家常見的Windows程式有何不同？

上課第一天，我都會從這篇文章講起

請看：[ASP.NET]上課第一天的簡介 -- 網頁的基本觀念、ASP.NET與傳統網頁程式的異同

http://www.dotblogs.com.tw/mis2000lab/archive/2012/02/10/asp_net_first_day_concept.aspx

我要補充幾個範例，先解釋「網頁程式」與大家常見的Windows程式有何不同？

註解：Windows程式，例如：Word / Excel / Outlook / 小畫家....等等。

第一，傳統HTML網頁是離線的。

當我 09:00連上新聞網站，看見今天頭條新聞。

連線的時間，只有一陣子 --當Web Server把網頁的內容傳給我（瀏覽器）並且傳輸完畢以後，

「我的電腦（瀏覽器）」與「Web Server」就離線了（兩者之間 "並非"一直持續地資料傳輸，一直連線的狀態）。

如果 09:05（五分鐘後）哪個地區出現大地震？或是有了突發事件？

除非我重新載入（重整）瀏覽器畫面，不然的話，我永遠停留在 09:00下載的時空，只看到當時的新聞。

以上是傳統HTML網頁的生命週期，最簡單、最傳統的流程。

後續有很多技術改進，所以您（菜鳥）可能以為網頁是「即時更新」的、隨時都會（自動）更新資訊

這些都是後續的技術改良

除非您懂、您會做，不然的話，先以傳統網頁的標準，來看待、來處理。

第二，網頁不能控制你的（User的）電腦（為了安全）

很多人會問，為什麼我在Windows程式按下「列印」，印表機就會動作（以前DOS時代更是如此）。

我在網頁程式按下「列印」，只會蹦現一個「列印視窗」讓我選印表機以後才能列印？

（幸好，現在的Word / Excel流程也大致是如此了）

想想看：如果網頁程式可以直接控制你的電腦

那我寫一個搗蛋程式（網頁），你一連上我的網站，就直接列印一萬張「底色全黑」的文件，來整死你跟你的印表機，好嗎？

那麼我一連上網頁，不就中鏢？

後續有很多技術改進，所以您（菜鳥）可能以為網頁也做得到？

這些都是後續的技術改良

除非您懂、您會做，不然的話，先以傳統網頁的標準，來看待、來處理。

第三，另外一個案例，也是相同的情境。

菜鳥：「我的網頁程式（後端）想要列印 User的（前端）瀏覽器畫面、電腦畫面，

就好像 PrintScreen按鍵一樣。

這樣網頁出錯，我就能看見 User的（前端）錯誤畫面」

如果您說的可行，

那我寫一個網頁程式，也能偷看你的（User的）操作畫面囉？

也能控制你電腦的（User的）Web Camera監視你囉？

後續有很多技術改進，所以您（菜鳥）可能以為網頁也做得到？

這些都是後續的技術改良

除非您懂、您會做，不然的話，先以傳統網頁的標準，來看待、來處理。

=============================================================

傳統的網頁程式，多為「後端」的程式、在Web Server上面執行，

完成後，把結果（HTML碼）傳到你電腦上的瀏覽器。例如 ASP/ASP.NET、PHP、JSP...

另外一種網頁程式，如 JavaScript。則是在你電腦上的瀏覽器（前端）執行。

=== 如果這兩者也區分不清，很難繼續下去。 ============================

先瞭解「網頁」

瞭解他跟其他程式不同的地方，有哪些限制？

哪些做不到？哪些要拐一個彎才能作？哪些要其他技術輔助才行？

如果不能劃清界限，那就是白學了

（甚至.......沒有釐清以前，不應該開始學！）

我相信：這些限制遲早有一天，「一定」會被打破

因為技術的演進，是我們無法想像的

但是，在「現在」、在「當下」、在您剛剛入門、在「您第一次學習網頁程式」的時候

......不要想這麼遠，好嗎？

連坐都坐不好的時候，不要逞強站起來！

連站都站不好的時候，不要逞強學習走路！

不會走、就別跑！

ASP.NET課程 / ASP.NET教學，請看

http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx

[台北] ASP.NET入門實戰 + ADO.NET進階【二合一】49 hr

ASP.NET影片、遠距教學，請看：

http://www.dotblogs.com.tw/mis2000lab/archive/2015/03/09/aspnet-online-learning-distance-education-2015.aspx

[遠距教學、教學影片] ASP.NET (Web Form) 六週課程上線了！

一步一步來，既然要學新東西

適當的「放空」自己，很重要！

學習網頁程式時，適當地「放空」以前 Windows程式的操作與流程，很重要！

這樣的學習流程，很合理吧？

==========================================================================

[給初學者的話]不要練功練了三年，才發現自己必須「砍掉重練」！
http://www.dotblogs.com.tw/mis2000lab/archive/2012/03/15/game_over.aspx

[自我評量表] ASP.NET 我該上什麼課？入門、或是進階？.....
http://www.dotblogs.com.tw/mis2000lab/archive/2012/03/archive/2011/07/05/one_mile_width_one_feet_deepth.aspx

[回憶].....一些感慨 #1.....帶初學者入門
http://www.dotblogs.com.tw/mis2000lab/archive/2009/01/05/6633.aspx

[給初學者的話] 如何選電腦補習班？？....我的回憶（最昂貴的是「師資」）
http://www.dotblogs.com.tw/mis2000lab/archive/2009/02/13/7143.aspx

ASP.NET課程 / ASP.NET教學，請看

http://www.dotblogs.com.tw/mis2000lab/archive/2011/06/24/29807.aspx

[台北] ASP.NET入門實戰 + ADO.NET進階【二合一】49 hr

ASP.NET影片、遠距教學，請看：

http://www.dotblogs.com.tw/mis2000lab/archive/2015/03/09/aspnet-online-learning-distance-education-2015.aspx

[遠距教學、教學影片] ASP.NET (Web Form) 六週課程上線了！

但書本上面的範例，一定有 VB / C#雙語法給您學習。請看我們的「售後服務」範圍（嚴格認定）。

防範SQL Injection / XSS攻擊，請看：ASP.NET安全寫作 資料來源 -- TWISC@NTUST網路應用安全知識庫

訂閱：文章 (Atom)

2013年8月2日 星期五

2013年8月2日星期五