Wednesday, September 15, 2010

How to register User Control specific CSS and Java Scripts

It is always optimistic to include usercontrol specific CSS and JS files only when the UserControl renders it's contents.
CSS File:
#userControlWrapper { width:400pxheight:400pxborder:solid 1px #f00background-color:#aaa; }
h1.Big { font-size:40px; }
Markup:
<%@ Control Language="C#" 
            AutoEventWireup="true" 
            CodeBehind="WebUserControl.ascx.cs"  
            Inherits="ActiveTest.WebUserControl" %>
<div id="userControlWrapper">
    <h1 class="Big">User Control...</h1>
</div>

I have CSS and JS files in the root of my web projects. If you would like to put then in diffrent folders you should specify the correct path along with the root url. 
 
 Then you can use Literral control to register the css and the ClientScript to register the JS files.
namespace ActiveTest
{
    public partial class WebUserControl : UserControl
    {
        public string RootUrl
        {
            get
            {
                Uri requestUri = Context.Request.Url;
                HttpRequest request = Context.Request;
                string rootUrl = string.Format("{0}{1}{2}{3}{4}",
                    requestUri.Scheme,
                    Uri.SchemeDelimiter,
                    requestUri.Host,
                    requestUri.IsDefaultPort ? string.Empty : string.Format(":{0}", requestUri.Port),
                    request.ApplicationPath);
                return rootUrl.EndsWith("/") ? rootUrl : string.Format("{0}/", rootUrl);
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            string styles = "<link href=\"{0}WebUserControl.css\" rel=\"stylesheet\" type=\"text/css\" />";
            this.Page.Header.Controls.Add(new Literal() { Text = string.Format(styles, this.RootUrl) });
            this.Page.ClientScript.RegisterClientScriptInclude(this.GetType().Name, string.Concat(this.RootUrl, "WebUserControl.js"));
        }
    }
}

No comments:

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...