MIS2000 Lab. - ASP.NET專題實務 & WebForm +MVC 遠距教學: AJAX

顯示具有 AJAX 標籤的文章。顯示所有文章

2017年9月18日星期一

[轉貼] ASP.NET -- Web Service (.asmx) & JSON

ASP.NET Web Service (.asmx) 要傳回 JSON格式
大力推薦這一篇 Web Service in ASP.NET (Return JSON and XML)
文章裡面使用了 JavaScriptSerializer類別（命名空間： System.Web.Script.Serialization）

以前沒做過，但臨時被要求 ASP.NET Web Service 要傳回 JSON格式

找到網路上兩篇好文章，為自己做筆記。

如果您寫過 Web Service的話

直接看程式碼就會做了，淺顯易懂。只有很細微的修改：

大力推薦這一篇 Web Service in ASP.NET (Return JSON and XML):

http://www.c-sharpcorner.com/UploadFile/8ef97c/web-service-in-Asp-Net-part-4/

光是看這張圖片，就把重點學完了 (http://www.c-sharpcorner.com/UploadFile/8ef97c/web-service-in-Asp-Net-part-4/Images/GetEmployeeJSON.jpg)

點選圖片可連回原文出處....

文章裡面使用了 JavaScriptSerializer類別（命名空間： System.Web.Script.Serialization）

請看微軟MSDN說明：https://msdn.microsoft.com/zh-tw/library/system.web.script.serialization.javascriptserializer(v=vs.110).aspx

如果您的（Client端）要用 jQuery來接收

對方（Server端）的 Web Service ( 傳回 JSON格式)

另外也有幾篇好文章，也推薦給大家：

Create a JSON WebService in ASP.NET 2.0 with a jQuery Client

www.codeproject.com/Articles/45275/Create-a-JSON-WebService-in-ASP-NET-with-a-jQu

（這一篇是用 ASP.NET 2.0做的，但跟上面介紹的方法雷同。）

[C#] WebService 使用 JSON 格式傳遞筆記 + JQuery 測試

www.dotblogs.com.tw/junegoat/archive/2012/10/08/c-sharp-dot-net-web-service-by-json-test-with-jquery.aspx

ASP.NET WebService 回傳 json 格式

tsengpm.blogspot.tw/2012/02/aspnet-webservice-json.html

******************************************************************************************

如果語法轉換有問題，可以參閱

特別推薦超強力 C# & VB 語言轉換器！

http://codeconverter.sharpdevelop.net/SnippetConverter.aspx

******************************************************************************************

本網站以前的相關文章：

有些朋友在開啟網站或專案時，選用 .NET 4.5.x (VS 2013) or .NET 4.6 (VS 2015)

加入新項目時，找不到 Web Service (.asmx) ?????

您可以改為「開啟」 .NET 4.0 or 4.5 (VS 2012)的網站或專案，就能在其中加入「Web Service (.asmx)」

ASP.NET的 Web Service or WCF Service只是一個沒有「畫面」的 ASP.NET網頁...... 不要把它想得太難啦 :-)

Web Service入門 #1，透過VS 2005/2008/2010 撰寫一個Web Service

Web Service入門 #2，呼叫現成的Web Service 給我的程式來用

[入門範例] ASP.NET Web Service (asmx) 與 jQuery AJAX

[轉貼]jQuery與JSON的資料傳遞（網頁前段與後端的資料傳遞 - 序列化 Serialization） from kyleshen

分享，讓知識更加偉大

謝謝每一位樂於分享的前輩 :-)

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

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----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

Blog文章 "附的範例" 無法下載，請看這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

2016年12月21日星期三

無限下拉的資料呈現 (類似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