Javascript調用C#后台方法及JSon解析

如何使用Ajax 調用C# 后台方法。

在通常的WebForm中，我們通常使用“一般處理程序”來響應Ajax請求。今天我們嘗試使用Ajax調用.cs文件的方法。

1、后台（.cs）測試方法

 

       [WebMethod]
        public static string DisplayImagesInfo()
        {
             List<ImageQueueInfo> imagelist = new List<ImageQueueInfo>
            {
                new ImageQueueInfo{imageName="test1",imageUrl="http://images.aiyingshi.com/ProductPicPath/XL/170498.jpg"},
                new ImageQueueInfo{imageName="test2",imageUrl="http://images.aiyingshi.com/ProductPicPath/XL/170498.jpg"},
                new ImageQueueInfo{imageName="test3",imageUrl="http://images.aiyingshi.com/ProductPicPath/XL/170498.jpg"},
                new ImageQueueInfo{imageName="test4",imageUrl="http://images.aiyingshi.com/ProductPicPath/XL/170498.jpg"},
                new ImageQueueInfo{imageName="test5",imageUrl="http://images.aiyingshi.com/ProductPicPath/XL/170498.jpg"},
                new ImageQueueInfo{imageName="test6",imageUrl="http://images.aiyingshi.com/ProductPicPath/XL/170498.jpg"},
                new ImageQueueInfo{imageName="test7",imageUrl="http://images.aiyingshi.com/ProductPicPath/XL/170498.jpg"},
                new ImageQueueInfo{imageName="test8",imageUrl="http://images.aiyingshi.com/ProductPicPath/XL/170498.jpg"},
            };


            JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
            string imageinfoStr = jsonSerializer.Serialize(imagelist);

            return imageinfoStr;


        }

 Javascript調用后台方法需要注意幾點：

1. 需要引入命名空間：

   using System.Web.Services;

   這樣才能使用[WebMethod]特性。

   using System.Web.Script.Serialization;

   引入微軟序列化命名空間。

2. 必須將被調用的方法聲明成Public的靜態方法。

2、前台調用（javascript）代碼：

<script type="text/javascript" src="Content/JS/jquery-1.8.2.js"></script>

    <%--<script type="text/javascript" src="Content/JS/jquery-1.8.2-vsdoc.js"></script>--%>

    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: 'Default.aspx/DisplayImagesInfo',
                dataType: 'json',
                success: function(data) {
 
                  var dataObj = eval("(" + data.d + ")");
                  
                  $.each(dataObj, function(i, item) {
                        $("#imageslist").append("<li><img alt=\"" + item.imageName + "\" src=\"" + item.imageUrl + "\"/></li>");
                    })

                },
                error: function() {
                    alert("error!");
                }



            });
        });
    </script>

1. type:需要使用POST方法。
2. url：地址/方法簽名

接下來是今天的重點：遇到了點Json解析的問題，備忘一下。

  微軟框架默認返回一個  { "d": "后台返回的數據" } 的數據。接下來我們怎么解析它？

 

我們怎么拿到imagename和imageurl的值呢？

我們將返回的data.d。重新組裝成json數組

var dataObj = eval("(" + data.d + ")");

 

【參考】

1. http://www.cnblogs.com/xiaowu/archive/2011/09/07/2169283.html
2. http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html
3. http://kb.cnblogs.com/page/92940/