ASP.net进度条异步操作过程中通过jQuery AJAX更新(ASP.net progress

我试图建立一个长期运行的异步任务的一个简单的HTML进度条。问题是，我试图把火关回发到运行一些服务器代码，并在同一时间做一个客户端点击事件启动AJAX投票，这是造成在Ajax调用返回错误。这里是我的jQuery和HTML代码：

<%@ Page Language="C#" AsyncTimeout="230" CodeFile="test.aspx.cs" Inherits="test" %>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        "use strict";
        var PROGRESS;
        $(document).ready(function () {
            $.ajaxSetup({
                type: "POST",
                contentType: "application/json",
                data: '{}',
                timeout: 10000,
                converters: {
                    "text json": function (data) {
                        var msg;
                        msg = $.parseJSON(data);
                        return msg.hasOwnProperty('d') ? msg.d : msg;
                    }
                }
            });
            PROGRESS = {
                done: false,
                startProgress: function () {
                    var _progress = this;
                    $.ajax({
                        url: 'test.aspx/getProgress',
                        timeout: 20000,
                        data: '{}',
                        dataType: "json",
                        success: function (data) {
                            var currProgress = data * 100;
                            $("#prog").value = currProgress;
                            if (currProgress > 99)
                                _progress.done = true;
                            else
                                setTimeout("PROGRESS.startProgress()", 5000);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var s = textStatus == null ? "" : textStatus;
                            s += errorThrown == null ? "" : ", " + errorThrown;
                            alert(s);
                        }
                    });
                }
            };
            $("#body_DoUploadButton").on("click", function (event) {
                //event.preventDefault();
                PROGRESS.startProgress();
            });
        });
    </script>
</head>
<body>
    <asp:Button ID="DoUploadButton" Text="Import file" OnClick="UploadButton_Click" runat="server"></asp:Button>
    <progress id="prog" value="0" max="100"></progress>
</body>

这里是我的代码隐藏：

public partial class test : System.Web.UI.Page
{
    delegate void AsyncTaskDelegate();
    AsyncTaskDelegate _dlgt;

    IAsyncResult OnBegin(object sender, EventArgs e, AsyncCallback cb, object extraData)
    {
        _dlgt = new AsyncTaskDelegate(DoImport);
        IAsyncResult result = _dlgt.BeginInvoke(cb, extraData);
        return result;
    }

    void OnEnd(IAsyncResult ar)
    {
        _dlgt.EndInvoke(ar);
    }

    void OnTimeout(IAsyncResult ar)
    {
        //do something
    }

    [WebMethod(EnableSession = true)]
    public static double getProgress()
    {
        if (HttpContext.Current.Session["pctDone"] == null)
            return 0.0;
        return (double)HttpContext.Current.Session["pctDone"];
    }

    protected void DoImport()
    {
        int i = 10;
        while (i-- > 0)
        {
            System.Threading.Thread.Sleep(5000); //fake some work
            Session["pctDone"] = i / 10.0;
        }
        Session["pctDone"] = 1.0;
    }

    protected void UploadButton_Click(object sender, EventArgs e)
    {
        Session["pctDone"] = 0.0;
        PageAsyncTask task = new PageAsyncTask(new BeginEventHandler(OnBegin), new EndEventHandler(OnEnd),
            new EndEventHandler(OnTimeout), null);
        RegisterAsyncTask(task);
        ExecuteRegisteredAsyncTasks();
    }

    protected void Page_Init(object sender, EventArgs e)
    {
        Server.ScriptTimeout = 240;
    }
}

Apparnetly点击回发时，按钮与Ajax调用干扰。如果我在JavaScript函数clickhandler添加了preventDefault，回发永远不会触发（废话），但所有的Ajax调用工作，所以至少所有Ajax代码工作正常。有没有办法有一个按钮，两回传，所以我的服务器代码可以运行，并做客户端点击事件，这样我就可以开始Ajax调用？我想我在这里拧，我需要做的这一切，没有ASP回传，自那以后，页面被破坏并重新加载，对不对？

我敢肯定，我会对此完全错误的。我试图移动这一切的服务思想，我会避开所有的回传，也将让AJAX调用一个服务做异步工作，并为轮询百分之做服务，但服务不实现页面异步所以没有“RegisterAsyncTask （）”来称呼像您可以在.aspx页面上。

我也尝试使用会话状态进行通信的异步任务和AJAX调用，我不知道是否会工作之间完成的百分比值，但我想我会尝试。如果失败，我需要某种方式的后台任务和Ajax调用之间进行通信的百分比。

我读过关于如何做到使异步web服务了很多，使用的BeginXXX由Web服务生成的代理调用等，但我也发现了很多的人试图做类似我的东西的帖子，使简单的Ajax调用通过jQuery，又没有什么运气，因为我找不到真正的答案。

因此，从一个.aspx页面我该如何开始一个长时间运行的任务要么页面异步或服务，并更新一个简单的HTML5进度条任务运行的？好像这将是简单的，但没有：\

Answer 1:

你缺少的只有一个基本点。你的Ajax调用将无法生存回传。

你不能调用PROGRESS.startProgress()上按一下按钮，因为你希望页面之后立即回发。回发会导致你的Ajax调用将被终止。

如果你想显示一个进度条，你必须使用一个回传上传过的文件使用Ajax和不。有喜欢的插件uploadify ，可以帮助。

Answer 2:

太多的痛苦和折磨后，我已经完全重写我的解决方案中使用SignalR，这极大地简化了所需的所有代码。有关简单的方法在Web使用SignalR长时间运行的任务，一个简单的HTML5进度条详细信息表格的网站，看到我的博客文章关于这个问题，其中包括一个可下载的简约样品和工作在线演示。我希望有人认为有帮助的。