c# から javascript を介して modalpopupmessage を動的に表示する関数を作成しました。正常に動作しますが、パラメーターを追加して、ユーザーが [OK] ボタンを押した場合に呼び出される関数デリゲート (またはイベント ハンドラー) を渡すことができるようにしたいと考えました。助言がありますか？
Postdata: 典型的な「このボタンを押すかどうかを確認する」ソリューションではなく、必要に応じてプロセスの任意の部分で確認を求める機能が必要です。例: ユーザーがアイテムの削除ボタンをクリックすると、分離コードでアイテムに何らかの依存関係があることを確認して、デリゲート deleteitemconfirmed() を渡す mensaje 関数で確認メッセージを表示します。ユーザーが [OK] をクリックすると、デリゲートを呼び出します...
ライブラリ内の関数:
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);
}
テストページ:
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...
}
}
機能しなかったオプション (順調に進んでいたが何かが間違っていた場合):
ケース 1: (サンプル コードで実装されているもの) EventHandler + __doPostBack を使用するため、ページに buttonid_click が定義されている場合、ポストバックで呼び出されます。(イベントは発生しませんでした...これは、ページの読み込み時に Ok コントロールを追加しなかったためだと思います...ケース 2 になります)
ケース 2: 渡されたデリゲート関数を保存し、イベント Page.Load+=GetPostBackControlID() を登録します。次のページ ロードで GetPostBackControlID() が呼び出され、クリックされたコントロール ID が [OK] ボタンであるかどうかを確認し、そうであればデリゲート関数を呼び出します。