bootstrap modal popup после загрузки popup from codebehind

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" /> 

Между тем в коде я звоню кнопки OnClick И Там После GridView затруднительное я Doing ниже процесса.

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 Это не показаны горизонтальные и вертикальные полосы прокрутки. В другом слове popup просто загружается без полосы прокрутки. И если я удалю загрузку Panel и Calling direct That PopUp, то It Working Fine. я просто ничего не получаю.

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

<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); 

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

Спасибо заранее.

Answer 1

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

Там 2 пути я нашел .. 1 в этой ссылке .. Loading In Popup..

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

.aspx страницу ..

<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; 
} 

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