Jquery Custom Control

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