在ASCX自定义控件中放置CSS规则的地方在哪里？ [英] Where to put CSS rules in ASCX custom control?

问题描述

我是新在ASP.NET工作，但我正在开发一个自定义控件，其中有一个多视图控件显示一堆不同的东西。其中一些是使用JQuery UI元素（如制表符和符号）显示的，这将有相当多的自定义。

由于我将有很多CSS规则，只适用于自定义控件中的元素（而不是我们网站的其余部分）

我通常只是把一个样式表放在网站根目录的某个位置，并从那里引用它。但是当我玩ASP.NET，我得到的感觉，我应该把所有的代码（包括CSS，JS等）在自定义控件本身。这感觉更多的程序性，保持一切。

任何人都可以介绍我应该怎么做？ ASP.NET中的Web开发的最佳做法是什么？

解决方案

如果要创建的控件位于 ，您可以将CSS文件嵌入到程序集中，使其可重用，并从控件创建这些文件的直接链接，然后在您的控制中，您将注册它们以呈现为链接页面中的标签

注意：请记住，您需要在程序集中将CSS文件标记为嵌入资源

只需选择您的文件|然后更改其< em> Build Action 属性，并将其设置为： embedded Resource

在以下代码中：

• AjaxEnabled.Web.UI 代表程序集的命名空间




• DefaultStyle.css 表示嵌入的CSS文件名

以下代码示例显示了所需的步骤：（在您的自定义服务器控件中）

  [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 
）; 
} 
} 
} 
  

您需要添加一个实例

asp：ScriptManager runat =serverID =sm/>


在您的ASPX页面中，您需要标记头 section作为服务器控件

 < head runat =server> 
  
 
 
 
 
 
 
以下代码：
  link.Href = this.Page.ClientScript.GetWebResourceUrl（
 typeof（YourControlType），
AjaxEnabled.Web.UI。 DefaultStyle.css）; 
 
将链接直接呈现到嵌入在程序集中的CSS文件 p> 
 
 
 
 
 
此条件：
  
 ... 
 this.Page.ClientScript.RegisterClientScriptBlock（
 typeof（Page），
）; if（！this.Page.ClientScript.IsClientScriptBlockRegistered（defaultCss）） defaultCss，
 string.Empty 
）; 
  
可确保CSS在页面中仅显示一次，即使您删除了多个实例您的控制
 
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?
解决方案
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

                        
这篇关于在ASCX自定义控件中放置CSS规则的地方在哪里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！