等待 SignalR 函数结果时的引导按钮加载状态答案

【问题标题】：Bootstrap button loading state while waiting SignalR function result等待 SignalR 函数结果时的引导按钮加载状态
【发布时间】：2015-01-10 11:00:45
【问题描述】：

我正在学习 MVC、Bootstrap、jQuery 和 SignalR。我设法建立了一个简单的视图和一个简单的 SignalR 函数。这是可行的，但如果 SignalR 任务需要很长时间才能执行，我想添加某种等待指示器。我尝试从 getboostrap.com 设置状态按钮，但由于某种原因无法使其正常工作。

这是我的客户端代码：

    <h2>Employees</h2>
<button type="button" class="btn btn-success" id="btnEmployees" data-loading-text="Loading..." autocomplete="off">
    Get Employees
</button>
<div id="result">

</div>
@section scripts
     <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
<script>
    $(function () {      
        var service = $.connection.serviceHub;
        service.client.GetEmployees = function (html) {
            $("#result").html(html);
        };

        $.connection.hub.start().done(function () {
            $('#btnEmployees').on('click', function () {
                var $btn = $(this).button('loading');
                service.server.printAllEmployees();
                $btn.button('reset');
            });
        });
    });
    </script>
End Section

我正在尝试将按钮设置为加载状态，执行 SignalR 函数并将按钮返回到正常状态。 SignalR 函数休眠 5 秒并返回一个列表。该按钮在持续时间内保持不变。我做错了什么？

【问题讨论】：

标签： jquery asp.net-mvc-4 model-view-controller twitter-bootstrap-3 signalr

【解决方案1】：

我总是问得太早，最后回答我自己的问题 :) 无论如何，我把 jQuery 的基础搞砸了，我的按钮在错误的地方返回到正常状态。当然，在重置按钮之前，我必须等待 SignalR 的回答。这是更正后的 jQuery 部分：

$(function () {      
        var service = $.connection.serviceHub;
        service.client.GetEmployees = function (html) {
            $("#result").html(html);
            $('#btnEmployees').button('reset');
        };

        $.connection.hub.start().done(function () {
            $('#btnEmployees').on('click', function () {
                var $btn = $(this).button('loading');
                service.server.printAllEmployees();
            });
        });
    });

【讨论】：