[ASP.NET]利用Jquery來實作Ajax—使用aspx篇

好啦，我知道這關鍵字「Jquery、Ajax、aspx」丟到Google去一定跑出無數的文章
但偏偏這功能又很常用，現在即使是WebForm只要使用Postback好像就Low掉的感覺
所以一直以來都很想寫篇文章自己記錄一下用法。
一般用法
新增AjaxStart.html、AjaxHandle.aspx兩支程式
AjaxStart.html用來實作向Server端發送Request
AjaxHandle.aspx用來接收Request並回傳結果

AjaxStart.html內容

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn_ajax').click(function () {
                $('#loading').show(); //開始Ajax，顯示讀取中圖片
                $.ajax({
                    type: 'POST',
                    url: 'AjaxHandle.aspx',
                    data: 'id=1', //發送參數
                    success: function (data) {
                        console.log(data); //輸出結果
                        $('#div_result').html(data); //將結果呈現在Div裡
                        $('#loading').hide(); //結束Ajax..關閉讀取中圖片
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        $("body").append(xhr.status);
                        $("body").append(xhr.responseText);
                        alert("Ajax發生錯誤!!");
                    }  
                });
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn_ajax" value="StartAjax" />
<span id="loading" style="display:none;">Loading....</span>
<div id="div_result" >
</div>
</body>
</html>

AjaxHandle.aspx.cs內容

在新增aspx後，第一步要先將預設產出的Html刪除掉，

以免Ajax回去後，也將這些Html一併回傳

我們可以在Page_Load裡撰寫Code，接收前端給我們參數，再做資料的處理

protected void Page_Load(object sender, EventArgs e)
{
    string ID = Request.Form["ID"]; //接受傳入的參數
    Response.Write("Hello ID Value : " + ID);
}

再將刪除的區塊改成回傳一個table標籤，當然實際情況會依Request傳入的參數顯示不同資訊

前端接收到可把它Append到一個Div標籤裡，即可完成Ajax動作

回傳Json資料的用法

有時我們會需要Server端回傳的是一個Json字串，再由前端去做資料的處理

可進行以下改寫：

AjaxHandel.aspx.cs內容

protected void Page_Load(object sender, EventArgs e)
{
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    List<UserData> _list = new List<UserData>();
    
    //加入5筆假資料
    for (int i = 1; i <= 5; i++)
    {
        UserData _data = new UserData();
        _data.id = i;
        _data.name = "測試" + i;
        _list.Add(_data);
    }

    var retunJson = serializer.Serialize(_list);
    Response.Write(retunJson);
    Response.End();
}

public class UserData
{
    public int id { get; set; }
    public string name { get; set; }
}

AjaxStart.html內容

success: function (data) {
    console.log(data); //輸出結果
    $('#div_result').html(data); //將結果呈現在Div裡
    var array = $.parseJSON(data);
    //迴圈取出資料
    $.each(array, function (i, item) {
        var content = "id: " + item.id + "; name: " + item.name;
        var li = "<li>" + content + "</li>";
        $('#div_result').append(li);
    });
    $('#loading').hide(); //結束Ajax..關閉讀取中圖片
},

程式宅急便

2013年4月14日星期日