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?

     

    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 runat=server></{0}:JDialog>")]
    14 class JDialog : WebControl
    15 {
    16 public JDialog() {
    17 //this.PreRender += new EventHandler(JDialog_PreRender);
    18 }
    19
    20 [Bindable(true)]
    21 [Category("Appearance")]
    22 [DefaultValue("")]
    23 [Localizable(true)]
    24 public string Skin
    25 {
    26 get
    27 {
    28 String s = (String)ViewState["Skin"];
    29 return ((s == null) ? String.Empty : s);
    30 }
    31
    32 set
    33 {
    34 ViewState["Skin"] = value;
    35 }
    36 }
    37
    38 [Bindable(true)]
    39 [Category("Appearance")]
    40 [DefaultValue("")]
    41 [Localizable(true)]
    42 public string Icon
    43 {
    44 get
    45 {
    46 String s = (String)ViewState["Icon"];
    47 return ((s == null) ? String.Empty : s);
    48 }
    49
    50 set
    51 {
    52 ViewState["Icon"] = value;
    53 }
    54 }
    55
    56 protected override HtmlTextWriterTag TagKey
    57 {
    58 get { return HtmlTextWriterTag.Div; }
    59 }
    60
    61 protected override void RenderContents(HtmlTextWriter writer)
    62 {
    63 writer.Write("&lt;div id=\"jDialog\" style=\"display:inline\"&gt;" +
    64 "&lt;div id=\"icon\" style=\"float:left;margin-right:2em;\"&gt;</div>" +
    65 "&lt;div id=\"message\"&gt;</div>" +
    66 "&lt;br />" +
    67 "&lt;br />" +
    68 "&lt;div id=\"cbDiv\" style=\"display:none\"&gt;<input id=\"cb1\" type=\"checkbox\"/>Do not display this message again</div>" +
    69 "&lt;br />" +
    70 "&lt;br />" +
    71 "&lt;asp:Button ID=\"b1\" runat=\"server\" style=\"display:none\" />" +
    72 "&lt;asp:Button ID=\"b2\" runat=\"server\" style=\"display:none\" />" +
    73 "&lt;asp:Button ID=\"b3\" runat=\"server\" style=\"display:none\" />" +
    74 "&lt;br />" +
    75 "&lt;asp:HiddenField ID=\"dialogResult\" runat=\"server\"&gt;</asp:HiddenField>" +
    76 "&lt;asp:HiddenField ID=\"checkboxInfo\" runat=\"server\"&gt;</asp:HiddenField>" +
    77 "&lt;asp:HiddenField ID=\"postback\" runat=\"server\"&gt;</asp:HiddenField>" +
    78 "&lt;/div>)");
    79 }
    80
    81 protected override void OnPreRender(EventArgs e)
    82 {
    83 string startupScriptKey = "JDialog";
    84 //ScriptManager.RegisterClientScriptInclude(this, typeof(Page), scriptKey, ResolveClientUrl("~/js/Generate.js"));
    85
    86 string startupScript = "function CreateDialog(icon, size, duration, buttons, message, control) {" +
    87 "var NOBUTTON = 1;" +
    88 "$(\"#jDialog\").dialog({ autoOpen: false, modal: true, draggable: false, resizable: false});" +
    89 "$(\"#jDialog\").dialog().parents(\".ui-dialog\").find(\".ui-dialog-titlebar\").remove();" +
    90 "SetIcon(icon); SetSize(size); SetButtons(buttons); if (buttons == NOBUTTON) {SetDuration(duration);}" +
    91 "$(\"#message\").text(message);$(\"#jDialog\").parent().appendTo($(\"form:last\"));$(\"#jDialog\").dialog(\"open\");}" +
    92 "function SetIcon(icon) {switch(icon){case 1: $(\"#icon\addClass(\"ui-icon ui-icon-question\")break;" +
    93 "
    case 2: $(\"#icon\addClass(\"ui-icon ui-icon-alert\");break;case 3: $(\"#icon\").addClass(\"ui-icon ui-icon-alert\"); break;}}" +
    94 "function SetSize(size) {var SMALL = 150;var MEDIUM = 300;var LARGE = 500;" +
    95 "switch(size){case 1: $(\"#jDialog\").dialog(\"option\", \"height\", SMALL);" +
    96 "$(\"#jDialog\").dialog(\"option\", \"width\", SMALL);break;" +
    97 "case 2: $(\"#jDialog\").dialog(\"option\", \"height\", MEDIUM);$(\"#jDialog\").dialog(\"option\", \"width\", MEDIUM);break;" +
    98 "case 3: $(\"#jDialog\").dialog(\"option\", \"height\", LARGE);$(\"#jDialog\").dialog(\"option\", \"width\", LARGE); break;}}" +
    99 "function SetDuration(duration) {var SLOW = \"2000ms\";var MEDIUM = \"1000ms\";var QUICK = \"500ms\";var delay = \"\";switch (duration){" +
    100 "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\");})}" +
    101 "function SetButtons(buttons) {switch (buttons) {case 1: break;case 2: $(\"#b1\").val(\"Yes\");$(\"#b2\").val(\"No\");" +
    102 "$(\"#b1\").show();$(\"#b2\").show();break;case 3: $(\"#b1\").val(\"Ok\");$\b2\").val(\"Cancel\"$(\"#b1\").show();$(\"#b2\").show();break;" +
    103 "
    case 4: $(\"#b1\").val(\"Yes\"$(\"#b2\").val(\"No\");$(\"#b3\").val(\"Cancel\");$(\"#b1\").show();$(,\"#b2\").show();$(\"#b3\").show();break;" +
    104 "
    case 5: $(\"#b1\").val(\"Accept\");$(\"#b2\").val(\"Decline\");$(\"#b1\").show();$(\"#b2\").show() break;} $(\"#cbDiv\").show();}" +
    105 "
    function dialogClick(id) {var YES = 1; var NO = 2;var OK = 3;var CANCEL = 4;var ACCEPT = 5;var DECLINE = 6; var result = \"\";" +
    106 "
    switch ($(id).val()) {case \"Yes\": result = YES; break; case \"No\": result = NO; break; case \"Ok\": result = OK;break;case \"Cancel\": result = CANCEL;" +
    107 "
    break;case \"Accept\": result = ACCEPT;break;case \"Decline\": result = DECLINE;break;}" +
    108 "
    ScriptManager.RegisterStartupScript(this, typeof(JDialog), startupScriptKey, scriptKey, true);";
    109
    110
    111 Page.ClientScript.RegisterStartupScript(typeof(Page), startupScriptKey, startupScript,true);
    112 }
    113 }
    114
     

    Kind Regards

    Cecilia
     


     
     
      
    Friday, May 15, 2009 7:19 AM

Answers

  • User-2106054853 posted

    Hi,

    What I want to do is the following:
    1. Add the dialog to the toolbox

    Please refer to:

    http://dhavalupadhyaya.wordpress.com/2008/07/20/how-to-add-custom-control-in-visual-studio-toolbox/

    2. Render the dialog with its .js file (the js file consists of several methods, it is not just a short code snippet)

    Do you mean .js file or Javascript shown in your code? If you mean .js file you can try RegisterClientScriptResource method, which is used to render embeded resources of the assembly.

    1. Create an ASP.NET Web Application. Name it as RegisterClientScriptResource_lvl_300.
    2. Add a Js file MyJS.js:
     
    var str = "Hello World";

    function

    Test() {

    alert(str);

    }

    3. Set its build action to "Embeded Resource".

     

     

    4. Add following code in AssemblyInfo.cs (You can find it in the Properties folder of the Solution Explorer window)

    [assembly: System.Web.UI.WebResource("RegisterClientScriptResource_lvl_300.MyJS.js", "text/javascript")]

     

    5. Add a class called MyControl.cs into the project. Add following code to the class:
    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.UI.WebControls; namespace RegisterClientScriptResource_lvl_300

    {

    public class MyControl : WebControl

    {

    protected override void OnLoad(EventArgs e)

    {

    base.OnLoad(e);
    this.Page.ClientScript.RegisterClientScriptResource( typeof(MyControl) , "RegisterClientScriptResource_lvl_300.MyJS.js");

     

    Literal l = new Literal();
    l.Text = "<input onclick='Test()' value='click me'/>";

     

    this.Controls.Add(l);

    }

    }

     

     

    public class MyControl2 : WebControl

    {

     

    protected override void OnLoad(EventArgs e)

    {

     

    base.OnLoad(e);

     

    this.Page.ClientScript.RegisterClientScriptResource(
    typeof(MyControl2) ,"RegisterClientScriptResource_lvl_300.MyJS.js");

     

    Literal l = new Literal();

    l.Text =

    "<input onclick='Test()' value='click me'/>";

     

    this.Controls.Add(l);

    }

    }

    }

    6. Add below code to Default.aspx:

    <%

    @ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RegisterClientScriptResource_lvl_300._Default" %>

    <%

    @ Register assembly="RegisterClientScriptResource_lvl_300" namespace="RegisterClientScriptResource_lvl_300" tagprefix="cc1" %>

    <!

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <

    html xmlns="http://www.w3.org/1999/xhtml" >

    <

    head runat="server">

     

    <title></title>

    </

    head>

    <

    body>

     

    <form id="form1" runat="server">

     

    <div>

    Though there are two custom controls on the page we can see the script is added only once.

     

     

    <br/>

     

    <cc1:MyControl ID="MyControl1" runat="server" />

     

    <br />

     

    <cc1:MyControl2 ID="MyControl4" runat="server" />

     

    </div>

     

     

    </form>

    </

    body>

    </

    html>

     

     

     

     

     

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 18, 2009 2:21 AM