[jQuery]小試 Asp.Net + Ajax 功能

posted under , by alanjiang
測試情況：
模擬在aspx頁面上，按下按鈕後，會啟動batch程式做資料的處理
batch程式處理完成後，會將狀態寫入資料庫中
所以需要ajax每隔一段時間去查詢是否已經處理完成

[ajaxDemo.aspx]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxDemo.aspx.cs" Inherits="ajaxDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery ajax Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.blockUI.js"></script>
    
    <script type="text/javascript">
        var ctime;
        function startAjax()
        {
            $.blockUI({ 
                message: '<h1><img src="ajax-loader.gif" /> Loading...</h1>',
                css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff'
                }
            }); 
            
            // 6秒後開始查詢執行情況，之後每6秒查一次，直到完成
            ctime = setTimeout(showMsg, 6000);
        }
        function showMsg() {
            
            $.ajaxSetup({ cache: false });
            $.ajax({
                url: 'AjaxHandler.ashx',
                error: function(xhr) {
                    alert('Ajax request 發生錯誤，請通知系統人員。\n原因：' + xhr.responseText);
                    clearTimeout(ctime);
                    $.unblockUI();
                },
                success: function(response) {
                    if(response.length <= 0) return;
                    clearTimeout(ctime);
                    $.unblockUI();
                    alert(response);
                }
            });
            
            ctime = setTimeout(showMsg, 6000);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnSartDemo" runat="server" Text="開始Demo" OnClick="btnSartDemo_Click" />
    </div>
    </form>
</body>
</html>

[ajaxDemo.aspx.cs]
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ajaxDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSartDemo_Click(object sender, EventArgs e)
    {
        //  等待1秒鐘，模擬Server端處理的時間，如...檢查資料
        System.Threading.Thread.Sleep(1000);

        //  啟動 ajax
        this.ClientScript.RegisterClientScriptBlock(this.GetType(), "", "<script>startAjax()</script>");
    }

[AjaxHandler.ashx]
<%@ WebHandler Language="C#" Class="AjaxHandler" %>

using System;
using System.Web;

public class AjaxHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";

        try
        {
            //  模擬batch程式已經處理完成
            context.Response.Write("工作已完成");
        }
        catch (Exception ex)
        {
            context.Response.StatusCode = 500;
            context.Response.StatusDescription = ex.Message;
            context.Response.Write(ex.Message);
            context.Response.End();
        }
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

0 意見

Make A Comment
訂閱： 張貼留言 (Atom)