利用PageMethods、JQuery AJAX、WebService接收DataTable型別的資料－忙裡偷閒的部落格

有時候在前端頁面中想要到資料庫中查詢少許的資料，憑此資料寫相對應的判斷式。如果以postback方式回後端，會將整個頁面的資料(含ViewState、ControlState)一併傳回後端，再次歷經Page的生命週期，對系統來說，無一不是種負擔。即使是以UpdatePanel方式回後端，也同樣會巡覽Page一次，與PostBack不同之處，只是使用UpdatePanel的方式會將部分資料重新Render後回傳回前端(有包UpdatePanel的區塊)。其實，可以利用ScriptManager的PageMethods來實現ajax。網路上已有許多教學文章可供參考學習。如以下連結:

http://www.dotblogs.com.tw/pbnttttt/archive/2009/01/20/6897.aspx
http://www.dotblogs.com.tw/petedotnet/archive/2011/03/22/aspdotnetajax_calling_pagemethods.aspx
http://www.dotblogs.com.tw/swtnwr/archive/2008/03/16/1571.aspx

現紀錄的筆記是關於後端的靜態方法欲以DataTable型別回傳時，前端的Javascript是否能接收到呢?如何接收呢?答案是:可行的!
Step 1:
在專案中匯入Microsoft.Web.Preview.dll。匯入前須安裝ASP.NET 2.0 AJAX Futures December CTP，安裝完後在C:\Program Files\Microsoft ASP.NET\ ASP.NET 2.0 AJAX Futures January CTP\ v.1.0.61025目錄夾可找到Microsoft.Web.Preview.dll。

Step 2:
在web.config中加入延伸模組的組態區段，Microsoft.Web.Preview.dll提供了三種轉換器:DataSet、DataRow、DataTable。換而言之，我們能夠在後端回傳這三種型別的資料回前端頁面。

 <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization>
          <converters>
            <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview"/>
            <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview"/>
            <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview"/>
          </converters>
        </jsonSerialization>
      </webServices>
    </scripting>
  </system.web.extensions>

Step 3:
在後端寫一支回傳型別為DataTable的靜態方法 :

[System.Web.Services.WebMethod]
public static DataTable CallPageMethods(string id)
    {
        SqlConnection _connection = new SqlConnection(conn);
        _connection.Open();
        SqlCommand _command = new SqlCommand(@"select fUserId,fName,fPhone from tCustomer 
                                               where fUserid ='" + id + "' ", _connection);
        SqlDataAdapter adapter = new SqlDataAdapter(_command);
        DataTable dt = new DataTable();
        adapter.Fill(dt);
        _connection.Close();
        return dt;
    }
Step4:

(1)PageMethods寫法:

前端寫一支function呼叫後端的CallPageMethods方法
<script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script  type="text/javascript">
    $(document).ready(function () {
        $('#btn2').click(function () {
            ClientPageMethod();
        })
        function ClientPageMethod() {
            var id = "1";//利用客戶id找客戶姓名、電話
            PageMethods.CallPageMethods(id,
            function (result) {
                var name = result.rows[0].fName;
                var phone = result.rows[0].fPhone;
                $('#mydiv').text("姓名:" + name + ",電話:" + phone);
 
            }, function (err) {
                alert(err.get_message());
            })
        }
    })
</script>

(2)JQuery ajax寫法:
<script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="scripts/json2.js" type="text/javascript"></script>
<script  type="text/javascript">
    $(document).ready(function () {
        $('#btn2').click(function () {
            var id = "1"; //利用客戶id找客戶姓名、電話
            $.ajax({
                url: "LifeCycleTest.aspx/CallPageMethods",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: "{'id':'" + id + "'}",
                success: function (result) {
                    var table = result.d;
                    var name = table.rows[0].fName;
                    var phone = table.rows[0].fPhone;
                    $('#mydiv').text("姓名:" + name + ",電話:" + phone);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    //處理Exception訊息
                    var jsonData = JSON.parse(xhr.responseText);
                    $.each(jsonData, function (key, value) {
                        //接收Exception的訊息文字
                        if (key == 'Message') {
                            alert(value);
                        }
                    });
 
                }
            })
        })
    })
</script>
 補充 : 呼叫WebService(.asmx)方法
 
基本上與PageMethods呼叫的方法大同小異，但要在ScriptManager中加入asmx檔案的參考 :
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
    <Services>
    <asp:ServiceReference Path="~/WebService.asmx" />
    </Services>

</asp:ScriptManager>

後端的靜態方法改為非靜態，同樣宣告成WebMethod屬性:[WebMethod]。

前端寫法如下:

function ClientPageMethod() {
            var id = "1";//利用客戶id找客戶姓名、電話
            WebService.CallPageMethods(id,
            function (result) {
                var name = result.rows[0].fName;
                var phone = result.rows[0].fPhone;
                $('#mydiv').text("姓名:" + name + ",電話:" + phone);
 
            }, function (err, userContext, methodName) {
                alert(err.get_message());
            })
        }