ASP.Net image weergeven tegelijk met process

[Bob_check_]

Dag beste leden,

ik heb een ASP.NET webpagina met een button erop.
Zodra die button wordt geklikt wordt er een stuk code uitgevoerd die ongeveer 30 sec. duurt.
Graag wil ik dus een soort progress bar tegelijkertijd weergeven, of een simple ronddraaiend gifje. In ieder geval iets dat laat zien dat hij bezig is met rekenen.

Als ik gewoon probeer een imageURL te veranderen als de button wordt geklikt, verandert hij dit pas nadat het rekenwerk klaar is. Hetzelfde met een label, textbox, whatever. Mijn conclusie was nu; hij laat pas visuele wijzigingen zien als hij kan postbacken, dus als alles voltooid is qua code.

Dus ik heb het met een updatepanel geprobeerd, maar dat lukte niet, want die wordt ook pas vernieuwd als de code is voltooid.

Vervolgens probeer ik het met een aparte thread die de imageURL verandert, maar het werkt weer niet.

Dus, ik zit met een supersimpel probleem, en ik kan frustrerend genoeg geen oplossing vinden. Iemand hier ervaring mee?

[TeeDee]

UpdatePanel? AJAX en nog meer nieuwe gerse technieken? JQuery?

[Bob_check_]

updatePanel staat in mijn post dat ik al geprobeerd heb...
dus ik dacht; met ajax lukt zoiets niet.
Misschien jquery, dat ken ik nog niet echt, ik zal er even op googlen.

[TeeDee]

Bob_check_ schreef op dinsdag 13 oktober 2009 @ 11:37:
updatePanel staat in mijn post dat ik al geprobeerd heb...
dus ik dacht; met ajax lukt zoiets niet.
Misschien jquery, dat ken ik nog niet echt, ik zal er even op googlen.

Laat dan eens wat code zien, en dan met name het UpdatePanel verhaal.

[Bob_check_]

ok, ik dacht het is zo'n simpel probleem, code is niet nodig maar hier is wat:

protected void calcButton_Click(object sender, EventArgs e)
{
image1.ImageUrl = "image.jpg"; //de image in de updatePanel
Compare(); //het proces wat zo lang duurt
}

Het enige wat ik wil is dat hij op de pagina meteen iets laat zien terwijl hij ondertussen de compare functie doorrekent. Nu laat hij pas wat zien als de compare() functie af is. Ik zit nu te kijken ondertussen naar iFrames. Maar het lijkt me dat er een supersimpele oplossing hiervoor is, maar misschien is dat wel niet zo.

[TeeDee]

Bob_check_ schreef op dinsdag 13 oktober 2009 @ 11:52:
ok, ik dacht het is zo'n simpel probleem, code is niet nodig maar hier is wat:

we hebben natuurlijk geen glazen bol


En de Code in de .aspx voor het Updatepanel? Daar zal je hoogstwaarschijnlijk met Triggers oid moeten gaan werken. Misschien is het UpdateProgress nog beter geschikt. Kan alleen nu even niet bij de documentatie ervan, maar ook dat moet niet moeilijk zijn.

[ Voor 61% gewijzigd door TeeDee op 13-10-2009 11:59 ]

[IJsbeer]

Het is logisch dat je image pas veranderd nadat de code is uitgevoerd, met of zonder updatepanel. Pas nadat de code is uitgevoerd zal de webserver iets naar de client sturen.

Ligt eraan wat je wilt: alleen een image tonen: OnClientClick van de button gebruiken om een image te laten zien (dus via javascript)
Wil je een soort van progressbar, dat is lastiger. Dan moet je met javascript de status van de berekening uitvragen, dus via een andere thread, met alle risico's van dien. Zou ik mee uitkiijken.

Voorbeeld van heo het kan:http://mattberseth.com/blog/2008/05/aspnet_ajax_progress_bar_contr.html

[TripleQ]

Je moet idd met een updateprogress gaan werken.
Ik los zoiets altijd op de volgende manier op:

code:

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

    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <ProgressTemplate>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/joost.jpg" />
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

en

code:

        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(1000);

        }

Tijdens het uitvoeren van de code in button1click, is nu alles zichtbaar wat je in je updateProgress hebt staan. Daar kan je gewoon labels of images instoppen, zoveel als je wilt!

[Bob_check_]

Ok TripleQ thanks voor de info. Voor latere websites lijkt me dit inderdaad handig.
Maar Ijsbeers commentaar met de OnClientClick() was voldoende
Dit is precies wat ik zocht, de onclientclick, een simpele oplossing waarmee ik nu via javascript de source van een image kan veranderen. Het werkt perfect! Thanks iedereen

[Yoki1985]

Ja maar bij IE zal er geen animatie uitgevoerd worden op die manier, bij FF wel maar IE niet

[Bob_check_]

Hm ok, ik merk ook dat het alleen maar werkt als er een alert in de functie stond.
Na wat googlen merk ik dat dat vaker voorkomt bij javascript, dat met een alert de pagina genoeg tijd heeft om te laden zodat de rest van het script kan uitgevoerd worden.
Ik gebruik trouwens chrome, IE had ik nog niet geprobeerd.
Ik denk dat ik dan toch maar de oplossing van TripleQ ga proberen..

[Bob_check_]

Ok, ik heb de oplossing van TripleQ aan de praat gekregen.
Het probleem is nu dat ik met die Compare functie ook 2 datagridviews vulde.
Maar hij doet nu de hele berekening wel, maar vult vervolgens niet meer de datagridviews..
Komt dit omdat de button nu in de updatepanel zit en de gridviews niet?

[Bob_check_]

Yep dat was zo, sorry voor de vele posts op m'n eigen topic.
Het werkt nu via een goede oplossing. Thanks iedereen!

[IJsbeer]

Bob_check_ schreef op dinsdag 13 oktober 2009 @ 12:54:
Hm ok, ik merk ook dat het alleen maar werkt als er een alert in de functie stond.
Na wat googlen merk ik dat dat vaker voorkomt bij javascript, dat met een alert de pagina genoeg tijd heeft om te laden zodat de rest van het script kan uitgevoerd worden.
Ik gebruik trouwens chrome, IE had ik nog niet geprobeerd.
Ik denk dat ik dan toch maar de oplossing van TripleQ ga proberen..

Euhm, dan zit er wat fout in je js code. Dit moet gewoon mogelijk zijn.

[R4gnax]

Misschien ziet de rest door de bomen het bos niet meer, maar wat is er mis met een webservice die je langlopende proces afhandelt en een stukje clientside javascript code (al dan niet via een library als jQuery, MooTools, etc.) die een loading bar laat zien en die webservice aanroept? Niks geen gezeik met allerlei crappy controls uit de Ajax Control Toolkit. Gewoon simpel en zoals een XmlHttpRequest bedoeld is...