C# asp.net与jquery做ajax简单进度条

最新推荐文章于 2021-08-05 17:23:41 发布

原创最新推荐文章于 2021-08-05 17:23:41 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

net日记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用C# ASP.NET和jQuery创建一个简单的AJAX进度条。通过设置全局缓存参数并在setCahe.ashx处理程序中模拟操作进度，将进度信息读取并回传给jQuery实现动态显示。

一直以为response.Flush() 可以实现。。。。发现不行的

最后还是采用了全局参数保存到 cahe 来做了

setCahe.ashx 模拟操作的事件进度

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            for (int i = 0; i < 101; i++)
            {
                context.Cache["KeyUI"] = i;
                System.Threading.Thread.Sleep(1000);
            }

            context.Cache.Remove("KeyUI");
        }

读取cahe返回给jq

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var cahe = context.Cache["KeyUI"];
            if (cahe != null)
            {
                context.Response.Write(cahe);
                context.Response.End();
            }            
        }

进度条显示

<body>
    <div style="width:400px;height:20px; border:1px solid #808080">
        <div id="divgo" style="height:20px"></div>
    </div>
</body>
</html>
<script src="../../Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $(function () {       
        show();
    });


    function show()
    {
        $.get("testajax.ashx", function (data) {
            if (data == null || data == '')
            {
                $('#divgo').html("服务未启动");
                return;
            }


            $('#divgo').css("width", data + "%");
            $('#divgo').css("background-color", "red");
            if (data != '100') {
                setTimeout(show, 1000);
            }
        });
    }
</script>

先运行 setCahe.ashx 模拟操作,然后刷新html即可

效果