前面的文章我們介紹了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">
</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。