2010-04-13 6 views
0

Как отображать круговое вихревое изображение, которое обычно видно на страницах asp.net, в то время как страница загружается (получение данных и т. Д.)?asp.net страница «страница загружается»

+0

дубликат http://stackoverflow.com/questions/750358/with-jquery-how-can-i-implement-a-page-load-animation – CJM

ответ

2

Если вы используете UpdateProgress/UpdatePanel, вот несколько примеров: http://www.asp.net/Ajax/Documentation/Live/overview/UpdateProgressOverview.aspx

Вот пример загрузки GIF с помощью UpdateProgress:

<asp:UpdateProgress ID="updProg" AssociatedUpdatePanelID="updPnl" DisplayAfter="0" runat="server"> 
    <ProgressTemplate> 
     <div id="progInd"> 
      <img id="indic" src="/images/loadgifs/z.gif" alt="..." /> 
     </div> 
    </ProgressTemplate> 
</asp:UpdateProgress> 

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

<asp:UpdatePanel ID="updPnl" runat="server"> 
<ContentTemplate> 
     ... 
    <asp:Timer ID="tmrTrigPostbk" runat="server" Interval="10" /> 
</ContentTemplate> 
<Triggers> 
    <asp:AsyncPostBackTrigger ControlID="tmrTrigPostbk" EventName="Tick" /> 
</Triggers>  
</asp:UpdatePanel> 

protected void Page_Load(object sender, EventArgs e) 
{ 
    tmrTrigPostbk.Enabled = !IsPostBack; 
} 
1

Вы используете UpdatePanel? или Вы используете библиотеки Javascript, такие как JQuery? Если прежний, вы можете добавить завихрение в UpdateProgress, если последнее (JQuery), то вы можете запустить изображение по методу .ajaxStart().

НТН

+0

ни на самом деле. Его простые данные извлекают и заполняют текстовые поля. Думаю, мне нужно использовать UpdatePanel, если я хочу эту функцию? – user279521

1

Я использую плагин JQuery BlockUI чтобы сделать это довольно легко сделать, даже внутри области на странице, скажем, диалоговое окно.

http://malsup.com/jquery/block/

вот пример делает вызов AJAX на сервер:

function GetNewContactInfo(contactId) { 

    if (0 === contactId) { 
     showErrorMsg('You must select a Contact to Retrieve'); 
     return; 
    } 

    var request = { 
     ContactId: 0 
    }; 

    wjBlockUI(); 

    request.ContactId = contactId; 

    ContactServiceProxy.invoke({ serviceMethod: "GetContact", 
     data: { request: request }, 
     callback: function(response) { 
      DisplayNewContactInfo(response); 
     }, 
     error: function(xhr, errorMsg, thrown) { 
      postErrorAndUnBlockUI(xhr, errorMsg, thrown); 
     } 
    }); 

} 

Внутри функции DisplayNeewContactInfo я называю $ .unblockUI(); чтобы отвести сообщение. У меня есть фактический производит вызов вызова BlockUI в функции обертки:

function wjBlockUI(msg) { 

var defaultMsg = '<img src="../images/activity.gif" />'; 

if (null !== msg) { 
    defaultMsg = msg 
} 

$.blockUI({ overlayCSS: { backgroundColor: '#aaa' }, message: defaultMsg }); 

}

Вы можете загрузить весь проект этих примеры пришли, http://professionalaspnet.com/WCFJQuery.zip

Смежные вопросы