MsCorEE

ModalPopupExtender experiences

I ran into a problem today while working with the ModalPopupExtender.  It was a self imposed problem, but it through me for a loop just the same. I made a confirmation modal window.  I have a need for a user to make a decision when they save something to the database. 

So what I did was create a panel like this:

<asp:Panel id="SamplePanel" CssClass="modal-popup" style='display:none;' runat='server'>

    <table>

        <tr>

            <td class="modal-content">

                <p>

                    This is a message detailing a warning.

                </p>

                <p class="modal-warning">

                    Do you want to proceed with this action?

                </p>

                <asp:button id="YesButton" runat="server" text="Yes" cssclass="modal-button"/>

                <asp:button id="NoButton" runat="server" text="No" cssclass="modal-button"/>

            </td>

        </tr>

    </table>    

</asp:Panel>

This allows the user to choose yes or no, and it sets a hidden form field with this value.  I set up my ModalPopupExtender like this:

<ajax:ModalPopupExtender 

    id="ModalPopupExtender" 

    runat="server" 

    dropshadow="true"

    targetcontrolid="SaveButton" 

    popupcontrolid="SamplePanel" 

    backgroundcssclass="modal-background"

    okcontrolid="YesButton" 

    onokscript="onConfirm()"

    cancelcontrolid="NoButton"

    oncancelscript="onCancel()"/> 

With this I was able to popup my modal window.  I had to craft some javascript for the ok/cancel stuff still.  I did that by registering a script block from the codebehind (Thanks Shannon!).  Here it is:

private void BuildModalScript()
{
    StringBuilder yesScript = new StringBuilder();
    StringBuilder noScript = new StringBuilder();

    yesScript.AppendFormat("function onConfirm(){0}", Environment.NewLine);
    yesScript.Append("{").Append(Environment.NewLine);
    yesScript.AppendFormat("var hidden = $get(\"{0}\");{1}", HiddenField.ClientID, Environment.NewLine);
    yesScript.AppendFormat("hidden.value = \"true\";{0}", Environment.NewLine);
    yesScript.Append(Page.ClientScript.GetPostBackEventReference(SaveButton, String.Empty));
    yesScript.Append("}").Append(Environment.NewLine);

    noScript.AppendFormat("function onCancel(){0}", Environment.NewLine);
    noScript.Append("{").Append(Environment.NewLine);
    noScript.AppendFormat("var hidden = $get(\"{0}\");{1}", HiddenField.ClientID, Environment.NewLine);
    noScript.AppendFormat("hidden.value = \"false\";{0}", Environment.NewLine);
    noScript.Append(Page.ClientScript.GetPostBackEventReference(SaveButton, String.Empty)).Append(Environment.NewLine);
    noScript.Append("}").Append(Environment.NewLine);

    if (!Page.ClientScript.IsClientScriptBlockRegistered("onConfirm"))
        Page.ClientScript.RegisterClientScriptBlock(typeof(_Default), "onConfirm", yesScript.ToString(), true);

    if (!Page.ClientScript.IsClientScriptBlockRegistered("onCancel"))
        Page.ClientScript.RegisterClientScriptBlock(typeof(_Default), "onCancel", noScript.ToString(), true);
}

When I first started this little project, I was used to faking postbacks using the script like this:  __doPostBack(Control.ClientId);   Oddly that works if you set the enableeventvalidation property to true.  However, it doesn't work if your page is part of a masterpage.  The lead architect, Brian, at my new job and I were banging our heads against the wall trying to figure it out.  He knew there was something in .net that handled this but he couldn't think of the name.  I remembered seeing something like postbackreference during my travels through the documentation.  It turned out to be the correct answer.  I guess you could call it a team effort =P  It was really weird the way the problem manifested itself, because I had two different projects, it worked in one and not the other.  Once I made them exactly the same, we could see there was definitely an issue with master pages.  So chalk that one up to experience.

In any case, I now have a nifty modal confirmation dialog.  Here is the project for vs2005 if you want to take a look.