使用ASP.NET AJAX非同步呼叫Web Service和頁面中的類方法（7）：伺服器端和用戶端資料類型的自動轉換：泛型集合類型

本文來自《ASP.NET AJAX程式設計 第II卷：用戶端Microsoft AJAX Library相關》的第三章《非同步呼叫Web Service和頁面中的類方法》，請同時參考本章的其他文章。

3.7.4 泛型集合類型

.NET Framework 2.0中新引入的泛型集合類型不但能夠大大提高程式的執行效率，也能讓IDE在編譯前就能瞭解更多的類型資訊，進而在我們的開發過程中提供更完善的輔助資訊。因此，作為“傳統”集合的替代品，泛型集合類型正被越來越廣泛地使用於各種.NET應用程式中。

ASP.NET AJAX非同步通訊層也能夠為常用的泛型集合類型自動產生相應的用戶端JavaScript類型，讓我們可以方便地在用戶端和伺服器端傳遞集合類型的資料。

對於泛型集合類型中的類型T，若為簡單類型，那麼ASP.NET AJAX非同步通訊層將自動為我們產生用戶端JavaScript類型。例如對於如下返回List<int>類型的Web Service方法：

[WebMethod]

public List<int> GetGenericIntList()

{

    List<int> intList = new List<int>();

    for (int i = 0; i < 10; ++i)

    {

        intList.Add(i * 10);

    }

    return intList;

}

若是為該Web Service添加了[ScriptService]屬性，且用ScriptManager控制項將其引入到了頁面中的話，那麼在用戶端即可直接調用該Web Service方法。ASP.NET AJAX非同步通訊層將自動把返回的List<int>類型轉換為JavaScript中的數組，圖3-22顯示了傳回值在Visual Studio調試器中顯示出的結構。

圖3-22 伺服器端List<int>類型在用戶端的結構

考慮如下接收一個List<int>參數的Web Service方法：

[WebMethod]

public void SendGenericIntList(List<int> intList)

{

    // ......

}

我們即可用如下用戶端代碼將某個JavaScript數組傳遞到該SendGenericIntList()方法中，注意SendGenericIntList()方法所在的Web Service類為PeopleManagementService：

var intList = new Array();

for (var i = 0 ; i < 10; ++i) {

    intList.push(i);

}

PeopleManagementService.SendGenericIntList(intList);

ASP.NET AJAX非同步通訊層將自動把這個JavaScript數群組轉換為伺服器端的List<int>類型，在程式運行中，SendGenericIntList()方法根本不會有所察覺。圖3-23顯示了傳入參數在Visual Studio調試器中顯示出的結構。

圖3-23 用戶端JavaScript數組可被自動轉換為伺服器端List<int>類型

而若是泛型集合類型中的類型T為複雜類型，那麼我們則需要為Web Service類添加[GenerateScriptType(typeof([TypeName]))]屬性，其中[TypeName]表示該複雜類型的名稱。我們還是以前面的Employee類為例，考慮下面這個返回一個List<Employee>類型的Web Service方法：

[WebMethod]

public List<Employee> GetGenericEmployeeList()

{

    List<Employee> employeeList = new List<Employee>();

    for (int i = 0; i < 10; ++i)

    {

        Employee em = new Employee(

            i,

            string.Format("name {0}", i),

            string.Format("name{0}@some.com", i),

            5000

        );

        employeeList.Add(em);

    }

    return employeeList;

}

用戶端調用該Web Service方法的代理之後，ASP.NET AJAX非同步通訊層將自動把返回的List<Employee>類型轉換為JavaScript中的數組，圖3-24顯示了傳回值在Visual Studio調試器中顯示出的結構。

圖3-24 伺服器端List<Employee>類型在用戶端的結構

考慮如下接收一個List<Employee>參數的Web Service方法：

[WebMethod]

public void SendGenericEmployeeList(List<Employee> employeeList)

{

    // ......

}

我們即可用如下用戶端代碼將某個包含用戶端Employee對象的JavaScript數組傳遞到該SendGenericEmployeeList()方法中：

var employeeList = new Array();

for (var i = 0; i < 10; ++i) {

    var em = new Employee();

    em.Id = i;

    em.Name = "name " + i;

    em.Email = "name" + i + "@some.com";

    em.Salary = 9000;

    employeeList.push(em);

}

PeopleManagementService.SendGenericEmployeeList(employeeList);

ASP.NET AJAX非同步通訊層將自動把這個JavaScript數群組轉換為伺服器端的List<Employee>類型，SendGenericEmployeeList()方法同樣不會有所察覺。圖3-25顯示了傳入參數在Visual Studio調試器中顯示出的結構。

圖3-25 用戶端包含Employee對象的JavaScript數組可被自動轉換為伺服器端List<Employee>類型

對於Dictionary<TKey, TValue>類型，ASP.NET AJAX非同步通訊層也可以將其自動轉換為用戶端的相應類型——當然前提是如果TKey或TValue屬於複雜類型，我們仍需要為Web Service類添加[GenerateScriptType(typeof([TypeName]))]屬性，其中[TypeName]表示TKey或TValue複雜類型的名稱。

我們還是以前面的Employee類為例，考慮如下伺服器端Web Service方法：

[WebMethod]

public Dictionary<string, Employee> GetGenericEmployeeDictionary()

{

    Dictionary<string, Employee> employeeDict = new Dictionary<string, Employee>();

    for (int i = 0; i < 10; ++i)

    {

        Employee em = new Employee(

            i,

            string.Format("name {0}", i),

            string.Format("name{0}@some.com", i),

            5000

        );

        employeeDict[em.Id.ToString()] = em;

    }

    return employeeDict;

}

若是為該Web Service添加了[ScriptService]屬性，且用ScriptManager控制項將其引入到了頁面中的話，那麼在用戶端調用該Web Service方法的代理即可得到Dictionary<string, Employee>相應的用戶端JavaScript對象。用戶端調用該Web Service方法的代碼如下：

function pageLoad() {

    PeopleManagementService.GetGenericEmployeeDictionary(onSucceeded);

}

onSucceeded()回呼函數的代碼如下，將GetGenericEmployeeDictionary()方法的傳回值顯示成一個表格，注意其中的for (var key in result)語句，用來遍曆該用戶端Dictionary中的鍵/值對：

function onSucceeded(result) {

    var tableBuilder = new Sys.StringBuilder("<table border=1>");

    // 建立表格標題列

    tableBuilder.append(

        "<tr><td>Id</td><td>Name</td><td>Email</td><td>Salary</td></tr>"

    );

    for (var key in result) {

        var employee = result[key];

        // 建立表格內容行

        var rowString = 

            String.format(

                "<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td></tr>",

                employee.Id,

                employee.Name,

                employee.Email,

                employee.Salary

            );

        tableBuilder.append(rowString);

    }

    tableBuilder.append("</table>");

    $get("result").innerHTML = tableBuilder.toString();

}

運行本程式，我們將看到3-26所示的介面。

圖3-26 取得伺服器端Dictionary<string, Employee>類型的資料，並顯示成表格