If you’ve never used javascript, then the bit coming may set you back a bit… It certianly took me a few minutes, and alot of google’ing to figure it out. Thickbox is a JQuery add on that is quick and easy, it really is. If you dont have the javascript and the css set up or if you dont know how to do that stuff, try some W3 schools tutorials, they’ll get you up to speed.
In terms of ASP.NET and C#, its very similar to basic html, add the files to the section that imports your other CSS and Javascript. For me, it was quite simple. Here’s where I started.
The Thickbox Code
First I made a simple html page that you can use for the pop up.
Please Wait…
There is a nice loading bar image on the thickbox website if you feel like its something that you want to use. After you’ve got that done, you can begin the beautification of your page with the thickbox. The blow will help you along. Start by wrapping a button in an anchor with its reference to your html page with some thick box options, and add the ‘thickbox’ class to it.
Next, the Button with the thickbox anchor around it.
<a id=”thickboxLinkForButton” runat=”server” href=”thickbox.htm?width=270&height=50&modal=true” class=”thickbox” visible=”false”>
<asp:Button visible=”false” class=”clickMeButton” id=”aButton”
Text=”Click Me” runat=”server”
OnClick=”confirmRemoveAllTasksBtnClick”
UseSubmitBehavior=”false”/>
</a>
When you click that button, your thick box will pull the previos html code from the page, and use the width and height thats specified in the link to draw your thickbox. The last part about UseSubmitBehavior tells the ASP not to rely on the HTML submit but to use the ASP(javascript) to do the submitting.
If your thickbox is supposed to be a modal confirmation box or you want to remove the text that says ‘press Esc’, stick ‘&modal=true’ on the end of the thickbox url.
Closing the Thickbox
Now when I implemented the box, I had intended it to be used as a pop up for when I do a rather large server call. The call I was using required about 10 secconds of server time, so I couldn’t very well use a timer, or something like that, its too tacky, and in my case not reliable. So I needed a way for the box to turn itself off.
This part was easier than I thought…the thickbox js has a tb_remove() function that allows us to remove it. Its that simple. The hard part was figuring out a way for the server to tell the box its ready. I use the ASP.NET SYS functions to allow it to happen.
If only we could grab the page manager and keep track of it some how we could quickly and effectivly know when its ready. But how do we do that?????
Well… Microsoft actually did something right here, with the ‘Sys’ functions in ASP.NET AJAX we can do exactly that.
Sys.WebForms.PageRequestManager.getInstance()
This will allow us to get it and after that, we just add a function onto its endRequest to close the thickbox.
var PageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
PageRequestManager.add_endRequest(
function()
{
tb_remove();
}
);
I know its alot to grab all at once, but we’re ALMOST there……
The Reload
If you stick the thickbox on a page that is going to refresh theres more to do. Javascript does some weird stuff when you do a post back. Because HTML is stateless, when you do a partial postback of an element, if that element has javascript added to it on load, then after the postback, its not going to have the previous methods on it anymore because of the partial reload of the page. This brings us to our final problem.
This final problem was my biggest one. Figuring out how to re-add a method without reloading the whole page. I can’t take the credit for this one, I found it on another blog, similar to this one. I cant remember where I found it, someone knows where it came from, please send me a message so that I can cite my source.
What it does is again, quite elegant. It adds a pageload method into the page load method. As weird as that sounds, its true. It adds in an isAsyncPostback method to the page so that if a postback is called, it re-add’s the method to the methods that used the thickbox.
function pageLoad()
{
var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
if (isAsyncPostback)
{
tb_init(‘a.thickbox, area.thickbox, input.thickbox’);
}
}
In Close
After all that, we have a nice modal box that tells our user that when it pops up, closes on its own after the server has completed all its work.
It was alot more work than I originally thought it would be, but in the end, it was SO worth it.
