Question

我正在学习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秒钟并返回一个列表。该按钮在此期间保持不变。我做错了什么？

Answer 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();
            });
        });
    });

等待SignalR功能结果时，Bootstrap按钮加载状态

1 个答案: