How to embedded StyleSheet file with custom control? Question has been opened many time on ASP.NET forum.
So in this article, I will try to demonstrate how to achieve this task.
In General
In general, if you want to embedded any thing with custom control, you need first to make its "Build Action" property to be "Embedded Resource", and then you need to add to the custom control assemblies using the <Assembly> attribute typically above class name, and finally you need to register in the page so it can be rendered.
I will illustrate all these things in details through the article.
Step One: make it as Embedded Resource
After you added the StyleSheet file to your Custom Control Class Library project, first thing you need to do is to make build action property for the stylesheet file as embedded resource, otherwise your page will not be able to see the stylesheet file.
To do this, from the VS do a right click on the stylesheet file, and click on Properties, and then change the "Build Action" property to be "Embedded Resource".
Step Two: Add it to the Custom Controls Assemblies
Second thing you need to do is to register the Css file to the custom control assemblies by adding the below code typically above class name
[assembly:
WebResource("YourProjectName.StyleSheetFileName.css",
"text/css")]
namespace
YourNameSpace
{
public class MyCustomControl
: CompositeControl
{
//Custom Control Rest Code
Step Three: Register Css File on the Page
Finally, we have to tell the Page that our custom control has Css file needed
to be registered when the final HTML is generated for that page. So we need to
write a bit of code in the OnInit method.
protected override void
OnInit(EventArgs e)
{
base.OnInit(e);
string css
= "<link href=\"" +
Page.ClientScript.GetWebResourceUrl(this.GetType(),
"YourProjectName.CssFileName.css")
+ "\" type=\"text/css\"
rel=\"stylesheet\" />";
Page.ClientScript.RegisterClientScriptBlock(this.GetType,
"cssFile", css, false);
}
And that's it, you can now use the CSS StyleSheet file within your Custom Control.
I hope some one will found this very helpful.
~ Abdulla AbdelHaq
Sometimes when you write inline code inside Javascript tag or inside style sheet tag within the header of the page just like code 1, the yellow error page will explode in your face telling you that The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Code 1
<%@ Page Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default"
%>
<!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>Inline
Code inside JavaScript</title>
<script type="text/javascript" language="javascript">
function
fnTest()
{
var txt
= document.getElementById("<%=
TextBox1.ClientID %>")
alert(txt.value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
The weird thing is that the error is not occurred each time! I mean if you tried to write the same code in another page it will work and the error will disappear !!
I searched on the Net to find an answer and to know more about this weird thing, and I found a nice blog that talked about this issue
http://www.west-wind.com/weblog/posts/5758.aspx
He posts a solution for the problem, but the funny thing is that he also did not know the main reason for the error. and I found no one know the main reason!
I tried another solution and it worked for me. All I did is I moved the JavaScript tag to the bottom of the page, typically above the close form tag, and the error is gone!
Solution 1
<%@ Page Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default"
%>
<!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>Inline
Code inside JavaScript</title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script type="text/javascript" language="javascript">
function
fnTest()
{
var txt
= document.getElementById("<%=
TextBox1.ClientID %>")
alert(txt.value);
}
</script>
</form>
</body>
</html>
Or you can play around this by registering the JavaScript code from code behind.
Solution 2
Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles Me.Load
Dim
strScript As New
StringBuilder
strScript.Append("function fnTest()")
strScript.Append("{")
strScript.Append("var txt = document.getElementById('")
strScript.Append(Me.TextBox1.ClientID)
strScript.Append("');")
strScript.Append("alert(txt.value);")
strScript.Append("}")
Page.ClientScript.RegisterClientScriptBlock(Me.GetType,
"MyScript", strScript.ToString, True)
End Sub
I really still do not know the error main reason, if anybody know about this then please write it as comment.
I hope someone will found this very helpful.
~ Abdulla AbdelHaq