locked
Web Custom Control and Embedded Stylesheet RRS feed

  • Question

  • User1410796826 posted

    I am trying to make a Web Custom Control and am very new to the subject (though not new to .Net).  I am trying to convert and better organize some classic ASP into ASP.Net.  The code I'm trying to convert is an #include file so I was trying to put it into a Web Custom Control so I could have UI elements, codebehind, and an associated stylesheet as all three of these things were in spaghetti code fashion in the classic ASP #include file.  First I have my project file.  But this is a smaller project in what is going to be a much larger project so I have a "Common Class Library" project that I created so I can get the dll files for including and referencing common functionality across all the projects.  I have put this Custom Control into this Class Library project.  I added a stylesheet to the CustomClassLibrary project (HorizontalMenuStyles.css).  I also have my WebControl, HorizontalMenu.cs.  Now I have tried to follow the tutorials I have found and I have managed to supposedly embed the stylesheet into the custom control, but it does not render the styles even at runtime, so I know I'm doing something wrong.

    I have the stylesheet set as Embedded Resource, and the custom control is set as Compile.

    I have this line of code as the last line in my CommonClassLibrary project's AssemblyInfo.cs file:

    [assembly: WebResource("CommonClassLibrary.HorizontalMenuStyles.css", "text/css")]


    I have this code in my CustomControl, for the embedding and for just some sample text to try and get some results.

    		protected override void RenderContents(HtmlTextWriter output)
    		{
    			this.EnableViewState = false;
    
    			// Build our control
    			if (this.Visible == true)
    			{
    				BuildHorizontalMenu(output);
    			}
    		}
    
    		protected void BuildHorizontalMenu(HtmlTextWriter output)
    		{
    			output.Write("Heya");
    		}
    
    		protected override void OnPreRender(EventArgs e)
    		{
    			// Add our css file to our custom control
    			string cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "CommonClassLibrary.HorizontalMenu.css");
    			HtmlLink cssLink = new HtmlLink();
    			cssLink.Href = cssUrl;
    			cssLink.Attributes.Add("rel", "stylesheet");
    			cssLink.Attributes.Add("type", "text/css");
    			this.Page.Header.Controls.Add(cssLink);
    
    			// Add class name 
    			this.CssClass = "HorizontalMenu";
    			
    			base.OnPreRender(e);
    		}
    	}
    


    My stylesheet contains only this code:

    body
    {
    	font-family: Cursive;
    	background-color: Black;
    	background-image : url(/portal/Images/bkgo.gif);
    	background-repeat : no-repeat;
    }
    


    Finally in my main project (Not the CommonClassProject), I have an aspx page that has a master page associated with it.  I'm dragging the control from the toolbox to this content area on this page (This project does have a reference to the CommonClassLibrary, they're both in the same solution).

    When I run the project, I don't get any errors, but all I get is a white background with the black text, in generic font.  The HTML code that is produced when I run this from within Visual Studio.Net is this:

    <!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><title>
    	Untitled Page
    </title>
        <!--<link href="portalStyles.css" rel="stylesheet" type="text/css" /><link href="/portal/css/Header_Styles.css" rel="stylesheet" type="text/css" /><link href="/portal/css/Plans.css" rel="stylesheet" type="text/css" /><link href="/portal/css/Portal.css" rel="stylesheet" type="text/css" />-->
    <link href="/Procurement/WebResource.axd?d=DpN-2MJv97PNctWTF_Qujd-vlwWO97TwVFJ-DE2Xu0zEVHELKKzMdlmZFnUwNl1yRvelJKmhfZtB-4nAG2JFQg2&t=633863696122812500" rel="stylesheet" type="text/css" /></head>
    <body>
        <form name="aspnetForm" method="post" action="ProcMain.aspx" id="aspnetForm">
    <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2OTY2MDI3NDAPZBYCZg9kFgICAw9kFgICAQ9kFgICAQ8PFgQeCENzc0NsYXNzBQ5Ib3Jpem9udGFsTWVudR4EXyFTQgICZGRkyS2qlRgg+GDJbXkbsY+khfn9lPw=" />
    </div>
    
        <div>
            
         <span id="ctl00_ContentPlaceHolder1_HorizontalMenu1" class="HorizontalMenu">Heya</span>
        
        
    
        </div>
        </form>
    </body>
    </html>
    


     

    The stylesheet I'm embedding is there in the code but it's like it's not seeing it... It almost makes me think that the reference is wrong, that it's point to the wrong place or something but I don't know how to fix it.  Googling the issue only gives me stuff about the rendering not showing up at design time.  I'm good with it not showing up at design time if it would at least show up at run time... any suggestions?

    Thursday, August 20, 2009 1:56 PM

