Question

我想知道每当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。如果页面以某种方式确保相同的按钮没有被点击两次就足够了。通过取消按钮或在其前面添加一些东西（如“正在加载...”屏幕）。

Answer 1

你可以使用UpdateProgress来与更新面板一起使用，但如果你正在进行整页回发（即不是ajax），你可以拥有的唯一加载动画就是浏览器所拥有的。

的UpdateProgress：

 <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
       Shiny loading aninmation
    </ProgressTemplate>
  </asp:UpdateProgress?

Answer 2

以下是使用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);
                });
            });
        });
    });
}

加载Asp.net页面时运行Javascript

2 个答案: