Smitha5 Ответов: 3

Как показать, что загрузка идет с изображением с помощью ajax

Привет Я использую visual studio 2010 .net framework 3.5.
В моем проекте я импортирую файл excel, и его загрузка займет некоторое время.
Поэтому в этот момент я хочу показать что-то вроде колеса, которое показывает, что загрузка продолжается, и сделать экран только для чтения.возможно, вы видели на некоторых веб-страницах.
поэтому я хочу знать, как это осуществить.
Пожалуйста, помогите мне в этом отношении

3 Ответов

Рейтинг:
2

Debabrata_Das

Здравствуйте Smitha, вы можете использовать UpdateProgress контроль обеспечивается Расширения AJAX управление осуществляется следующим образом:

Изменения ASPX:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"

        AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <img alt="please wait..." src="loder.gif" />
    </ProgressTemplate>
</asp:UpdateProgress>

Код за изменениями:
protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
    Label1.Text = "Page loaded at: " + DateTime.Now.ToString();
}

Здесь я создал задержку с помощью потока.Метод Sleep ().

Smitha5

Спасибо.

Рейтинг:
2

acurio2007

Y COMO SERIA EN VB.NET. POR FAVOR SU APOYO

CHill60

Si tiene una pregunta, utilice el enlace rojo "Задай вопрос" que se encuentra arriba. Нет publique preguntas o comentarios como soluciones. Este es un sitio en idioma inglés.

Если у вас есть вопрос, воспользуйтесь красной ссылкой "задать вопрос" выше. Не публикуйте вопросы или комментарии в качестве решений. Это англоязычный сайт

Рейтинг:
1

Nirav Prabtani 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



.divBackMain
      {
          z-index: 99;
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;
          background-color: black;
          opacity: 0.4;
      }
      .divLoader
      {
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 100;
          margin-left: -110px;
          margin-top: -110px;
          width: 220px;
          background-image: url('http://2.bp.blogspot.com/-XTR-_X58BHo/UE-v8fIayII/AAAAAAAACMw/fu8ZxR57xUU/s1600/LoadingGIF.gif');
      }
      #DivLoaderContainer
      {
          display:none;
          }


function UploadData() {

           $("#DivLoaderContainer").fadeIn(); //set fadeIn whenever ypu want to show loader
           $.ajax({
               type: "POST",
               url: "PageName.aspx/MethodName",
               contentType: "application/json;charset=utf-8",
               data: {}, //Parameters
               dataType: "json",
               success: function (data) {

                   $("#DivLoaderContainer").fadeOut(); //set logout after finish all process


               },
               error: function (result) {



               }
           });



<div id="DivLoaderContainer">
           <div class="divBackMain">
           </div>
           <div class="divLoader">
               <img src="http://2.bp.blogspot.com/-XTR-_X58BHo/UE-v8fIayII/AAAAAAAACMw/fu8ZxR57xUU/s1600/LoadingGIF.gif" />
           </div>
       </div>

HardikPatel.SE

Мои 5+

Smitha5

Привет Нирав,
Спасибо за ответ.
Я очень новичок в "Аяксе".Не могли бы вы подробно объяснить, например, где добавить упомянутый вами код и как он работает.
где именно мне нужно вызвать какие-либо функции.
Заранее спасибо

Nirav Prabtani

В моем решении нет роли ajax ,я просто создал загрузчик с помощью Div.
Я установил visible с помощью $("#DivLoaderContainer").fadeIn(); перед вызовом ajax
а после завершения ajax-вызова он должен исчезнуть с помощью $("#DivLoaderContainer").fadeOut();
вы можете установить fadeIn и fadeOut в соответствии с вашими потребностями.. :)