Answers

  • User1282917655 posted

    Make sure that you are registering the Css file to custom control assembly by adding the below typically abov class name

    <Assembly: WebResource("YourNameSpace.StyleSheetFileName.css", "text/css")> _ 


    and try this code

    protected override void OnInit(EventArgs e) 
    { 
        base.OnInit(e); 
        
        string css = "<link href=\"" + Page.ClientScript.GetWebResourceUrl(this.GetType(), "YourCompleteNameSpace.CssFileName.css") + "\" type=\"text/css\" rel=\"stylesheet\" />"; 
        
            
            
        Page.ClientScript.RegisterClientScriptBlock(this.GetType, "cssFile", css, false); 
    } 


    Most important this is that make sure you are typing the right namespace before the stylehseet file name, it should be started with the ProjectName.YourNameSpace.FileName.css


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 21, 2009 4:10 PM

All replies

  • User1282917655 posted

    well try to embbeded the style in the on_init event

    read this artilce that I wrote about creating custom control, I illustrate how to embeded javascript files with custom control.

    http://aspalliance.com/1669_Creating_MultiLanguage_Custom_Control

    Friday, August 21, 2009 5:32 AM
  • User1410796826 posted

     I tried to change the function from prerender to oninit with the code I had but it didn't seem to do anything different.  The stylesheet was still there in the header but it wasn't applying even the most basic style of background-color.  I looked at the article and tried to register my stylesheet that way but it kept wanting to register it as a javascript file instead of css, so I'm guessing that method is for js files only.

    Friday, August 21, 2009 10:36 AM
  • User1282917655 posted

    Make sure that you are registering the Css file to custom control assembly by adding the below typically abov class name

    <Assembly: WebResource("YourNameSpace.StyleSheetFileName.css", "text/css")> _ 


    and try this code

    protected override void OnInit(EventArgs e) 
    { 
        base.OnInit(e); 
        
        string css = "<link href=\"" + Page.ClientScript.GetWebResourceUrl(this.GetType(), "YourCompleteNameSpace.CssFileName.css") + "\" type=\"text/css\" rel=\"stylesheet\" />"; 
        
            
            
        Page.ClientScript.RegisterClientScriptBlock(this.GetType, "cssFile", css, false); 
    } 


    Most important this is that make sure you are typing the right namespace before the stylehseet file name, it should be started with the ProjectName.YourNameSpace.FileName.css


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 21, 2009 4:10 PM
  • User1410796826 posted

     This got it working!  thanks.

    Tuesday, August 25, 2009 12:51 PM
  • User1361720322 posted

    Hi

    I'm having the same problem with embedding a stylesheet.  I've done everything correctly as far as I can see.  The <link> exists and points to WebResource.axd etc... but there's no styling occurring whatsoever.

    My assemblyInfo:-

     

    [assembly: WebResource("CF.WebControls.infobar.css", "text/css")]
    [assembly: WebResource("CF.WebControls.booking.gif", "image/gif")]

     

    My server control code:

    using System;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    
    namespace CF.WebControls
    {
        public class Infobar : Control
        {
            private int numberofitems = 4;
            private string xmlfeedurl = "";
    
            // get/set methods for item count
            public virtual int NumberOfItems
            {
                get
                {
                    return numberofitems;
                }
                set
                {
                    numberofitems = value;
                }
            }
    
            // get/set methods for xml feed
            public virtual string XMLFeedURL
            {
                get
                {
                    return xmlfeedurl;
                }
                set
                {
                    xmlfeedurl = value;
                }
            }
    
            protected override void OnInit(EventArgs e)
            {
    			base.OnInit(e);
    			string css = "<link href=\"" + Page.ClientScript.GetWebResourceUrl(this.GetType(), "CF.WebControls.infobar.css") + "\" type=\"text/css\" rel=\"stylesheet\" />";
    			Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "cssFile", css, false);
            }
    
    
            // rendering method
            protected override void Render(HtmlTextWriter writer)
            {
                ClientScriptManager cs = Page.ClientScript;
                Type rsType = this.GetType();
    
                writer.Write("<div class=\"boxHeader\">");
    
                Image imgBooking = new Image();
    			imgBooking.ImageUrl = cs.GetWebResourceUrl(rsType, "CF.WebControls.booking.gif");
    			imgBooking.RenderControl(writer);
    
                int items = this.numberofitems;
                for (int i = 0; i < items; i++)
                {
                    writer.Write("ITEM:" + i.ToString() + "<br/>");
                }
                writer.Write("</div>");
            }
    
        }
    }



    Any ideas?  I can't understand what's happening!

    Monday, October 5, 2009 9:52 AM