Charith's Blog: UserControls

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:400px; height:400px; border:solid 1px #f00; background-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"));
        }
    }
}

Friday, July 30, 2010

How to bubble up an event from usercontrol to parent page(control) (Part 2 - Without Delegates)- Asp.net

Without Delegates
Please use OnBubbleEvent of the page and caste the source (first argument) to required control (in this case a button) and compare Id or you can use object compare

UserControl (Code and Markup)
Markup

<%@ Control Language="C#" 
            AutoEventWireup="true" 
            CodeBehind="WebUserControl.ascx.cs" 
            Inherits="ActiveTest.WebUserControl" %>
<asp:Button runat="server" ID="btnUpdate" Text="Update" />

Code

namespace ActiveTest
{
    public partial class WebUserControl : UserControl
    {
        public string UpdateButton         
        { 
            get { return this.btnUpdate.ID; } 
        }    
    }
 
}

Consuming Page

<%@ Page Language="C#" %>

<%@ Register Src="~/WebUserControl.ascx" TagName="wuc" TagPrefix="active" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script runat="server"> 
        protected override bool OnBubbleEvent(object source, EventArgs args)
        {
            Button btnUpdate = source as Button;
            if (btnUpdate != null && btnUpdate.ID == this.wucTest.UpdateButton)
            {
                ///
                /// Update/ or do any requred actions
                ///
            }
            return base.OnBubbleEvent(source, args);
        }
    </script>
    <script language="javascript" type="text/javascript">
    </script>
</head>
<body>    
    <form id="form1" runat="server">        
        <div>
            <active:wuc runat="server" ID="wucTest" />
        </div>
    </form>
</body>
</html>

Wednesday, September 15, 2010

How to register User Control specific CSS and Java Scripts

Friday, July 30, 2010

How to bubble up an event from usercontrol to parent page(control) (Part 2 - Without Delegates)- Asp.net

Azure Storage Account Types