在哪里把CSS规则ASCX自定义控件? [英] Where to put CSS rules in ASCX custom control?

查看:99
本文介绍了在哪里把CSS规则ASCX自定义控件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是新来的ASP.NET工作,但我正在开发一个具有里面多视图控件显示了一堆不同的东西自定义控件。还有一部分是使用类似标签和accordians其中将有相当多的定制JQuery用户界面元素显示。

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.

由于我将有很多只适用于自定义的控制(而不是我们网站的其余部分)内的元素的CSS规则,我不知道放在哪里CSS样式规则。

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.

我通常只是把一个样式表中的某处网站根目录,并从那里引用它。但是当我玩的ASP.NET,我得到了我应该把我所有的code(包括CSS,JS等)自定义控件自身内部的感觉。这种感觉更programmy,藏在心里在一起。

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.

谁能adivse我应该怎么做呢?什么是在ASP.NET?

Can anyone adivse how I should be doing this? What's the best practice for web development in ASP.NET?

推荐答案

如果您正在创建的控制是一个的单独的程序的,你可以嵌入组件内部的CSS文件,从而可以重复使用,在你的页面,从您的控制的创造的直接链接到这些文件,然后在你的控制,你会注册它们呈现为链接标记

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

请注意:请记住,你需要标记的CSS文件在汇编为的嵌入的资源

Note: Remember that you need to mark the CSS file in your assembly as an Embedded Resource

只需选择您的文件|然后proeprties并改变其的生成操作的属性,并将其设置为:嵌入式资源

Just select your file | then proeprties and change its Build Action property and set it to: embedded Resource

在以下code:


  • AjaxEnabled.Web.UI 重新presents程序集的命名空间

  • AjaxEnabled.Web.UI represents the namespace of your assembly

DefaultStyle.css 重新presents嵌入的CSS文件名

DefaultStyle.css represents the embedded CSS file name

以下code样本显示所需的步骤:(在你的自定义服务器控件)

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
                );
            }
        }
    }

您需要添加在你的页面的的ScriptManager 控件的一个实例包含自定义的控件

You need to add an instance of the ScriptManager control in your page containing your custom controls

<asp:ScriptManager runat="server" ID="sm"/>

而在你的ASPX页面,你需要标记部分作为服务器控件

<head runat="server">


以下code:


The following code:

link.Href = this.Page.ClientScript.GetWebResourceUrl(
                typeof(YourControlType),
                "AjaxEnabled.Web.UI.DefaultStyle.css");

渲染链接的直接嵌入在组件中的CSS文件

这条件:

if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss"))
...
this.Page.ClientScript.RegisterClientScriptBlock(
                        typeof(Page),
                        "defaultCss",
                        string.Empty
                    );

确保CSS在网页呈现的只有一次,即使你把你的控制的多个实例

ensures that the CSS is rendered only once in the page, even if you drop more than one instances of your control

这篇关于在哪里把CSS规则ASCX自定义控件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