2013-07-22 5 views
1

Я пытаюсь показать загрузочный div нажатием кнопки, но на данный момент он не работает.ASP.NET show div on button click

Javascript:

<script type="text/javascript"> 
     $(document).ready(function (e) {  
      $('#BtnSend').click(function() { 
       $('#<%= loading.ClientID %>').toggle("slow"); 
      }); 
     }); 
    </script> 

Div:

<div id="loading" class="Loading" runat="server" visible="false"> 
    <div class="loadingImg"> 
    <img src="../Images/loading.gif" alt="loading" /> 
    </div> 
    </div> 

Кнопка:

<asp:Button ID="BtnSend" runat="server" Text="SEND" 
      onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" /> 

DIV установлен на RUNAT сервер так, что я могу изменить его видимость также с помощью кода.

+0

Проверено ли в HTML, сгенерированном ASP.NET, кнопка сохраняет идентификатор, указанный в файле aspx? Я на 100% уверен, что идентификатор, который вы видите в файле, не тот, который будет отображаться на странице, когда кнопка является частью пользовательского элемента управления. – Renan

+0

Примечание. Идентификатор - это серверный элемент управления * не * [обычно] совпадает с идентификатором ClientID. Идентификатор ClientID (он же DOM ID) использует идентификатор элемента управления, иерархию управления и правила сопоставления для создания производного идентификатора клиента. – user2246674

+0

с обеих сторон для подтверждения в случае если JavaScript выключен – user1986761

ответ

0

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

<script type="text/javascript"> 
    $(document).ready(function (e) {  
     $('#<%= BtnSend.ClientID %>').click(function (e) { 
      e.preventDefault(); 
      $('#<%= loading.ClientID %>').toggle("slow"); 
     }); 
    }); 
</script> 

Другая вещь, которую я заметил, как вы установили Visible="false":

<div id="loading" class="Loading" runat="server" visible="false"> 

Это означает, что DIV не существует, как его не выводить на стороне сервера. Посмотрите в источник просмотра, когда страница загружается, она не будет там и скрыта, ее просто нет. Удалите visible="false" и используйте CSS, чтобы скрыть его, чтобы начать с.

+0

его просто класс css для настройки div. все еще не работает. – user1986761

+0

oh я вижу сейчас, вы сделали ClientID для div, но не кнопку! Обновление фрагмента – rtpHarry

+0

на самом деле у вас есть ClientIDMode static, поэтому, вероятно, это не так, но видимая ложная проблема. – rtpHarry

3

Используйте кнопку onClientClick для кнопки asp. Затем сделайте функцию Jquery, что вы ahve под названием BtnSend_Click

Если вы хотите сделать это с помощью стороне клиента:

JQuery

function BtnSend_Click() { 
    $('#<%= loading.ClientID %>').toggle("slow"); 
} 

ASP Button

<asp:Button ID="BtnSend" runat="server" Text="SEND" 
      onClientClick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" /> 

Если вы хотите сделать он через сервер:

C#

protected void BtnSend_Click(object sender, EventArgs e){ 
    loading.Visibility = 'visible' //not sure on syntax to show it in code behind off the top my head 
} 

ASP Кнопка

<asp:Button ID="BtnSend" runat="server" Text="SEND" 
      onClick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" /> 
0

Библиотека ASP.Net AJAX имеет UpdateProgress контроль, который звучит, как он будет соответствовать вашим потребностям.