После завершения всего остального кода появляется экран загрузки всплывающего окна

Question

У меня есть веб-форма, которая принимает пользовательский ввод, генерирует динамический запрос SQL и выводит результат в gridview.

Возможно, SQL может занять некоторое время, поэтому я сделал экран загрузки, используя модальное всплывающее окно Bootstraps. Идея заключается в том, что экран загрузки будет отображаться во время работы SQL.

Тем не менее, появляется всплывающее окно загрузки ПОСЛЕ gridview был заселен результатами, которые поражают точку экрана загрузки !!!

Может ли кто-нибудь дать мне какие-либо идеи относительно того, почему это происходит, и помочь мне с потенциальным решением?

C#

protected void btnRun_Click(object sender, EventArgs e) 
    { 
     //Display the loading popup 
     ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowLoading();", true); 

     //Declaring the SQL statement to be passed to the database 
     SqlDataSource SqlDataSource1 = new SqlDataSource(); 
     SqlDataSource1.ID = "SqlDataSource1"; 
     this.Page.Controls.Add(SqlDataSource1); 
     SqlDataSource1.ConnectionString = ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString; 
     SqlDataSource1.SelectCommand = "SQL Command Here"; 
     gvResults.DataSource = SqlDataSource1; 
     gvResults.DataBind(); 

    } 

JavaScript

function ShowLoading() { 
     $("#btnShowModalLoading").click(); 
    } 

ASPX

<button id="btnShowModalLoading" type="button" class="btn btn-info btn-lg hide" data-toggle="modal" 
    data-target="#modalLoading"> 
    Open Modal</button> 

режимное

<div id="modalLoading" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <h2> 
        Please Wait...</h2> 
       <div class="progress"> 
        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Вы регистрируете ClientStartupScript в своем обработчике OnClick на стороне сервера. Это означает, что, когда обработчик заканчивает и возвращает свои данные через Postback или Ajax, только тогда скрипт будет запущен.

Вам необходимо прикрепить событие onclick клиента, например. через jQuery или через атрибут onclientclick кнопки, и именно там вы должны поместить код, чтобы открыть модальный.

Answer 2

Это ответ на запрос. Чтобы это сработало, вам понадобится нажать кнопку запуска, чтобы отобразить загрузочный модаль, а затем отправить оттуда в javascript.