Mam formularz, który jest dynamicznie budowany w zależności od wyboru użytkownika za pomocą Ajax (wbudowany .NET Ajax z UpdatePanel).ajax "ładowanie" ikona z UpdatePanel postbacks
Jak mogę wstawić "standardową" ikonę ładowania ajax (być może jest ona dołączona do wskaźnika myszy) podczas oddzwonienia, a następnie usunąć ją po zakończeniu postu?
Mam zainstalowany AjaxToolKit, jeśli to pomaga.
użycie updateprogress zestawu narzędziowego: nadzieję, że to pomoże Ci
<asp:updatepanel id="ResultsUpdatePanel" runat="server">
<contenttemplate>
<div style="text-align:center;">
<asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="ResultsUpdatePanel" dynamiclayout="true">
<progresstemplate>
<img src="support/images/loading.gif">
</progresstemplate>
</asp:updateprogress>
</div>
//your control code
</contenttemplate>
</asp:updatepanel>
użyć poniższy kod ...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="updProgress"
AssociatedUpdatePanelID="UpdatePanel1"
runat="server">
<ProgressTemplate>
<img alt="progress" src="images/progress.gif"/>
Processing...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblText" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="btnInvoke" runat="server" Text="Click"
onclick="btnInvoke_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
protected void btnInvoke_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
lblText.Text = "Processing completed";
}
tutaj znalazłem niektóre JavaScript, aby proces aktualizacji siebie, a także można umieścić to gdziekolwiek na stronie i działa dowolny panel aktualizacji na stronie.
<script type="text/javascript">
// Get the instance of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Add initializeRequest and endRequest
prm.add_initializeRequest(prm_InitializeRequest);
prm.add_endRequest(prm_EndRequest);
// Called when async postback begins
function prm_InitializeRequest(sender, args) {
// get the divImage and set it to visible
var panelProg = $get('divImage');
panelProg.style.display = '';
// reset label text
var lbl = $get('<%= this.lblText.ClientID %>');
lbl.innerHTML = '';
// Disable button that caused a postback
$get(args._postBackElement.id).disabled = true;
}
// Called when async postback ends
function prm_EndRequest(sender, args) {
// get the divImage and hide it again
$('divImage').hide();
// Enable button that caused a postback
$get(sender._postBackSettings.sourceElement.id).disabled = false;
}
</script>
<asp:UpdateProgress ID="updateProgress" runat="server">
<ProgressTemplate>
<div class="loading-panel">
<div class="loading-container">
<img src="<%= this.ResolveUrl("~/images/gears.gif")%>" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<style>
.loading-panel {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
position: relative;
width: 100%;
}
.loading-container {
background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0;
color: #fff;
font-size: 90px;
height: 100%;
left: 0;
padding-top: 15%;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999999;
}
</style>
Ładowanie zdjęć z: http://loading.io/
Po pewnym ograniczonym testów znalazłem tam być niewielkie opóźnienie w dynamicznym dodaniu elementów DOM przy użyciu ramy za '' kontroli. W przeciwieństwie do tej metody podłączania odpowiednich zdarzeń JS zapewnia natychmiastową informację zwrotną interfejsu użytkownika. –
Tak, to jest szybsze, ale trochę, ale jeśli masz ciężką stronę z dużą ilością dom można różnicować prędkości zarówno –
To działało dobrze dla mojej sytuacji, ponieważ mam od aktualizacji 3-7 panelu w jednym obszarze i jeśli jakiejkolwiek aktualizacji chciałem zrobić "pracę" pozwoliło mi posłuchać ich wszystkich i pokazać, ukryć i zmanipulować domem, tak jak potrzebowałem, dzięki! –