当我导航到其他页面并返回时,SignalR进度条未恢复

时间:2017-03-24 18:34:17

标签: signalr progress-bar

我在web表单应用程序(不是MVC,MVVM)中使用signalR来显示页面上显示进度百分比的进度条,我的问题是当我导航到其他页面并返回上一页时,进度条重新启动。我希望它从我离开的地方恢复。下面是我的signalR集线器代码 -

public void CallLongOperation()
    {
        for (int x = 0; x <= count; x++)
        {
            // delay the process for see things clearly
            Thread.Sleep(1000);
            if (x == 20)
                msg = "Loading Application Settings...";

            else if (x == 40)
                msg = "Applying Application Settings...";

            else if (x == 60)
                msg = "Loading User Settings...";

            else if (x == 80)
                msg = "Applying User Settings...";

            else if (x == 100)
                msg = "Process Completed!...";

            // call client-side SendMethod method
            Clients.Caller.sendMessage(string.Format
                    (msg + " {0}% of {1}%", x, count), x);


        }


    }

我在aspx页面的javascript中调用了这个函数。

&#13;
&#13;
<script type="text/javascript" language="javascript">

        $(document).ready(function () {

            // initialize progress bar
            $("#progressbar").progressbar({ value: 0 });

            // initialize the connection to the server
            var progressNotifier = $.connection.progressHub

            // client-side sendMessage function that will be called from the server-side
            progressNotifier.client.sendMessage = function (message) {
                // update progress

                UpdateProgress(message);
            };

            // establish the connection to the server and start server-side operation
            $.connection.hub.start().done(function () {
                // call the method CallLongOperation defined in the Hub
                progressNotifier.server.callLongOperation();
            });

        });

        function UpdateProgress(message) {
            // get result div
            var result = $("#result");
            // set message
            result.html(message);
            // get progress bar
            var value = $("#progressbar").progressbar("option", "value");
            // update progress bar
            $("#progressbar").progressbar("value", value + 1);

        }

    </script>
&#13;
<body>
    <form id="form1" runat="server">

        <div style="width: 30%; margin: 0 auto;">
            <div id="result" style="font-family: Tahoma; font-size: 0.9em; color: darkgray; margin-top: 230px; padding-bottom: 5px">
                Initializing and Preparing...
            </div>

            <div id="progressbar" style="width: 300px; height: 15px"></div>
            <br />
        </div>
        <a href="Default.aspx" target="_self">Go Home</a>
    </form>



</body>
&#13;
&#13;
&#13;

请提出解决方案。

1 个答案:

答案 0 :(得分:1)

我会尝试尽可能简单地解释问题。

此代码:

        // establish the connection to the server and start server-side operation
        $.connection.hub.start().done(function () {
            // call the method CallLongOperation defined in the Hub
            progressNotifier.server.callLongOperation();
        });

每次重新加载页面并重新建立与集线器的连接时,都会在服务器public void CallLongOperation()上执行您的方法。您需要:

  1. 构建您的网页,如SPA(单页应用),这样他们就不需要重新加载。
  2. 将值存储在每个用户的静态ConcurrentDictionary 中,以便服务器能够记住&#34;每个用户的进度条的状态。
  3. 在我看来,如果没有一些重大的重新架构,这些是你唯一的两个选择。