Загрузочное модальное всплывающее окно после загрузки всплывающего окна из кода

Question

Я хочу показать gridview в модальном всплывающем окне начальной загрузки по нажатию кнопки, но пока gridview не привязывается, я просто хочу показать панель загрузки и для этого я делаю.. я вызываю всплывающее окно загрузки, как при нажатии кнопки, как показано ниже.

<asp:Button ID="btnSearch" runat="server" CausesValidation="true" Text="Search" CssClass="btn btn-info pull-right"
                                        OnClientClick="waitingDialog.show();" ValidationGroup="MinMax" OnClick="btnSearch_Click" />

Тем временем в codebehind я вызываю кнопку OnClick и там после привязки GridView я делаю процесс ниже.

System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append(@"<script type='text/javascript'>");
        sb.Append("$('#myModal').modal('show');"); 
        sb.Append("waitingDialog.hide();");
        sb.Append(@"</script>");
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MinMax Data Report", sb.ToString(), false);

Но проблема в том, что мой GridView очень большой, но когда всплывающее окно с gridview получает Load It, не показывая горизонтальную и вертикальную полосу прокрутки. Другими словами всплывающее окно просто загрузить без полосы прокрутки. И если я удаляю загрузку Panel и Calling direct, то всплывающее окно тогда работает нормально. Я просто ничего не получаю.

Я хочу загрузить панель, потому что мой gridview загружается почти 32 секунды. ниже мое модальное тело gridview.

  <div class="modal-body" style="width=97%; overflow: auto;">
                <div class="tabel-responsive">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <asp:Panel ID="panel2" runat="server" ScrollBars="Auto" Width="100%" Height="100%"
                                HorizontalAlign="Center">
                                <asp:GridView ID="gvMeterData" runat="server" RowStyle-Wrap="false" CssClass="table table-striped"
                                    GridLines="Both" OnRowDataBound="gvMeterData_RowDataBound" HeaderStyle-HorizontalAlign="Center">
                                </asp:GridView>
                            </asp:Panel>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="gvMeterData" EventName="RowDataBound" />
                            <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
            </div>

Моя загрузка всплывающего окна, как показано ниже.

var waitingDialog = waitingDialog || (function ($) {
'use strict';

// Creating modal dialog's DOM
var $dialog = $(
    '<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:auto;">' +
    '<div class="modal-dialog modal-sm">' +
    '<div class="modal-content">' +
        '<div class="modal-header"><h3 style="margin:0;"></h3></div>' +
        '<div class="modal-body">' +
            '<div class="progress progress-striped active" style="margin-bottom:0;"><div class="progress-bar" style="width: 100%"></div></div>' +
        '</div>' +
    '</div></div></div>');

return {
    /**
    * Opens our dialog
    * @param message Custom message
    * @param options Custom options:
    *                 options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m";
    *                 options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning".
    */
    show: function (message, options) {
        // Assigning defaults
        if (typeof options === 'undefined') {
            options = {};
        }
        if (typeof message === 'undefined') {
            message = 'Loading';
        }
        var settings = $.extend({
            dialogSize: 'm',
            progressType: '',
            onHide: null // This callback runs after the dialog was hidden
        }, options);

        // Configuring dialog
        $dialog.find('.modal-dialog').attr('class', 'modal-dialog').addClass('modal-' + settings.dialogSize);
        $dialog.find('.progress-bar').attr('class', 'progress-bar');
        if (settings.progressType) {
            $dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType);
        }
        $dialog.find('h3').text(message);
        // Adding callbacks
        if (typeof settings.onHide === 'function') {
            $dialog.off('hidden.bs.modal').on('hidden.bs.modal', function (e) {
                settings.onHide.call($dialog);
            });
        }
        // Opening dialog
        $dialog.modal();
    },
    /**
    * Closes dialog
    */
    hide: function () {
        $dialog.modal('hide');
    }
};})(jQuery);

Отредактировано: я думаю, что может быть проблема с панелью обновления. не так ли? но без панели обновления также я не могу отслеживать ошибки. и снова, когда я смотрю в браузере элемент inspect, в консоли также не возникает ошибок, таких как отсутствие.js или чего-либо еще.

Заранее спасибо.

Answer 1

Я не мог понять, где должна быть ошибка в моем коде, как указано выше, и я не могу использовать AJAX для этого, потому что он не поддерживается в Yocto OS, так как я должен заставить этот код работать там. наконец, я внес изменения в свое решение, как показано ниже, и нашел способ показать загрузку..

Есть 2 способа, которые я нашел.. 1 в этой ссылке.. Загружается во всплывающем окне..

Еще один способ - сохранить таймер и загрузить "Загрузка изображения" в начало страницы и остановить загрузку изображения, когда мое представление сетки полностью связывается, отключив таймер. Эта логика, как показано ниже.

.aspx Page..

<asp:Timer ID="Timer1" runat="server" OnTick="TimerTick" Interval="6000">
            </asp:Timer><asp:Image ID="imgLoader" runat="server" ImageUrl="~/loading7.gif" />

.CS страница

protected void TimerTick(object sender, EventArgs e)
{
    this.fillGrid();
    Timer1.Enabled = false;
    imgLoader.Visible = false;
}

Это работает хорошо. Но я все еще жду ответа на мой актуальный вопрос. Вот почему свиток гаснет или не работает.