ASP.NET c# Fix for the OK event of a custom ConfirmMessagebox inside a function library

Question

We made a function that shows a modalpopupmessage dynamically from c# through javascript, it works fine but we wanted to add a parameter so we can pass a function delegate (or event handler) that would be called if the user presses the OK button. Any suggestions?

Postdata: We don't want the typical "confirm you want to press this button" solution but a function to ask confirmation in any part of the process if necessary. Example: User click on delete item button, in codebehind you check the item has some dependency so show a confirmation message with the mensaje function passing the delegate deleteitemconfirmed(), if the user clicks OK call the delegate...

Function in library:

public static void Mensaje(string mensaje, EventHandler EventoClickLLamar, bool botoncancelar, string cssclass, Color colorfondo)
{
    string colorfondox = ColorTranslator.ToHtml(colorfondo);

    string idbotonok = EventoClickLLamar == null ? "" : EventoClickLLamar.Method.Name.Replace("_Click", "");
    string script =
        " function verifyStyle(selector) {" + " \r\n" +
        "   var rules;" + " \r\n" +
        "   var haveRule = false;" + " \r\n" +
        "                 " + " \r\n" +
        "   if (typeof document.styleSheets != \"undefined\") {   //is this supported" + " \r\n" +
        "     var cssSheets = document.styleSheets;" + " \r\n" +
        "     " + " \r\n" +
        "     outerloop:" + " \r\n" +
        "     for (var i = 0; i < cssSheets.length; i++) {" + " \r\n" +
        "         " + " \r\n" +
        "          //using IE or FireFox/Standards Compliant" + " \r\n" +
        "         rules =  (typeof cssSheets[i].cssRules != \"undefined\") ? cssSheets[i].cssRules : cssSheets[i].rules;" +
        " \r\n" +
        "         " + " \r\n" +
        "          for (var j = 0; j < rules.length; j++) {" + " \r\n" +
        "              if (rules[j].selectorText == selector) {" + " \r\n" +
        "                      haveRule = true;" + " \r\n" +
        "                     break outerloop;" + " \r\n" +
        "              }" + " \r\n" +
        "         }//innerloop" + " \r\n" +
        "         " + " \r\n" +
        "     }//outer loop" + " \r\n" +
        "   }//endif" + " \r\n" +
        "   " + " \r\n" +
        "     return haveRule;" + " \r\n" +
        " }//eof" + " \r\n" +

        " function setFading(o, b, e, d, f) {" + " \r\n" +
        " var t = setInterval" + " \r\n" +
        "         (" + " \r\n" +
        "           function () {" + " \r\n" +
        "               b = stepFX(b, e, 2);" + " \r\n" +
        "               setOpacity(o, b / 100);" + " \r\n" +
        "               if (b == e) {" + " \r\n" +
        "                   if (t) { clearInterval(t); t = null; }" + " \r\n" +
        "                   if (typeof f == 'function') { f(); }" + " \r\n" +
        "               }" + " \r\n" +
        "           }" + " \r\n" +
        "         , d / 50);" + " \r\n" +
        " }" + " \r\n" +
        " function setOpacity(e, o) {" + " \r\n" +
        "   // for IE" + " \r\n" +
        "   e.style.filter = 'alpha(opacity=' + o * 100 + ')';" + " \r\n" +
        "   // for others" + " \r\n" +
        "   e.style.opacity = o;" + " \r\n" +
        " }" + " \r\n" +
        " function stepFX(b, e, s) {" + " \r\n" +
        "   return b > e ? b - s > e ? b - s : e : b < e ? b + s < e ? b + s : e : b;" + " \r\n" +
        " }" + " \r\n" +

        " // we may consider adding frames support" + " \r\n" +
        " var w = window;" + " \r\n" +
        " // shortcut to document" + " \r\n" +
        " var d = w.document;" + " \r\n" +
        " // canvas, window width and window height" + " \r\n" +
        " var r = d.documentElement;" + " \r\n" +
        " var ww = w.innerWidth ? w.innerWidth + w.pageXOffset : r.clientWidth + r.scrollLeft;" + " \r\n" +
        " var wh = w.innerHeight ? w.innerHeight + w.pageYOffset : r.clientHeight + r.scrollTop;" + " \r\n" +
        " // create a block element" + " \r\n" +
        " var b = d.createElement('div');" + " \r\n" +
        " b.id = 'Message';" + " \r\n" +
        " b.className = '" + cssclass + "' || '';" + " \r\n" +
        " b.style.cssText = 'top:-9999px;left:-9999px;position:absolute;white-space:nowrap;z-index: 1001;';" +
        " \r\n" +
        " // classname not passed, set defaults" + " \r\n" +
        " if (!verifyStyle(\"." + cssclass + "\")) {" + " \r\n" +
        "   b.style.margin = '0px 0px';" + " \r\n" +
        "   b.style.padding = '8px 8px';" + " \r\n" +
        "   b.style.border = '1px solid #A4BED0';" + " \r\n" +
        "   b.style.backgroundColor = '#E0ECF1';" + " \r\n" +
        " }" + " \r\n" +
        " var bx = d.createElement('div');" + " \r\n" +
        " bx.style.cssText = 'position: absolute;left:0px;top:0px;width:100%;height:100%;text-align:center;z-index: 1000;background-color: " + //va seguido sin salto
        colorfondox + ";opacity:0.5;filter:alpha(opacity=50);'" + " \r\n" +
        " d.body.insertBefore(bx, d.body.firstChild);" + " \r\n" +
        " d.body.insertBefore(b, d.body.firstChild); " + " \r\n" +
        " // write HTML fragment to it  " + " \r\n" +
        " b.innerHTML = '<table><tr><td>" + mensaje + "</td></tr><tr><td align=\"center\">" +

        (string.IsNullOrEmpty(idbotonok)
        ? "<input type=\"submit\" value=\"Aceptar\" onClick=\"disabled=true;setFading(b, 100, 0, 1000, function () { d.body.removeChild(bx); d.body.removeChild(b); });\" >"
        : "<input type=\"submit\" value=\"Aceptar\" onClick=\"__doPostBack(\\'" + idbotonok + "\\',\\'\\')\" id=\"" + idbotonok + "\" >") +

        (botoncancelar
        ? "<input type=\"submit\" value=\"Cancelar\" onClick=\"disabled=true;setFading(b, 100, 0, 1000, function () { d.body.removeChild(bx); d.body.removeChild(b); });\" >"
        : "") +

        "</td></tr></table>';" + " \r\n" +
        " // save width/height before hiding " + " \r\n" +
        " var bw = b.offsetWidth;" + " \r\n" +
        " var bh = b.offsetHeight;" + " \r\n" +
        " // hide, move and then show" + " \r\n" +
        " b.style.display = 'none';" + " \r\n" +
        " b.style.top = (wh / 2 - bh / 2) + 'px'; //center" + " \r\n" +
        " b.style.left = (ww / 2 - bw / 2) + 'px'; //center" + " \r\n" +
        " b.style.display = 'block';" + " \r\n";

    ScriptManager.RegisterClientScriptBlock((Page)HttpContext.Current.Handler, typeof(Page), "mensaje", script, true);
}

