Menu
I'm new to working in ASP.NET but I'm developing a custom control that has a multi view control inside it that displays a bunch of different stuff. Some of it is displayed using JQuery UI elements like tabs and accordians which will have quite a bit of customisation.
Since I'm going to have a lot of CSS rules that apply only to the elements inside the custom control (not to the rest of our web site), I'm wondering where to put the CSS style rules.
I'd normally just put a style sheet somewhere in the site root and reference it from there. But as I play around with ASP.NET, I get the feeling that I should be putting all my code (including CSS, JS, etc) inside the custom control itself. This feels more "programmy", keeping everything together.
Can anyone adivse how I should be doing this? What's the best practice for web development in ASP.NET?
589
If the control you are creating is in a separate assembly, you can embed the CSS files inside the assembly to make it reusable and create a direct link to these files from your control, then in your control you will register them to be rendered as link tags in your page
Note: Remember that you need to mark the CSS file in your assembly as an Embedded Resource
Just select your file | then proeprties and change its Build Action property and set it to: embedded Resource
In the following code:
AjaxEnabled.Web.UI represents the namespace of your assembly
DefaultStyle.css represents the embedded CSS file name
The following code sample shows the steps needed: (in your custom server control)
[assembly: WebResource("AjaxEnabled.Web.UI.DefaultStyle.css", "text/css")]
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (this.Page.Header != null)
{
if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss"))
{
var link = new HtmlLink();
link.Href = this.Page.ClientScript.GetWebResourceUrl(
typeof(YourControlType),
"AjaxEnabled.Web.UI.DefaultStyle.css"
);
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("type", "text/css");
this.Page.Header.Controls.Add(link);
this.Page.ClientScript.RegisterClientScriptBlock(
typeof(Page),
"defaultCss",
string.Empty
);
}
}
}
You need to add an instance of the ScriptManager control in your page containing your custom controls
<asp:ScriptManager runat="server" ID="sm"/>
And in your ASPX page you need to mark the header section as a server control
<head runat="server">
The following code:
link.Href = this.Page.ClientScript.GetWebResourceUrl(
typeof(YourControlType),
"AjaxEnabled.Web.UI.DefaultStyle.css");
Renders a link directly to the CSS file embedded in the assembly
This condition:
if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss"))
...
this.Page.ClientScript.RegisterClientScriptBlock(
typeof(Page),
"defaultCss",
string.Empty
);
ensures that the CSS is rendered only once in the page, even if you drop more than one instances of your control
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
