加载 Asp.net 页面时运行 Javascript答案

【问题标题】：Run Javascript when Asp.net page is loading加载 Asp.net 页面时运行 Javascript
【发布时间】：2013-10-08 15:07:38
【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

asp .net 中的控件使用 Microsoft Ajax 而不是 jQuery，因此您可以使用它的处理程序来执行此操作
I'm not sure how to do it in asp.net. 如果需要，您可以使用完全相同的方式进行操作...

标签： c# javascript asp.net

【解决方案1】：

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

更新进度：

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

【讨论】：

我无法使用 UpdateProgress，因为某些按钮不在 UpdatePanels 中。在原始帖子中查看我的“update1”。

【解决方案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);
                });
            });
        });
    });
}

【讨论】：