MIS2000 Lab. - ASP.NET專題實務 & WebForm +MVC 遠距教學: 2016/12/18

2016年12月21日星期三

一個範例搞清楚 "前端"與 "後端" -- 以jQuery UI搭配 ASP.NET控制項(Button)為例

透過jQuery UI的一個特效，來說明「前端」、「後端（ASP.NET控制項）」

jQuery UI的 Add Class特效 (本範例提供 YouTube教學影片)

這裡有一個簡單的 jQuery UI範例（效果），

但是，您務必親自動手做，並且親眼看見 & 觀察運作成果，才能學到東西

請看：https://jqueryui.com/addClass/

當您按下畫面上的 "HTML按鈕"

畫面上的文字會跑一段動畫。

如果您把這個 "HTML按鈕" 改成 ASP.NET控制項

會有什麼結果？

YouTube影片，請看：https://youtu.be/IlmD07Fi_cU

範例如下：

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

這是第一個錯誤範例，不會運作。

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

按下 ASP.NET的按鈕以後，畫面不會動？沒有特效？？

想想看？？？？？？？

其實，您按下這個ASP.NET的按鈕

畫面特效有運作

只是他還沒運作完成.......ASP.NET的 PostBack讓畫面閃了一下、回傳，又恢復到原狀

所以您看起來：這個特效不會動

想想其中的運作

您或許可以瞭解「前端技術」、「後端技術」的不同

前端 --- 例如： JavaScript / jQuery.....這些東西只要在「瀏覽器」上就可以運作， " 不 "需要經過 Web Server翻譯

後端 --- 例如：ASP.NET後置程式碼、PHP、JSP、ASP等等，這些程式碼「必須」需要經過 Web Server翻譯，才能把結果 ... 送給瀏覽器呈現

好的！我們來跑第二個錯誤範例

想想看，試著想想看...............

遇見錯誤，

試著.......解釋、瞭解這個錯誤

就能學到很多東西

如果您需要複製上面的程式碼，可以到此參考：

http://mis2000lab.pixnet.net/blog/post/34529751-%E4%B8%80%E5%80%8B%E7%AF%84%E4%BE%8B%E6%90%9E%E6%B8%85%E6%A5%9A%20%22%E5%89%8D%E7%AB%AF%22%E8%88%87%20%22%E5%BE%8C%E7%AB%AF%22%20--%20%E4%BB%A5jQuery%20UI%E6%90%AD%E9%85%8D%20ASP.NET%E6%8E%A7%E5%88%B6%E9%A0%85(Button)%E7%82%BA%E4%BE%8B

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

寫信給我-- mis2000lab (at) yahoo.com.台灣或是 school (at) mis2000lab.net

................ facebook社團 https://www.facebook.com/mis2000lab ......................

................ Google+ https://plus.google.com/100202398389206570368/posts ........

................ YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ

)沿用上面 jQuery UI的，一模一樣。https://jqueryui.com/addClass/

文字變化區。Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.

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

按下 ASP.NET的按鈕以後，畫面不會動？沒有特效？？

想想看？？？？？？？

其實，您按下這個ASP.NET的按鈕

畫面特效有運作

只是他還沒運作完成.......ASP.NET的 PostBack讓畫面閃了一下、回傳，又恢復到原狀

所以您看起來：這個特效不會動

想想其中的運作

您或許可以瞭解「前端技術」、「後端技術」的不同

前端 --- 例如： JavaScript / jQuery.....這些東西只要在「瀏覽器」上就可以運作， " 不 "需要經過 Web Server翻譯

後端 --- 例如：ASP.NET後置程式碼、PHP、JSP、ASP等等，這些程式碼「必須」需要經過 Web Server翻譯，才能把結果 ... 送給瀏覽器呈現

好的！我們來跑第二個錯誤範例

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

HTML表頭()沿用上面 jQuery UI的，一模一樣。https://jqueryui.com/addClass/

想想看，試著想想看...............

遇見錯誤，

試著.......解釋、瞭解這個錯誤

就能學到很多東西

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

寫信給我-- mis2000lab (at) yahoo.com.台灣或是 school (at) mis2000lab.net

................ facebook社團 https://www.facebook.com/mis2000lab ......................

................ Google+ https://plus.google.com/100202398389206570368/posts ........

................ YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ

-->

無限下拉的資料呈現 (類似FaceBook，分頁效果)#1 - jQuery + Web Service + Repeater控制項

類似臉書（FaceBook），您一直向下閱讀資訊。到了瀏覽器底部又會長出（呈現出）新的數據。

這也是一種「分頁」的技巧。參考網路上的範例，我改用SQL 2012的 OFFSET...FETCH 來做（本文提供範例下載 & Youtube教學影片）

原始範例來源：
http://www.aspsnippets.com/Articles/Implement-Infinite-Scroll-Endless-Scroll-in-ASPNet-using-jQuery-AJAX.aspx

您可以先到原網站看看 Demo效果。VB & C#範例都有。

原作者使用 SQL 2005起的「資料分頁 - Row_Number」來做，

搭配 Repeater控制項 + Web Service + jQuery三者，算是一個整合範例。

簡單地說，流程如下：

(1). 第一次執行時，展示十筆記錄。

(2). 當您拉到網頁下方時，觸發 jQuery效果，以AJAX的方式跟Web Service查詢接下來的「後十筆」記錄，並在畫面上繪製表格。

$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
// 您的程式......
}
});

(3). 如此周而復始，就好像臉書（FaceBook）一樣，您一直向下閱讀，資料源源不絕，沒完沒了。

這些技巧以前都有分享過，請看：

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

Web Service -- https://dotblogs.com.tw/mis2000lab/archive/2008/09/26/webservice_1.aspx
資料分頁 -- 以下兩個範例都有提供 Youtube教學影片

SQL 2005的 Row_Number -- https://dotblogs.com.tw/mis2000lab/archive/2010/11/30/datareader_paging_row_number.aspx

SQL 2012的 Offset...Fetch -- https://dotblogs.com.tw/mis2000lab/archive/2014/07/17/page_sql2012_fetch_offset_20140717.aspx

jQuery + Web Service 互動範例 -- https://dotblogs.com.tw/mis2000lab/archive/2015/05/19/jquery_ajax_web_service.aspx

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

YouTuber教學影片 https://youtu.be/h5Zof9ZZRP4

我修改成 SQL 2012的資料分頁（ OFFSET...FETCH）作法，原理差不多。

速度比起 ROW_Number差不多，但比較起來，新的寫法比 ROW_Number省資源

-----------------------------------------------------------------------------------------------------

首先，使用 Repeater控制項。

這東西比較單純，也不會產生過多的怪標籤。有利於後續搭配 jQuery大量複製 HTML表格（
）

畫面的部分，我沒有修正，您可以參閱原範例。

我主要修正後置程式碼 C# 的部分，不像原範例還需要一段SQL Server預存程序來做。

using System.Data;
using System.Data.SqlClient;
using System.Web.Services;  //*** Web Service 會用到 ***
using System.Web.Configuration;


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)  // 第一次執行
        {   // 自己寫的副程式，從第一頁開始。
            Repeater1.DataSource = MIS2000Lab_GetPageData(1);   
            Repeater1.DataBind();
        }
    }


    // ***** 分頁。使用SQL指令進行分頁 *****
    public static DataSet MIS2000Lab_GetPageData(int currentPage)
    {
        SqlConnection Conn = new SqlConnection("資料庫的連結字串");

        String SqlStr = "Select * from Customers ORDER BY [CustomerID] ASC ";
        SqlStr += " OFFSET @A ROWS FETCH NEXT 10 ROWS ONLY";
        // 為了配合前端的jQeury，這裡的第一頁不可以是"零"，需是一。程式改成 ((currentPage-1) * 10)
        //==SQL 2012 指令的 Offset...Fetch。參考資料： http://sharedderrick.blogspot.tw/2012/06/t-sql-offset-fetch.html  

        SqlDataAdapter myAdapter = new SqlDataAdapter(SqlStr, Conn);
        myAdapter.SelectCommand.Parameters.AddWithValue("@A", ((currentPage - 1) * 10));       
        DataSet ds = new DataSet();
        myAdapter.Fill(ds, "Customers");

        //-- 用來計算分頁的「總頁數」 ---      
        SqlCommand cmd = new SqlCommand("select Count(CustomerID) from Customers", Conn);
        Conn.Open();           
        int myTotalCount = (int)cmd.ExecuteScalar();

        DataTable dt = new DataTable("PageCount");
        dt.Columns.Add("PageCount");
        dt.Rows.Add();
        dt.Rows[0][0] = myTotalCount;
        ds.Tables.Add(dt);

        if (Conn.State == ConnectionState.Open)  {
            Conn.Close();
            Conn.Dispose();
        }

        return ds;
    }

    
    [WebMethod]
    public static string GetCustomers(int pageIndex)
    {
        return MIS2000Lab_GetPageData(pageIndex).GetXml();
    }

因為要搭配前端的 jQuery，所以上述程式的「第一頁」，不寫成「0」而改成「1」。

您要修改 "前端" HTML畫面時，要注意幾點：

抱歉，因為程式碼貼上後，排版錯亂，只好貼圖！

或是來這裡，複製程式碼 -- http://mis2000lab.pixnet.net/blog/post/34529733-%E7%84%A1%E9%99%90%E4%B8%8B%E6%8B%89%E7%9A%84%E8%B3%87%E6%96%99%E5%91%88%E7%8F%BE%20(%E9%A1%9E%E4%BC%BCFaceBook%EF%BC%8C%E5%88%86%E9%A0%81%E6%95%88%E6%9E%9C)%20-%20jQuery%20+%20Web%20Service%20+%20Repeater%E6%8E%A7%E5%88%B6%E9%A0%85

分享，讓知識更加偉大 :-)

本範例請由此下載 https://onedrive.live.com/?id=6F7F668080F24B20%21678&cid=6F7F668080F24B20

檔名：

[CS]無限下拉的Repeater_jQeury_WebService.rar

[VB]無限下拉的Repeater_jQeury_WebService.rar

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

寫信給我-- mis2000lab (at) yahoo.com.台灣或是 school (at) mis2000lab.net

................ facebook社團 https://www.facebook.com/mis2000lab ......................

................ Google+ https://plus.google.com/100202398389206570368/posts ........

................ YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ

下一篇文章： http://mis2000lab.blogspot.tw/2016/12/facebook-2.html

無限下拉的資料呈現 (類似FaceBook，分頁效果) #2 - 圖片版的首頁

http://mis2000lab.blogspot.tw/2016/12/facebook-2.html

無限下拉的資料呈現 (類似FaceBook，分頁效果) #2 - 圖片版的首頁

新瓶裝舊酒（jQuery + Web Service）類似臉書（FaceBook），您一直向下閱讀資訊。到了瀏覽器底部又會長出（呈現出）新的數據。

這也是一種「分頁」的技巧。這次改用「圖片」呈現。

首頁上，無窮無盡的圖片一直向下拉（向下閱覽）

請您先看上一篇文章：

無限下拉的資料呈現（文字版）

http://mis2000lab.blogspot.tw/2016/12/facebook1-jquery-web-service-repeater.html

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

有讀者來信詢問這個網頁的效果
http://www.andenhud.com.tw/products/sale_products_list.php?cid=184
（若您上班時點閱，請注意！上面是女性內衣的購物網站）

或是手錶的購物網站 https://tw.buy.yahoo.com/activity/onsale?actid=42332&co_servername=yahooC160524_440_1a101a

您不斷向下拉、向下閱讀
產品 "圖片"會不斷跑出來，類似臉書（FaceBook）無限下拉的資料呈現

我不知道他是怎麼做的？

但如果您想要有類似的效果（特效）

只要把之前的範例（有 Youtube教學影片 & 範例下載）從原本的 "文字"呈現，改成 "圖片"呈現而已。

YouTuber教學影片 https://youtu.be/h5Zof9ZZRP4

範例與文章說明：無限下拉的資料呈現 (類似FaceBook，分頁效果) - jQuery + Web Service + Repeater控制項
https://dotblogs.com.tw/mis2000lab/2016/02/23/webform_infinite_scroll_endless_scroll_jqeury_webservice

原本的範例（上一篇文章），您不斷向下拉，就會有新文字、新文章出現
現在改成「您不斷向下拉，出現的是 "圖片"」罷了

您可以搭配書本的範例資料表 FileUpload_DB
稍微修改上面文章的範例，就能搞定。

抱歉！因為程式碼貼上後，版面錯亂，所以貼圖展示。

若您要察看程式碼，也可以到此參考 -- http://mis2000lab.pixnet.net/blog/post/34529725-%E7%84%A1%E9%99%90%E4%B8%8B%E6%8B%89%E7%9A%84%E8%B3%87%E6%96%99%E5%91%88%E7%8F%BE%20(%E9%A1%9E%E4%BC%BCFaceBook%EF%BC%8C%E5%88%86%E9%A0%81%E6%95%88%E6%9E%9C)%20#2%20-%20%E5%9C%96%E7%89%87%E7%89%88%E7%9A%84%E9%A6%96%E9%A0%81

..........（後續省略）......

3. 後置程式碼，僅修改資料表名稱、SQL指令即可。

本範例不提供程式下載了

原始範例來源：http://www.aspsnippets.com/Articles/Implement-Infinite-Scroll-Endless-Scroll-in-ASPNet-using-jQuery-AJAX.aspx

您可以先到原網站看看 Demo效果。VB & C#範例都有。

原作者使用 SQL 2005起的「資料分頁 - Row_Number」來做，搭配 Repeater控制項 + Web Service + jQuery三者，算是一個整合範例。

我改用SQL 2012的 OFFSET...FETCH 來做分頁

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

寫信給我-- mis2000lab (at) yahoo.com.台灣或是 school (at) mis2000lab.net

................ facebook社團 https://www.facebook.com/mis2000lab ......................

................ Google+ https://plus.google.com/100202398389206570368/posts ........

................ YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ

DataAdapter的 .Fill()方法，同時執行多個查詢

MSDN原廠有說明：「當指定的查詢傳回 "多項結果"時，會將結果集放置於 "個別"資料表中。」

我們做一個範例，寫點程式，看到成果就懂了

DbDataAdapter.Fill 方法 (DataSet, String)

https://msdn.microsoft.com/zh-tw/library/y4b211hz(v=vs.110).aspx

原廠的說明裡面，提到兩件事：

第一，使用DataAdapter為何不需要自己寫程式開啟DB連線？關閉連線？

請看MSDN原廠說明 --

Fill 方法使用 SELECT 陳述式從資料來源擷取資料。與 SELECT 命令相關聯的 IDbConnection 物件必須是有效的，但不需要是開啟的。

如果 IDbConnection 在呼叫 Fill 之前已關閉，它就會再次開啟以擷取資料，然後關閉。如果在呼叫 Fill 之前開啟連接，它會保持開啟。

您可以看一下以前的文章，我做了一個實驗：

[ADO.NET]DataSet與DataAdapter，為何不需要自己寫程式去開啟資料庫連線與關閉之？
https://dotblogs.com.tw/mis2000lab/2009/11/26/dataset_dataadapter_connection_open

第二，如果「同時」查詢多個資料表？怎麼辦？

MSDN原廠也有說明喔，照著說明來寫程式就好了 --

當指定的查詢傳回 "多項結果"時，會將結果集放置於 "個別"資料表 (DataTable)中。將整數值附加到指定的資料表名稱 (例如，"Table"、"Table1"、"Table2" 等等)，即可命名額外的結果集。

SqlConnection Conn = new SqlConnection("資料庫的連結字串");
SqlDataAdapter myAdapter = new SqlDataAdapter("Select * From test ; Select * from test_talk", Conn);

DataSet ds = new DataSet();

//// == 寫法一，正常運作 =============================
////----(2). 執行SQL指令（Select陳述句）----
//myAdapter.Fill(ds); //這時候執行SQL指令。取出資料，放進 DataSet。

////----(3). 自由發揮。由 GridView來呈現資料。----
//GridView1.DataSource = ds.Tables[0];
//GridView1.DataBind();

//GridView2.DataSource = ds.Tables[1];
//GridView2.DataBind();

// == 寫法二，正常運作 =============================
myAdapter.Fill(ds, "test"); //這時候執行SQL指令。取出資料，放進 DataSet。
myAdapter.Fill(ds, "test_talk"); //這時候執行SQL指令。取出資料，放進 DataSet。

GridView1.DataSource = ds.Tables["test"];
GridView1.DataBind();

GridView2.DataSource = ds.Tables[ "test_talk"];
GridView2.DataBind();

我也不知道什麼時候，我開始「看得懂」 MSDN上的中文說明（我常說這些是火星中文，每一個字都看得懂，但整句話看不懂）

而且可以稍微把這些說明「轉成」程式碼

不用擔心，慢慢累積經驗，會越做越順的

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

寫信給我-- mis2000lab (at) yahoo.com.台灣或是 school (at) mis2000lab.net

................ facebook社團 https://www.facebook.com/mis2000lab ......................

................ Google+ https://plus.google.com/100202398389206570368/posts ........

................ YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ

訂閱：文章 (Atom)

2016年12月21日 星期三

一個範例搞清楚 "前端"與 "後端" -- 以jQuery UI搭配 ASP.NET控制項(Button)為例

無限下拉的資料呈現 (類似FaceBook，分頁效果)#1 - jQuery + Web Service + Repeater控制項

無限下拉的資料呈現 (類似FaceBook，分頁效果) #2 - 圖片版的首頁

無限下拉的資料呈現 (類似FaceBook，分頁效果) #2 - 圖片版的首頁

DataAdapter的 .Fill()方法，同時執行多個查詢

2016年12月21日星期三