前面的文章我们介绍了SignalR。这次我们来实现在Asp.net Web应用程序进度条功能。这里我们引用Jquery.progressbar的插件,你可以点击这儿了解这个插件详细信息。假设您已经对Asp.net MVC ApplicationJQuery有一些了解。好的,首先我们在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>
 
点击按钮,我们可以看到模拟进度条效果:

progressBar

同进时,查询FireBug中Net:

FirefoxProgressBar


希望对您Web开发有帮助。

您可能感兴趣的文章:

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


作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog

posted on 2012-07-26 15:38  PetterLiu  阅读(3783)  评论(0编辑  收藏  举报