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

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

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

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

效果图:

Asp.net基于ajax和jquery-ui实现进度条

代码:

前台:

<!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”);
        &

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.

登录免费注册