Question

这是我的HTML条目，此时激活GenerateBill（）Javascript：

<a class="btn btn-primary" id="loading-example-btn" data-loading-text="Loading..." onclick="GenerateBill()">Generate Bill</a>

这是GenerateBill（）方法，这一切都运行正常，我想要做的就是添加按钮状态反馈

    function GenerateBill() {

        var url = '/PremiseProvider/GenerateBill';
        var data = {
            StartDate: $('#from').val(),
            EndDate: $('#to').val(),
            premiseProviderId: $('#PremiseProviderId').val()
        };

        $("body").load(url, data);

    };

以下是Bootstrap 3官方网站上有关如何实施按钮状态反馈的代码片段：

<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

我的问题是如何在我的GenerateBill脚本中实现，bootstrap示例使用Ajax调用，我可以使它工作而不会对我所做的进行太多更改吗？

Answer 1

如果我可以提出一些可以解决问题并改进代码的建议。

不是使用onclick事件，而是在javascript中添加一个事件监听器，然后从那里调用该函数。
将.button('loading')调用添加到同一个事件侦听器。
请勿href留下<a>标记。这会导致某些浏览器在悬停时无法正确显示指针。

您的链接如下所示：

<a href="#" class="btn btn-primary" id="loading-example-btn" data-loading-text="Loading...">Generate Bill</a>

单独留下GenerateBill()逻辑，您需要添加到javascript中的监听器：

$('#loading-example-btn').click(function () {
  $(this).button('loading');
  GenerateBill();
});

此代码的工作示例（简化GenerateBill()）可在此处获取：http://www.bootply.com/VTSNA1XMcm

如何在HTML5 CSHTML页面中设置ButtonState加载

1 个答案: