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:

Azure Storage Account Types

Defferent Types of Blobs Block blobs store text and binary data. Block blobs are made up of blocks of data that can be managed individually...