0

我想知道是否有办法在 asp.net 页面联系服务器时运行 JS 代码。即，我正在寻找一个通用事件处理程序，只要对 runat="server" 组件调用服务器，就会触发该处理程序。

我知道有一种方法可以让 jQuery.ajax() 在调用服务器之前和之后运行 JS 代码，但我不确定如何在 asp.net 中执行此操作。特别是，因为这个项目使用了很多自定义组件。

这里的目标是在单击按钮时显示某种加载图像，以防止用户单击按钮两次，并向用户显示系统正在运行。

如果单击导致页面或更新面板刷新，我只想在刷新之前显示加载图像，例如。用户点击，显示“正在加载”，刷新页面/更新面板（导致“加载”消失），新页面/内容正常显示。

更新 1：我无法使用 UpdateProgress，因为某些按钮不在 UpdatePanels 中。我真正想做的是在单击任何与服务器联系的按钮/控件后立即触发 JS。即，如果用户单击不与服务器联系的下拉菜单，则不会发生任何事情。但是，如果该下拉菜单与服务器有任何连接，则应该运行 JS。

我知道这是 ASP.NET Ajax 而不是 jQuery Ajax，我仅以 jQuery 为例。因为我之前使用过 jQuery 方法（使用 jQuery Ajax）在服务器调用之前触发 JS。例如。锁定被单击的元素或显示“正在加载...”屏幕。

我当然可以为每个页面添加一些 JS hack，手动为每个按钮添加一个“onclick”事件，但我认为如果有一个通用的解决方案会更好（因为我有很多页面，每个都有几个按钮来联系他们的服务器）。

更新2：当我想到它时，它不一定需要是触发的JS。如果页面以某种方式仅确保没有单击两次相同的按钮，那就足够了。通过禁用按钮或在其前面添加一些内容（如“正在加载...”屏幕）。

4

2 回答 2

1

您可以为此使用 UpdateProgress 与更新面板一起使用，但如果您正在执行整页回发（即不是 ajax），则您可以拥有的唯一加载动画是浏览器自己的。

更新进度：

 <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
       Shiny loading aninmation
    </ProgressTemplate>
  </asp:UpdateProgress?
于 2013-10-07T09:19:12.320 回答
0

以下是使用 jquery 的方法：

$(function() {
    $('a[href]').on('click', function(e) {
        var self = this;
        e.preventDefault();
        loadAsync($(self).attr('href'));
    });
});

function loadAsync(url) {
    $('div#result').fadeOut(200, function() {
        $('div#loader').fadeIn(200, function() {
            $.get(url, function(data) {
                $('div#result').html($(data));                    
            }).done(function() {
                console.log('done');
            }).fail(function() {
                $('div#result').html('Error');
            }).always(function() {
                $('div#loader').fadeOut(200, function() {
                    $('div#result').fadeIn(200);
                });
            });
        });
    });
}
于 2013-10-07T10:35:11.300 回答