jQuery教學(4) - jQuery 使用 ASP.NET Web Service 示範

上次講解jQuery如何對一些Web Service / API進行deserialize Json , 今次我會承接下去示範如何用jQuery去呼叫ASP.NET 3.5 Web Service，並利用jQuery UI做出很正的UI。其實除了官方的jQuery UI，還有很多不同的jQuery Plugin都是比原本ASP.NET的Web Control更漂亮。而且由於ASP.NET MVC沒有Server Control，所以學習使用一些JS Framework的UI以應付未來的Web開發是必須的。

Web Service方面是使用LINQ-to-SQL，並把DataTable Serialize後回傳給jQuery。
Database方面則使用AdventureWorks Sample DB。
下載：AdventureWorks Sample DB
下載：jQuery UI
下載：範例的Source Code

運行時的畫面：


程式碼方面其實不複雜，我還是直接貼上Source Code，註解一下比較重要的部份。

Web Service部份：

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class getDataTable : System.Web.Services.WebService {
    [WebMethod]
    public string getProducts()
    {
        DataTable dt = new DataTable();
        using (SqlConnection MyConnection = new SqlConnection("Data Source=LocalHostSQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=SSPI;"))
        {
            MyConnection.Open();
            string MySelect = "SELECT TOP 20 [ProductModel] , [Description] FROM Production.vProductAndDescription WHERE CultureID='en' GROUP BY [ProductModel] , [Description] ";
            SqlCommand MyCommand = new SqlCommand(MySelect, MyConnection);
            using (SqlDataAdapter da = new SqlDataAdapter(MyCommand))
            { da.Fill(dt); }
        }
        return GetJson(dt);
    }

    public string GetJson(DataTable dt)
    {
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary<string, object>();
            foreach (DataColumn col in dt.Columns)
            { 
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }
        return serializer.Serialize(rows);
    }

}

頁面的jQuery 使用Ajax CallBack 部份：

    <script type="text/javascript">

        // Init jQuery UI
        $(function init() {
            // Initialize Accordion
            $("#accordion").accordion({ header: "h3" });
            // Initialize Slider
            $('#slider').slider({ min: 1, max: 20,
                slide: function (event, ui) { $('#limit').html(ui.value); }
            });
        });

        $(document).ready(function () {
            // jQuery Ajax CallBack
            $("#lnkGetProducts").click(function () {
                // Setup the Options for jQuery Ajax
                var Options = {
                    type: "POST",
                    url: "getDataTable.asmx/getProducts", // invoke web service
                    data: "{dummyKey: '" + "dummyVal" + "'}", // dummyKey and dummyVal can be remove.
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response != "") {
                            var s = '<div id="accordion">';
                            var limit = $("#limit").html(); // the slider value to limit result output.
                            $.each(Sys.Serialization.JavaScriptSerializer.deserialize(response.d), function (key, item) {
                                s += '<div>';
                                s += '<h3><a href="#">' + item.ProductModel + '</a></h3>';
                                s += '<div>' + item.Description + '</div>';
                                s += '</div>';
                                if (key == limit - 1) return false; // if reach limit , return and exit.
                            });
                            s += '</div>';
                            $('#container').html(s); // fill s into container div
                            init(); // Initialize jQuery UI again when the DOM is changed.
                        }
                    }
                };
                $.ajax(Options); // Execute and CallBack
            });

        });
    </script>

就整份文件來說，比較難理解的或者是Javascipt中Line 27的"response.d"，或者你會想問"d"這個member是什麼呢?
其實有"d"與否是關係到ASP.NET 2.0 和3.5之間的Web Service回傳的DataType問題。
將會在下一篇文章講解。
如果你是ASP.NET 2.0的話，就要刪除".d"，相反是3.5的話就要保留。要不然會發生Object 和 String的DataType轉型錯誤。