Показывать пользовательский элемент управления как сообщение ожидания при выполнении длительной операции

Я создал веб-пользовательский элемент управления, чтобы показать в трудоемкой операции.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WaitControl.ascx.cs" Inherits="WaitOperation.WaitControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<link href="styles.css" rel="stylesheet" />

<asp:Panel ID="pnlUpdate" runat="server" CssClass="modalPopup" Height="50px" Width="125px">
    Loading....<br />
    <img src="ajax-loader.gif" />
</asp:Panel>
<asp:Button ID="btnHidden" runat="server" Text="target button for ModalPopupExtender" CssClass="hidden" />
<asp:ModalPopupExtender ID="modelWaitPopup" runat="server"
    TargetControlID="btnHidden" BehaviorID="modelWaitPopup" PopupControlID="pnlUpdate"
    BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>

На главной странице сказать "Default.aspx", я хочу использовать этот пользовательский элемент управления для занятого сообщения.

protected void btnInvoke_Click(object sender, EventArgs e)
{
   //Show waituserControl
   //Heavy task of updating gridview from database--(not an issue)
   //hide wait usercontrol after updating
}

Здесь моя главная задача - как отобразить и скрыть пользовательский веб-элемент управления (как ожидание) во время выполнения операции.

Пожалуйста, предложите..

Источник

3 ответа

Решение

Вот пример пользовательского элемента управления, который мы используем в нашем приложении:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelPleaseWaitControl.ascx.cs"
    Inherits="AgencijaRSWeb.UserControls.UpdatePanelPleaseWaitControl" %>

<script type="text/javascript">

    var errorOccoured = false;

    function pageLoad()
    {

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest
        (
            function (sender, args)
            {
                $find('<%=mpeuProgrss.ClientID%>').show();
            }
        );

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest
        (
            function (sender, args)
            {

                if (args.get_error() != undefined)
                {

                    if (errorOccoured == false)
                    {
                        alert(args.get_error().message);
                        errorOccoured = true;
                    }
                }

                $find('<%= mpeuProgrss.ClientID%>').hide();
            }
        );
    }


</script>
<toolkit:ModalPopupExtender ID="mpeuProgrss" runat="server" TargetControlID="lblDummy"
    PopupControlID="pnlLoading" BackgroundCssClass="modalBackground" DropShadow="true">
</toolkit:ModalPopupExtender>

<asp:Panel ID="pnlLoading" runat="server" CssClass="modalPopup" Style="display: none; width: 550px; min-height: 100px">
    <asp:Label runat="server" ID="lblDummy" Style="display: none" />
    <div style="font-weight: bold; font-size: 1.2em;">
        <div style="display: inline; float: right;">
            <asp:Image runat="server" ID="ajaxLoader" ImageUrl="~/images/ajax-loader.gif" />
        </div>
        <h1 style="margin-top: 0px; padding: 0px; height:25px">
            Please wait!
        </h1>
        <div style="text-align: center">
            Your request is being processed.
        </div>
    </div>
</asp:Panel>

На целевой странице: поместите все содержимое своей страницы на панель обновлений, а затем под панель обновлений добавьте этот код:

<uppwc:UpdatePanelPleaseWaitControl runat="server" />

uppwc, регистрируется так:

<%@ Register Src="~/UserControls/UpdatePanelPleaseWaitControl.ascx" TagName="UpdatePanelPleaseWaitControl"
    TagPrefix="uppwc" %>

Надеюсь это поможет!

С уважением, Урос

Источник

Это веб-приложение делает вещи немного сложнее.

Я позаботился об этом двумя способами:

  1. Вызовы Ajax: перед вызовом AJAX веб-службы отобразите всплывающее окно с помощью javascript и скройте его после завершения вызова.
  2. Отобразите всплывающее окно, используя JavaScript еще до btnInvoke (скажем, в onclientclick) делает постбэк. Как только постбэк вернется, модальное всплывающее окно автоматически скроется, и ваша страница будет отображаться нормально.

Хотя это и не лучший выбор, но второй был моим любимым, так как он действительно уменьшает усилия.

Источник

Это проблема жизненного цикла страницы.Net. Выполняется обратная запись, и обработчик события click сообщает ему, чтобы он показывал ожидающий пользовательский элемент управления, но трудоемкая работа выполняется до окончания жизненного цикла и визуализирует страницу после обратной передачи, поэтому вы не видите анимацию.

Как насчет внедрения JavaScript для инициализации анимации ожидания.

Источник
Другие вопросы по тегам