Test Page:

public partial class Test: Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    btnDeleteItem_Click(object sender, EventArgs e)
    {
        //DB checks
        ....
        ....
        //After x checks against Database we see the item has some dependency so we ask for confirmation
        FunctionsLibrary.Mensaje("This Item has x dependency, are you sure you want to delete it?", btnDeleteItemConfirmed_Click, true, "cssclassx", System.Drawing.Color.Gray);
    }

    btnDeleteItemConfirmed_Click(object sender, EventArgs e)
    {
        //delete item definitively, handle dependencies etc...
    }
}

Options that we couldnt make work (in case we were on track but something was wrong):

• Case 1: (The one implemented in our example code) Using EventHandler + __doPostBack so if you have the buttonid_click defined in your page it would be called on postback. (The event didnt rise...we suppose it was because we didnt add the Ok control back in the page load...which gives us case 2)

• Case 2: Save the delegate function passed, register event Page.Load+=GetPostBackControlID(), in the following page load GetPostBackControlID() is called, there we check if the control id clicked is our OK button, if so call the delegate function

Answer 1

So you want to talk to the codebehind from the Javascript dialog? The best solution is to use Ajax. Check out how it is done here: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Remember you'll be calling a static method in your codebehind so not all data in the page will be available. You can though for example access the Session object through the HttpCurrent object.

Good luck.