ASP.net进度条在异步操作期间通过jQuery ajax更新
我正在尝试为长时间运行的异步任务设置一个简单的html进度条。 问题是我试图触发回发来运行一些服务器代码并同时执行客户端点击事件来启动ajax轮询，这导致ajax调用中的错误返回。 这是我的jQuery和html代码：
"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(); }); }); 这是我的代码隐藏：
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; } }
明确点击按钮时回发正在干扰ajax调用。 如果我在javascript clickhandler中添加一个preventDefault，则回发永远不会触发（duh），但所有的ajax调用都有效，所以至少所有的ajax代码都正常工作。 有没有办法让一个按钮都回发，所以我的服务器代码可以运行，并做一个客户端点击事件，所以我可以启动ajax调用？ 我想我已经搞砸了，我需要在没有asp回发的情况下完成这一切，因为那时页面被破坏并重新加载，对吧？
我敢肯定我这一切都错了。 我尝试将所有这些转移到服务中，我认为我将避免所有回发，只是对服务进行ajax调用以执行异步工作，并且还会对服务进行轮询以完成百分比，但服务不会实现页面异步，因此没有“RegisterAsyncTask （）“在.aspx页面上像你一样打电话。
我也试图使用会话状态来传达异步任务和ajax调用之间完成百分比的值，我不知道它是否会起作用，但我想我会进行实验。 如果失败了，我需要一些方法来传达后台任务和ajax调用之间的百分比。
我已经阅读了很多关于如何在webservice生成的代理中制作异步web服务和使用Beginxxx调用等的内容，但我也发现很多人试图做类似于我的事情，做简单的ajax调用通过jQuery，没有运气，没有真正的答案，因为我可以找到。
因此，从.aspx页面开始，如何使用页面异步或服务启动长时间运行的任务，并在任务运行时更新简单的html5进度条？ 看起来很简单，但没有：\
你只缺少一个基本点。 你的ajax调用将无法在回发中存活。
您无法在按钮单击时调用PROGRESS.startProgress() ，因为您希望页面在此之后立即回发。 回发会导致您的ajax调用被终止。
如果要显示进度条，则必须使用ajax而不是使用回发来上载文件。 像uploadify这样的插件可以提供帮助。
在经历了很多痛苦和痛苦之后，我完全重写了我的解决方案以使用SignalR，这大大简化了所需的所有代码。 有关在Web窗体网站中使用SignalR为长期运行任务执行简单HTML5进度条的简单方法的详细信息， 请参阅我关于该主题的博客文章 ，其中包括可下载的极简主义示例和在线演示。 我希望有人觉得有帮助。