locked
Jquery Custom Control RRS feed

  • Question

  • User-634781587 posted

    Hi,

    I have developed a dialog in jquery and I now want to implement the dialog as a custom control in my .net web app. The dialog popup is triggered by a asp:button click but does not post back to the server until one of the dialog buttons have been clicked.

    What I want to do is the following:
    1. Add the dialog to the toolbox
    2. Render the dialog with its .js file (the js file consists of several methods, it is not just a short code snippet)

    I have read a number of tutorials and blogs on implementing custom controls but cannot get it to work with the ScriptManager/ClientScriptManager methods. Can someone help me please?

     

    Custom Control Implementation:

    1    using System;
    2 using System.Collections.Generic;
    3 using System.Linq;
    4 using System.Text;
    5 using System.Web;
    6 using System.Web.UI;
    7 using System.Web.UI.WebControls;
    8 using System.ComponentModel;
    9
    10
    11 namespace UserInterface
    12 {
    13 [ToolboxData("&lt;{0}:JDialog></{0}:JDialog>")]
    14 class JDialog : WebControl
    15 {
    16 public JDialog() {
    17 this.PreRender += new EventHandler(JDialog_PreRender);
    18 }
    19
    20
    21 protected override HtmlTextWriterTag TagKey
    22 {
    23 get { return HtmlTextWriterTag.Div; }
    24 }
    25
    26 protected override void RenderContents(HtmlTextWriter writer)
    27 {
    28 writer.Write("&lt;div id=\"jDialog\" style=\"display:inline\"&gt;" +
    29 "&lt;div id=\"icon\" style=\"float:left;margin-right:2em;\"&gt;</div>" +
    30 "&lt;div id=\"message\"&gt;</div>" +
    31 "&lt;br />" +
    32 "&lt;br />" +
    33 "&lt;div id=\"cbDiv\" style=\"display:none\"&gt;<input id=\"cb1\" type=\"checkbox\"/>Do not display this message again</div>" +
    34 "&lt;br />" +
    35 "&lt;br />" +
    36 "&lt;asp:Button ID=\"b1\" runat=\"server\" style=\"display:none\" />" +
    37 "&lt;asp:Button ID=\"b2\" runat=\"server\" style=\"display:none\" />" +
    38 "&lt;asp:Button ID=\"b3\" runat=\"server\" style=\"display:none\" />" +
    39 "&lt;br />" +
    40 "&lt;asp:HiddenField ID=\"dialogResult\" runat=\"server\"&gt;</asp:HiddenField>" +
    41 "&lt;asp:HiddenField ID=\"checkboxInfo\" runat=\"server\"&gt;</asp:HiddenField>" +
    42 "&lt;asp:HiddenField ID=\"postback\" runat=\"server\"&gt;</asp:HiddenField>" +
    43 "&lt;/div>)");
    44 }
    45
    46 private void JDialog_PreRender(object sender, EventArgs e) {
    47
    48 string startupScriptKey = "JDialog";
    49 //ScriptManager.RegisterClientScriptInclude(this, typeof(Page), scriptKey, ResolveClientUrl("~/js/Generate.js"));
    50
    51 string startupScript = "function CreateDialog(icon, size, duration, buttons, message, control) {" +
    52 "var NOBUTTON = 1;" +
    53 "$(\"#jDialog\").dialog({ autoOpen: false, modal: true, draggable: false, resizable: false});" +
    54 "$(\"#jDialog\").dialog().parents(\".ui-dialog\").find(\".ui-dialog-titlebar\").remove();" +
    55 "SetIcon(icon); SetSize(size); SetButtons(buttons); if (buttons == NOBUTTON) {SetDuration(duration);}" +
    56 "$(\"#message\").text(message);$(\"#jDialog\").parent().appendTo($(\"form:last\"));$(\"#jDialog\").dialog(\"open\");}" +
    57 "function SetIcon(icon) {switch(icon){case 1: $(\"#icon\addClass(\"ui-icon ui-icon-question\")break;" +
    58 "
    case 2: $(\"#icon\addClass(\"ui-icon ui-icon-alert\");break;case 3: $(\"#icon\").addClass(\"ui-icon ui-icon-alert\"); break;}}" +
    59 "function SetSize(size) {var SMALL = 150;var MEDIUM = 300;var LARGE = 500;" +
    60 "switch(size){case 1: $(\"#jDialog\").dialog(\"option\", \"height\", SMALL);" +
    61 "$(\"#jDialog\").dialog(\"option\", \"width\", SMALL);break;" +
    62 "case 2: $(\"#jDialog\").dialog(\"option\", \"height\", MEDIUM);$(\"#jDialog\").dialog(\"option\", \"width\", MEDIUM);break;" +
    63 "case 3: $(\"#jDialog\").dialog(\"option\", \"height\", LARGE);$(\"#jDialog\").dialog(\"option\", \"width\", LARGE); break;}}" +
    64 "function SetDuration(duration) {var SLOW = \"2000ms\";var MEDIUM = \"1000ms\";var QUICK = \"500ms\";var delay = \"\";switch (duration){" +
    65 "case 1: delay = SLOW; break;case 2: delay = MEDIUM;break;case 3: delay = QUICK;break;case 4: break;}$(\"#jDialog\").oneTime(delay, function() {$(\"#jDialog\".dialog(\"close\");})}" +
    66 "function SetButtons(buttons) {switch (buttons) {case 1: break;case 2: $(\"#b1\").val(\"Yes\");$(\"#b2\").val(\"No\");" +
    67 "$(\"#b1\").show();$(\"#b2\").show();break;case 3: $(\"#b1\").val(\"Ok\");$\b2\").val(\"Cancel\"$(\"#b1\").show();$(\"#b2\").show();break;" +
    68 "
    case 4: $(\"#b1\").val(\"Yes\"$(\"#b2\").val(\"No\");$(\"#b3\").val(\"Cancel\");$(\"#b1\").show();$(,\"#b2\").show();$(\"#b3\").show();break;" +
    69 "
    case 5: $(\"#b1\").val(\"Accept\");$(\"#b2\").val(\"Decline\");$(\"#b1\").show();$(\"#b2\").show() break;} $(\"#cbDiv\").show();}" +
    70 "
    function dialogClick(id) {var YES = 1; var NO = 2;var OK = 3;var CANCEL = 4;var ACCEPT = 5;var DECLINE = 6; var result = \"\";" +
    71 "
    switch ($(id).val()) {case \"Yes\": result = YES; break; case \"No\": result = NO; break; case \"Ok\": result = OK;break;case \"Cancel\": result = CANCEL;" +
    72 "
    break;case \"Accept\": result = ACCEPT;break;case \"Decline\": result = DECLINE;break;}" +
    73 "
    ScriptManager.RegisterStartupScript(this, typeof(JDialog), startupScriptKey, scriptKey, true);";
    74
    75
    76
    77 ScriptManager.RegisterStartupScript(this, typeof(JDialog), startupScriptKey, startupScript, true);
    78
    79 }
    80 }
    81 }
    82
      

     

     The html for the dialog:

    1    <div id="jDialog" style="display:inline">
    2 <div id="icon" style="float:left;margin-right:2em;"></div>
    3 <div id="message"></div>
    4 <div id="cbDiv" style="display:none"><input id="cb1" type="checkbox"/>Do not display this message again</div>
    5 <asp:Button ID="b1" runat="server" style="display:none" />
    6 <asp:Button ID="b2" runat="server" style="display:none" />
    7 <asp:Button ID="b3" runat="server" style="display:none" />
    8 <asp:HiddenField ID="dialogResult" runat="server"></asp:HiddenField>
    9 <asp:HiddenField ID="checkboxInfo" runat="server"></asp:HiddenField>
    10 <asp:HiddenField ID="postback" runat="server"></asp:HiddenField>
    11 </div>
     
    The js file:
    1    function CreateDialog(icon, size, duration, buttons, message, control) {
    2
    3 var NOBUTTON = 1;
    4
    5 $("#jDialog").dialog({
    6 autoOpen: false,
    7 modal: true,
    8 draggable: false,
    9 resizable: false
    10 });
    11
    12 $("#jDialog").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
    13
    14 SetIcon(icon);
    15 SetSize(size);
    16 SetButtons(buttons);
    17 if (buttons == NOBUTTON) {
    18 SetDuration(duration);
    19 }
    20
    21 $("#message").text(message);
    22 $("#jDialog").parent().appendTo($("form:last"));
    23 $("#jDialog").dialog("open");
    24 }
    25
    26 function SetIcon(icon) {
    27
    28 switch(icon)
    29 {
    30 case 1: $("#icon").addClass("ui-icon ui-icon-question");
    31 break;
    32 case 2: $("#icon").addClass("ui-icon ui-icon-alert");
    33 break;
    34 case 3: $("#icon").addClass("ui-icon ui-icon-alert"); //red alert
    35 break;
    36 }
    37 }
    38
    39 function SetSize(size) {
    40
    41 var SMALL = 150;
    42 var MEDIUM = 300;
    43 var LARGE = 500;
    44
    45 switch(size)
    46 {
    47 case 1: $("#jDialog").dialog("option", "height", SMALL);
    48 $("#jDialog").dialog("option", "width", SMALL);
    49 break;
    50 case 2: $("#jDialog").dialog("option", "height", MEDIUM);
    51 $("#jDialog").dialog("option", "width", MEDIUM);
    52 break;
    53 case 3: $("#jDialog").dialog("option", "height", LARGE);
    54 $("#jDialog").dialog("option", "width", LARGE);
    55 break;
    56 }
    57 }
    58
    59 function SetDuration(duration) {
    60
    61 var SLOW = "2000ms";
    62 var MEDIUM = "1000ms";
    63 var QUICK = "500ms";
    64
    65 var delay = "";
    66
    67 switch (duration) {
    68 case 1: delay = SLOW;
    69 break;
    70 case 2: delay = MEDIUM;
    71 break;
    72 case 3: delay = QUICK;
    73 break
    74 case 4:
    75 break;
    76 }
    77
    78 $("#jDialog").oneTime(delay, function() {
    79 $("#jDialog").dialog("close");
    80 });
    81 }
    82
    83
    84 function SetButtons(buttons) {
    85
    86 switch (buttons) {
    87 case 1: break;
    88 case 2: $("#b1").val("Yes");
    89 $("#b2").val("No");
    90 $("#b1").show();
    91 $("#b2").show();
    92 break;
    93 case 3: $("#b1").val("Ok");
    94 $("#b2").val("Cancel");
    95 $("#b1").show();
    96 $("#b2").show();
    97 break;
    98 case 4: $("#b1").val("Yes");
    99 $("#b2").val("No");
    100 $("#b3").val("Cancel");
    101 $("#b1").show();
    102 $("#b2").show();
    103 $("#b3").show();
    104 break;
    105 case 5: $("#b1").val("Accept");
    106 $("#b2").val("Decline");
    107 $("#b1").show();
    108 $("#b2").show();
    109 break;
    110 }
    111
    112 $("#cbDiv").show();
    113 }
    114
    115
    116 function dialogClick(id) {
    117
    118 var YES = 1;
    119 var NO = 2;
    120 var OK = 3;
    121 var CANCEL = 4;
    122 var ACCEPT = 5;
    123 var DECLINE = 6;
    124
    125 var result = "";
    126
    127 switch ($(id).val()) {
    128 case "Yes": result = YES;
    129 break;
    130 case "No": result = NO;
    131 break;
    132 case "Ok": result = OK;
    133 break;
    134 case "Cancel": result = CANCEL;
    135 break;
    136 case "Accept": result = ACCEPT;
    137 break;
    138 case "Decline": result = DECLINE;
    139 break;
    140 }
    141
    142 $("#dialogResult").val(result);
    143 $("#checkboxInfo").val($("#cb1").attr("checked"));
    144 $("#jDialog").dialog("close");
    145 eval($("#postback").val());
    146 }
    147
    148
    149
    150
    151
    152
     
    Kind Regards

    Cecilia

     

     

    Friday, May 15, 2009 3:05 AM

Answers