Add JavaScript & CSS in UserControl RSS

• • Reply
  

  kallol_05

  Member

  1 Points

  20 Posts

  Add JavaScript & CSS in UserControl

  Dec 31, 2008 10:53 AM|LINK

  I Have created one user control. Now i want to add JavaScript and CSS to that particular file but it not happening in normal way. How can i add those JavaScript & CSS files to that User Control file?

  asp.net 2.0 C#

• • Reply
  

  lspence

  Star

  11493 Points

  1707 Posts

  Re: Add JavaScript & CSS in UserControl

  Dec 31, 2008 01:45 PM|LINK

  You can still add them as you normally would. Here's a very simple example.
  

  WebUserControl.ascx 

  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
  
  <link href="Layout.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
      function SubmitConfirm() {
          return confirm('Are you sure?');
      }  
  </script>
  <div id="container">
      <asp:Label ID="Label1" runat="server" Text="Name: "></asp:Label>
      <asp:TextBox ID="TextBox2" CssClass="InputFormat" runat="server"></asp:TextBox><br />
      <asp:Label ID="Label2" runat="server" Text="Address: "></asp:Label>
      <asp:TextBox ID="TextBox1" CssClass="InputFormat" runat="server"></asp:TextBox><br />
      <asp:Label ID="Label3" runat="server" Text="City: "></asp:Label>
      <asp:TextBox ID="TextBox3" CssClass="InputFormat" runat="server"></asp:TextBox><br />
      <asp:Label ID="Label4" runat="server" Text="State: "></asp:Label>
      <asp:TextBox ID="TextBox4" CssClass="InputFormat" runat="server"></asp:TextBox><br />
      <asp:Label ID="Label5" runat="server" Text="Zip Code: "></asp:Label>
      <asp:TextBox ID="TextBox5" CssClass="InputFormat" runat="server"></asp:TextBox><br /><br />
      <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="SubmitConfirm()" />
  </div> 
  

  Layout.css 
  #container
  {
  	color: Blue;
  	vertical-align: text-top;
  	text-align: center;
  } 
  .InputFormat
  {
  	background-color: Orange;
  }
  Default.aspx 
  <div>
          <uc1:WebUserControl ID="WebUserControl1" runat="server" />
  </div>
    

    
  My Blog
  http://Lspence.blogspot.com
  
  (Please MARK this post as ANSWERED, if you find it helpful)
  • Marked as answer by Bober Song - MSFT on Jan 06, 2009 07:48 AM
• • Reply
  

  BryianTan

  Contributor

  5626 Points

  1083 Posts

  Re: Add JavaScript & CSS in UserControl

  Dec 31, 2008 02:53 PM|LINK

   hello,

  I found this interesting and decide to share the hurdle I encountered during design/development. There are some situation in which we might have to place the usercontrol and css files in a seperate folder. For instance, we might place all the .ascx files in one folder and all the .css files in one folder. With that being said, the css will render correctly during the design time(nice colors/fonts/...) but it might not render correctly during the runtime (something to do with the path).

  Here is what I normally do:

  Place a literal control in the usercontrol page and insert the css link
  

  <asp:Literal ID="Literal1" runat="server">
  <link href="../css/Layout.css" rel="stylesheet" type="text/css" />
  </asp:Literal>

  then on page_load

  protected void Page_Load(object sender, EventArgs e)
      {
          string _cssPath;
          _cssPath = System.Web.HttpContext.Current.Request.ApplicationPath + "/css/Layout.css";
  
          Literal1.Text = "<link href='" + _cssPath + "' rel='stylesheet' type='text/css' />";
  
      }

  and this method work with JavaScript as well.
  

  Bryian Tan
  MCP, MCAD, MCTS
  My blog...
  • Marked as answer by Bober Song - MSFT on Jan 06, 2009 07:51 AM
• • Reply
  

  imran_ku07

  All-Star

  45815 Points

  7698 Posts

  MVP

  Re: Add JavaScript & CSS in UserControl

  Jan 01, 2009 05:40 AM|LINK

  At every Post back add in PAgeload
  

  if (!Page.ClientScript.IsClientScriptIncludeRegistered("calculate"))
                      Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "calculate", "Calculate.js");
  

  "And whoever is removed away from the Fire and admitted to Paradise, he indeed is successful." (The Holy Quran)
  Excellent Windows VPS Hosting
  Imran Baloch MVP, MVB, MCP, MCTS, MCPD
  • Marked as answer by Bober Song - MSFT on Jan 06, 2009 07:49 AM
• • Reply
  

  RickNZ

  Contributor

  5233 Points

  880 Posts

  Re: Add JavaScript & CSS in UserControl

  Jan 01, 2009 08:11 AM|LINK

  BryianTan,

  There is an ASP.NET function called ResolveUrl that does something similar (very useful when switching between Cassini and IIS).  Example:

   

  <script type="text/javascript" src="<%= ResolveUrl("~/scripts/page.js") %>"></script>

    
  Check out my book:
  Ultra-Fast ASP.NET: Build Ultra-Fast and Ultra-Scalable web sites using ASP.NET and SQL Server
  My blog: http://www.12knowmore.com
  
  • Edited by RickNZ on Jan 01, 2009 08:13 AM
  • Marked as answer by Bober Song - MSFT on Jan 06, 2009 07:49 AM