单击链接按钮 asp.net 时显示加载微调器

Question

我正在尝试在链接按钮上使用此代码，但因为它需要使用表单，所以它不起作用。我希望在单击链接按钮时显示覆盖 div，以便用户知道函数的处理时间会很长。我正在尝试在http://www.aspsnippets.com/demos/289/

上遵循示例

我认为问题出在 jquery 上，因为当我希望它在按钮单击时显示时，它需要一个表单提交。请记住，我是在用户控件中执行此操作的，因此它可能也与页面生命周期有关，但由于我的链接按钮的格式不正确，它在母版页中，这可能不是问题。

$('form').live("submit", function () {
    ShowProgress();
});

这是我的脚本代码

<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }
    $('form').live("submit", function () {
        ShowProgress();
    });
</script>

样式

  <style type="text/css">


    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
 </style>

我的 Html 和按钮点击

<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="~/Images/slateloading.gif" alt="" />
</div>
<asp:LinkButton ID="lnkExport"  CausesValidation="false" style="margin-top: 5px;" on Height="60" OnClick="lnkExport_Click" ClientIDMode="Static" runat="server" Text=" <i class='glyphicon glyphicon-open-file' ></i><br/>Submit Case" CssClass="btn btn-info btn-dark-theme-negative pull-right" />

然后，在page_load 我有这个。我需要在单击lnkexport 按钮时显示进度窗口。

if (!IsPostBack)
            {
                string script = "$(document).ready(function () { $('[id*=lnkExport]').click(); });";
                 Page.ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
            }

Answer 1

1. 在这种情况下，您的表单不会提交到服务器。 您应该使用提交按钮而不是链接按钮。

2. 检查您的 jquery 版本，在 jquery V1.9 中删除了 jQuery .live 函数。因此，如果您使用的是最新版本，则必须使用 .on 功能。

我建议使用更新面板的“更新进度模板”来添加加载面板。

<asp:UpdatePanel runat="server" ID="mainUpdatePanel">
<ContentTemplate>

   <!-- HTML CODE -->

    <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="mainUpdatePanel">
    <ProgressTemplate>

        <!-- LOADING SPINNER USER CONTROL -->
        <uc:Uc_Waiting runat="server" ID="Uc_Waiting"/>

    </ProgressTemplate>
</asp:UpdateProgress>

</ContentTemplate>