Using ThickBox with Server-side Buttons

For a while now I've been looking for a jQuery equivalent to the Modal Popup Extender. Two key requirements were:

1. It had to be able to be called from server-side code.
2. The dialog box itself had to have ASP.Net buttons.

The first requirement proved easy, using code like this:

string script = "$(document).ready(function() {tb_show('Sample Title', '#TB_inline?height=120&width=300&inlineId=sampleContent', null);});";
ScriptManager.RegisterStartupScript(Page, typeof(Page), "", script, true);

But the second requirement proved much more difficult. It seemed that no matter which open source dialog box I tried, it would just not allow server-side events to be fired.

Eventually though, through the help of ASP.Net user PNasser, I found a solution! The key was to add a simple Javascript function call to each ASP.Net button in the dialog box:

OnClientClick="doPostBack(this);"

Which then calls this:

function doPostBack(element) {
tb_remove();
setTimeout('__doPostBack(\'' + element.name + '\',\'\')', 500);
}

That's it! What's happening is that first the call is made to the ThickBox to remove itself. This is precisely the same function that's called when you click on "close" in its title bar or press "Esc".


Then a postback is explicitly called via the __doPostBack function. But it isn't called immediately. Instead, it's executed after a 500ms delay. I don't precisely know the reason why the delay is necessary but am guessing that it provides the ThickBox enough time to fade out and dispose of itself. I experimented with the delay time and found on my computer that as low as 300ms worked. Less than that though and a full postback occurred, which is not the effect one wants on an AJAX-enabled page!

I've created a little demonstration project which you can download here.

Calling ThickBox From Server-side Code

I'm actively engaged in replacing as many of the AJAX Control Toolkit components as I can with jQuery Plugin equivalents.

In terms of replacing the Modal Popup Extender, I did a lot of research and have decided to go with ThickBox. It's simple to use, has been around for some time, and appears to be fairly flexible. For ASP.Net developers there are several good articles about using it. This was one of the best.

Everything I read referred to wiring up a ThickBox to either a hyperlink or button. That's fine but I wanted to see if I could access it programatically, so that I could call it from server-side code, just like I do with the Modal Popup Extender.

So I searched through the ThickBox source code and found this:

function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link

And here's how I implemented it with C# code:

string script = "$(document).ready(function() {tb_show('Sample Title', '#TB_inline?height=200
&width=400&inlineId=sampleContent', null);});";
ScriptManager.RegisterStartupScript(Page, typeof(Page), "", script, true);

---

Incidentally, one thing I could not achieve was implementing buttons that called server-side code. When I tested them, the server-side event was not fired. Perhaps someone will figure out a way to do this and leave a comment on here about that.

Using runat="server" with HTML Elements

ASP.Net developers know that in their markup pages they can use a combination of HTML Elements and ASP.Net Controls. The syntax is mildly different but there is one major distinction:

ASP.Net Controls always include the following: runat="server"

Whereas HTML Elements do not. Or at least that's what I thought!

I have a web app that utilizes a left menu to display modules to the user:

It works great, but before the user is logged in, it makes no sense to display it. Up until now I was just hiding the menu itself. This was fine but what was left was the table column behind. This is what it looked like:

What I really needed to do was hide the "td" element that contained the menu. But since it was pure HTML, I didn't think it was possible to access it from the server-side C# code.

How wrong I was! In fact, all I needed to do was add the runat="server" parameter and voila, I could access the element from C# using the "FindControl" method.

Now the entire space devoted to the menu is hidden and it looks much better. Sure it's just a little thing but sometimes those little UI improvements are what's most important to end users.