1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

        VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 編程開發 > C#編程 >
        • C#教程之C#使用SignalR實現進度條

        • 2019-10-01 21:07 來源:未知
        1. 需求背景  產品覺得在后臺處理數據時給前端加個進度條 
        2. 項目框架 .ENT framework4.5 MVC 5.0
        3. Nuget引入 Microsoft.Owin 系列 2.0.2 
        4. Nuget引入 Microsoft.AspNet.SignalR 系列 2.0.3
        5. 服務器代碼 選擇已安裝 > Visual C# > Web > SignalR ,然后選擇SignalR Hub 類 (v2)
          1. 復制代碼
            using System;
            using System.Collections.Generic;
            using System.Linq;
            using System.Web;
            using XXX.WMS.Core.Log;
            using Microsoft.AspNet.SignalR;
            
            namespace XXX.WebUI
            {
                public class SaleBackHub : Hub
                {
                    private void Send(string connectionId, string percent)
                    {
                        // Call the addNewMessageToPage method to update clients.
                        try
                        {
                            Clients.Client(connectionId).updateProgressbar(percent);
                        }
                        catch (Exception ex)
                        {
                            LoggerManager.GetInstance().Fatal(ex);
                        }
                    }
            
                    public string GetConnectionId()
                    {
                        return this.Context.ConnectionId;
                    }
                }
            }
            復制代碼

             

          2. 服務端調用前端action更新進度條
            復制代碼
             1 //使用外部方式調用Hub類方法
             2 var saleBackHub = Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext<SaleBackHub>();
             3 var percent = 0;
             4 if (!string.IsNullOrWhiteSpace(requestDto.ProgressbarKey))
             5 {
             6   percent = (int)((decimal)++progressCount / (decimal)saleBackModelListCount * 100);
             7 try
             8 {
             9    //調用前端action 更新進度條
            10    saleBackHub.Clients.Client(requestDto.ProgressbarKey).updateProgressbar(percent.ToString());
            11 }
            12 catch (Exception ex)
            13 {
            14     throw;
            15 }
            16 }
            復制代碼

             

        6. 服務添加Starup.cs
          1.   
            復制代碼
            using System;
            using System.Threading.Tasks;
            using Microsoft.Owin;
            using Owin;
            
            [assembly: OwinStartup(typeof(Frxs.WMS.Management.WebUI.Startup))]
            
            namespace xxx.WMS.Management.WebUI
            {
                public class Startup
                {
                    public void Configuration(IAppBuilder app)
                    {
                        // 有關如何配置應用程序的詳細信息,請訪問 https://go.microsoft.com/fwlink/?LinkID=316888
                        app.MapSignalR();
                    }
                }
            }
            復制代碼

             

        7.  前端代碼

          1. 對應頁面引入signalR.js

            <script src="@Url.Content("~/Scripts/signalR/jquery.signalR-2.0.3.min.js“)" type="text/javascript"></script>
            <script src="~/signalr/hubs"></script>
          2. 初始化signalR 連接 定義后端推送action  渲染進度條  本次用的是jeasyui 進度條彈窗

            復制代碼
            var chat;
            var chatConnectionId;
            function initchatHub() {
                // Reference the auto-generated proxy for the hub.
                chat = $.connection.saleBackHub;
                $.connection.hub.logging = true;
                // Get the user name and store it to prepend to messages.
                // Set initial focus to message input box.
                // Start the connection.
                $.connection.hub.start().done(function () {
                    chat.server.getConnectionId().done(function (connectionId) {
                        chatConnectionId = connectionId;
                    });
                });
            
                // Create a function that the hub can call back to display messages.
                chat.client.updateProgressbar = function (percent) {
                    // Add the message to the page.
                    if (parseInt(percent) <= 100) {
                        $.messager.progress('bar').progressbar('setValue', percent);
                    }
                    //var value = $.messager.progress('bar').progressbar('getValue');
                };
            }
            
            function showProgressbar() {
                $.messager.progress({
                    title: '測試進度條',
                    interval: 0 //每次進度更新之間以毫秒為單位的時間長度。默認值是 300。 
                });
            }
            復制代碼
        8.   實際效果圖

        9.   參考地址 https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/

        相關教程
        免费看成年人视频大全_免费看成年人视频在线观看