How can I load a panel at click-time with a ModalPopupExtender?

Question

I am creating a checklist, where "checklistitems" are added to a "checklist". Each of the items has a button next to it to launch a modal popup that will contain additional information about the item.

Because there are so many items, I've put the actual panel that will pop up on the "checklist", so it will only be on the web page once. The ModalPopupExtender seems to handle this cross-class popup just fine.

My question is how can I load information into this panel? The "checklistitem" has the data that needs to be passed up into the checklist - and I'd love to accomplish this with an update panel to avoid a full postback.

Answer 1

You can accomplish it via javascript without a postback.

Throw a javascript function into the OnClientClick event of the button and make it look something like this:

MyButton.OnClientClick = "ShowModal(); return false;"

And then in javascript:

function ShowModal()
{
var myDiv = document.getElementById("SomeDivInTheModal");
myDiv.InnerHTML = "<b>Some specal HTML to show in the modal.</b>";
var mpe = $find('MyModalPopUpBehaviorId');

if (mpe) {
mpe.show();
}

}