互联网技术 · 2024年2月23日 0

使用ajax和jquery-ui在Asp.net中实现进度条

这篇文章主要介绍了Asp.net基于ajax和jquery-ui实现进度条,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前台用ajax不停进行查询,直到任务完成。进度条用的是jquery-ui。后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中。

效果图:

使用ajax和jquery-ui在Asp.net中实现进度条

代码:

前台:

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  <title></title>
  <script src=”Scripts/jquery-2.1.4.min.js”></script>
  <script src=”Scripts/jquery-ui-1.11.4.min.js”></script>
  <link href=”https://redspeed01.com/d/easyvpn24″ rel=”external nofollow” rel=”stylesheet” />
  <script type=”text/javascript”>
    function GetProgress() {
      $.ajax({
        url: “/Handler1.ashx”,
        type: “POST”,
        data: { “RequestType”: “AjaxRequest”, “Method”: “GetProgress” },
        success: function (data) {
          if (data != -1) {
            //工作没有结束,继续查询进度
            setTimeout(GetProgress, 100);
            $(“#progress”).html(data);
            $(“#progressbar”).progressbar({ value: parseInt(data) });
          } else {
            //工作完成
            $(“#progress”).html(“done”);
        &