+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Create ScriptContent from GenericContent (custom control)?

Create ScriptContent from GenericContent (custom control)?

5 posts, 1 answered
  1. bemara57
    bemara57 avatar
    135 posts
    Registered:
    27 Mar 2008
    10 Aug 2010
    Link to this post
    It gets tedious when I want to add Javascript to the page. I have to add a Generic Content to the page, go into the HTML, write out the opening and closing script tags, and then enter my code. It gets even more tedious managing it because I can't see the Javascript code in the page editor because there is no HTML to display.

    So my idea is to create a control inherited from the GenericContent control and apply the open and closing tags during runtime. Not only this, I plan on enabling HTML view only (maybe just use a multiline textbox or use this article http://www.sitefinitywatch.com/blog/09-03-20/Disabling_the_HTML_Edit_Mode_in_RadEditor.aspx). I also want to give the option to either put the Javascript in the head, inline, or the bottom. I am not sure if I still need to inherit the GenericContent, but I would still like to use the sharing feature and have them listed in the Generic Content module section for easy management (maybe put them in a "Scripts" category).

    Below is what I have so far. My question is how (or where) do I stop the text from being rendered on the page so I can handle the placement myself (in the page head, inline, or bottom). Thanks for any help.

    public class ScriptContent : Telerik.Cms.Engine.WebControls.GenericContent, ITextControl
    {
        public enum JsType
        {
            Inline,
            Head,
            Bottom
        }
     
        public JsType JsPlacement
        {
            get;
            set;
        }
     
        #region ITextControl Members
     
        public string Text
        {
            get
            {
                throw new NotImplementedException();
            }
            set
            {
                throw new NotImplementedException();
            }
        }
     
        #endregion
     
     
        public ScriptContent()
        {
            this.JsPlacement = JsType.Inline;
        }
     
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
     
            if (!String.IsNullOrEmpty(this.Text))
            {
                string jsCode = String.Format("<script type=\"text/javascript\">{0}</script>", this.Text);
                switch (this.JsPlacement)
                {
                    case JsType.Inline:
                        this.Controls.Add(new LiteralControl(jsCode));
                        break;
                    case JsType.Head:
                        this.Page.Header.Controls.Add(new LiteralControl(jsCode));
                        break;
                    case JsType.Bottom:
                        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), this.ClientID + "_Script", jsCode, false);
                        break;
                }
            }
        }
    }

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Aug 2010
    Link to this post
    Hello bemara57,

    You could create a control that inherits from SimpleControl. The control should have control designer. In the control designer you can add TextBox ( or another control) where you will enter the content. Inside the control designer you can add field where you will enter the script or path to js file.It could be just a public property - ScriptSrc or something like this. Inside InitializeControls method of your control you can place the logic that will be used for adding the script on a page. Also it is better to use Page.IsStartupScriptRegistered / IsClientScriptBlockRegistered, because if you place two controls that use the same script you do not have to add it twice. You could also create a custom WebUIType editor that will allow you to select a shared content item and place this selector in the ControlDesigner.

    By default GenericContent is added in Render method, so you can override it and control it from there. If you use SimpleControl you have to use Label/Literal control to show the content, so you will be able to control it from InitializeControls.

    Let me know if there are further questions.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  3. bemara57
    bemara57 avatar
    135 posts
    Registered:
    27 Mar 2008
    04 Sep 2010
    Link to this post
    Below is the code I ended up for the control. I hope this helps someone. It also handles CSS code.

    One problem though, my textarea in the ControlDesigner allows carriage returns, but when clicking "I'm done", it strips the line breaks when it populates the textbox property of the control. Any ideas on how to preserve the line breaks? It would make managing the scripts sooo perfect :)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.ComponentModel;
    using Telerik.Cms.Web.UI;
    using Netopia.Common;
     
    namespace Netopia.Sitefinity.GenericContent.WebControls
    {
        public class ScriptContent : CompositeControl
        {
            public enum ScriptType
            {
                Js,
                Css
            }
     
            public enum PlacementType
            {
                Startup,
                Inline,
                Head,
                Top
            }
     
            [Browsable(true),
            Category("Default"),
            WebEditor("Netopia.Sitefinity.GenericContent.WebControls.Admin.ScriptContentSelector")]
            public string Content
            {
                get;
                set;
            }
     
            public string Name
            {
                get;
                set;
            }
     
            public ScriptType Script
            {
                get;
                set;
            }
     
            public PlacementType Placement
            {
                get;
                set;
            }
     
            public ScriptContent()
            {
                this.Name = Guid.NewGuid().ToString();
                this.Script = ScriptType.Js;
                this.Placement = PlacementType.Startup;
            }
     
            protected override void CreateChildControls()
            {
                base.CreateChildControls();
                if (DesignMode)
                {
                    this.Controls.Add(new LiteralControl(String.Format("Script Content, {0}, {1}", this.Placement, this.Script)));
                }
            }
     
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
     
                if (!String.IsNullOrEmpty(this.Content))
                {
                    switch (this.Placement)
                    {
                        case PlacementType.Startup:
                            if (!Page.ClientScript.IsStartupScriptRegistered(this.Name))
                            {
                                Page.ClientScript.RegisterStartupScript(Page.GetType(), this.Name, Environment.NewLine + this.Content + Environment.NewLine, true);
                            }
                            break;
                        case PlacementType.Inline:
                            this.Controls.Add(new LiteralControl(String.Format((this.Script == ScriptType.Js ? Consts.JS_TAG : Consts.CSS_TAG), Environment.NewLine + this.Content + Environment.NewLine)));
                            break;
                        case PlacementType.Head:
                            Page.Header.Controls.Add(new LiteralControl(String.Format((this.Script == ScriptType.Js ? Consts.JS_TAG : Consts.CSS_TAG), Environment.NewLine + this.Content + Environment.NewLine)));
                            break;
                        case PlacementType.Top:
                            if (!Page.ClientScript.IsClientScriptBlockRegistered(this.Name))
                            {
                                Page.ClientScript.RegisterClientScriptBlock(typeof(ScriptContent), this.Name, Environment.NewLine + this.Content + Environment.NewLine, true);
                            }
                            break;
                    }
                }
            }
        }
    }

  4. bemara57
    bemara57 avatar
    135 posts
    Registered:
    27 Mar 2008
    04 Sep 2010
    Link to this post
    I forgot to mention I added screenshots to my last post about the line break problem.
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    06 Sep 2010
    Link to this post
    Hi bemara57,

    This is a TextBox and you should use a HTML editor - WYSIWYG  that returns the HTML tags in the property text box or editable Iframe, otherwise you get a plain HTML ( like in notepad);

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
5 posts, 1 answered