使用SignalR在Asp.net中实现进度条

使用SignalR在Asp.net中实现进度条
前面的文章我们介绍了SignalR。这次我们来实现在Asp.net Web应用程序进度条功能。这里我们引用Jquery.progressbar的插件，你可以点击这儿了解这个插件详细信息。假设您已经对Asp.net MVC Application与JQuery有一些了解。好的，首先我们在Server端创建一个Hub的类型:
```
    public class BookingHub : Hub
```
```
    {
```
```
        public void ProcessPendingEmails()
```
```
        {
```
```
            Clients.updateGaugeBar(10);
```
```
            Thread.Sleep(2000);
```
```
 
```
```
            Clients.updateGaugeBar(40);
```
```
            Thread.Sleep(3000);
```
```
 
```
```
            Clients.updateGaugeBar(64);
```
```
            Thread.Sleep(2000);
```
```
 
```
```
            Clients.updateGaugeBar(77);
```
```
            Thread.Sleep(2000);
```
```
 
```
```
            Clients.updateGaugeBar(92);
```
```
            Thread.Sleep(3000);
```
```
 
```
```
            Clients.updateGaugeBar(99);
```
```
           Thread.Sleep(500);
```
```
 
```
```
           Clients.updateGaugeBar(100);       
```
```
        }
```
```
    }
```
由上面的代码看出，我们这里模拟了任务处理的场景。下面是在Asp.net MVC Web Application 中 _Layout.cshtml :
```
<!DOCTYPE html>
```
```
<html>
```
```
<head>
```
```
    <title>@ViewBag.Title</title>
```
```
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
```
```
    <link href="@Url.Content("~/Content/gauge-bar.css")" rel="stylesheet" type="text/css" />
```
```
    <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
```
```
    <script src="@Url.Content("~/Scripts/jquery.signalr.min.js")" type="text/javascript"></script>
```
```
    <script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
```
```
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.progressbar.min.js")"></script>
```
```
    <script type="text/javascript">
```
```
        $(function () {
```
```
            //init progressBar plug-in
```
```
            $("#pb1").progressBar();
```
```
 
```
```
            var bookingHub = $.connection.bookingHub;
```
```
 
```
```
            $("#percButton").click(function () {
```
```
                bookingHub.processPendingEmails();
```
```
            });
```
```
 
```
```
            bookingHub.updateGaugeBar = function (perc) {
```
```
                $("#pb1").progressBar(perc);
```
```
            };
```
```
 
```
```
            $.connection.hub.start();
```
```
        });
```
```
    </script>
```
```
</head>
```
```
<body>
```
```
    <div class="page">
```
```
        <div id="header">
```
```
            <div id="title">
```
```
                <h1>Progress with SignalR</h1>
```
```
            </div>
```
```
            <div id="logindisplay">
```
```
                &nbsp;
```
```
            </div>
```
```
            <div id="menucontainer">
```
```
                <ul id="menu">
```
```
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
```
```
                    <li>@Html.ActionLink("About", "About", "Home")</li>
```
```
                </ul>
```
```
            </div>
```
```
        </div>
```
```
        <div id="main">
```
```
            @RenderBody()
```
```
        </div>
```
```
        <div id="footer">
```
```
        </div>
```
```
    </div>
```
```
</body>
```
```
</html>
```
为了简便我们在View嵌入了Javascript，绑定按钮事件。下面是Index.cshtml的内容:
```
@{
```
```
    ViewBag.Title = "Home Page";
```
```
}
```
```
<input type="button" id="percButton" value="Process pending emails" />    
```
```
<span class="progressBar" id="pb1"></span>
```
点击按钮，我们可以看到模拟进度条效果:

同进时，查询FireBug中Net:

希望对您Web开发有帮助。

您可能感兴趣的文章：

SignalR介绍与Asp.net
用Knockoutjs与Asp.net MVC实现级联下拉列表

作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。
相关阅读:
#Leetcode# 541. Reverse String II
PAT 甲级 1030 Travel Plan
PAT 甲级 1029 Median
bzoj 2002 [Hnoi2010]Bounce 弹飞绵羊
 jzoj 4243. 【五校联考6day1】c
2019.02.23【NOIP提高组】模拟 A 组总结
 【GDOI2013模拟1】病毒传播
 【GDOI2013模拟1】最短路
 【GDOI2013模拟1】删数字
 数列分块入门 6 总结
原文地址：https://www.cnblogs.com/wintersun/p/2610183.html