Post-back i ASP.NET och jQuery BlockUI plugin

Nyligen så använde jag pluginet BlockUI för jQuery i ett projekt för att dimma sidan och visa upp ett textmeddelande och en inloggningsruta. Det fungerade efter förväntan bortsett från att post-backen för inloggningen som låg i rutan slutade fungera. Konstigt, tänkte jag, och började gräva.

jQuery BlockUI är ett utmärkt litet plugin för att visa ett lager över sajten och en ruta med information ovanpå. Oftast använt som väntmeddelande under tunga sökningar men ibland också som felmeddelande eller som effekt när fokus bara ska läggas på en liten del av sajten. En fördel med pluginet är att det även fungerar i IE6!

Du hittar blockUI här: http://jquery.malsup.com/block

Så till mitt problem med post-backs i rutan

Post-backs är som vi alla vet beroende av att ligga inuti en form-tagg satt till runat=server. Vid implementation hade jag placerat den div som visar mitt inloggningsformulär dolt längst ner inuti form-taggen. Men, det BlockUI gör när lagret ritas upp och rutan visas är att flytta den definierade diven och lägga den utanför form-taggen, vilket gör att post-backen aldrig initieras! Detta är förmodligen ett sätt att få layoutstöd i alla webbläsare men ändå ett problem när man jobbar med ASP.NET.

Min lösning blev tillslut att i onclick för min knapp först dölja lagret (så att pluginet flyttar tillbaka div:en in i form-taggen) och sedan köra post-backen. Kanske inte världens snyggaste lösning men den fungerar!

Här är min kod:

Nyckeln till det hela ligger alltså i att börja med att köra unblockUI och att först efter det trigga knappens post-back. Referensen till post-backen hämtas upp med Page.ClientScript.GetPostBackEventReference.

Johanna Gustafsson
2010-06-18