C# 在自定义控件中为新的Umbraco数据类型注册JavaScript/CSS

我正在根据Tim的博客文章为Umbraco开发一种自定义数据类型：

我已经让它大部分工作，但我需要包括一个彩盒(http://colorpowered.com/colorbox/)我的一个显示器。这需要jQuery、jQuery的colorbox和一个带有一组图像的colorbox.css。因为它是一个自定义控件，所以我不能将项目放到目录中并链接到它们。我的控件称为DoctypeSelector，下面是它现在的代码：

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using System.Web.UI;

[assembly: System.Web.UI.WebResource("DocTypeSelector.Styles.colorbox.css", "text/css")]
[assembly: System.Web.UI.WebResource("DocTypeSelector.Scripts.jquery.colorbox-min.js", "text/js")]
[assembly: System.Web.UI.WebResource("DocTypeSelector.Control.DoctypeSelector.js", "text/js")]
namespace DocTypeSelector
{
    public class DoctypeSelectorControl : Panel
    {
        private HyperLink lnkSelector;

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        if (lnkSelector == null)
                {
                    lnkSelector = new HyperLink();
        }

        lnkSelector.Text = "Select...";
        lnkSelector.NavigateUrl = "#";
        lnkSelector.CssClass = "selectTool";

        System.Web.UI.HtmlControls.HtmlLink cssLink = new System.Web.UI.HtmlControls.HtmlLink();
        cssLink.Href = cssLink.Href = Page.ClientScript.GetWebResourceUrl(this.GetType(),"DocTypeSelector.Styles.colorbox.css");

            cssLink.Attributes.Add("rel", "stylesheet");

            cssLink.Attributes.Add("type", "text/css");

            this.Page.Header.Controls.Add(cssLink);

                 this.Controls.Add(new LiteralControl("<div style=\"display: none\"><div id=\"selectBox\">Welcome!</div></div>"));



            this.Page.ClientScript.RegisterClientScriptInclude(

                "DocTypeSelector.DoctypeSelector.js",

                this.Page.ClientScript.GetWebResourceUrl(typeof(DoctypeSelectorControl), "DocTypeSelector.Control.DoctypeSelector.js"));



            this.Page.ClientScript.RegisterClientScriptInclude(

                "DocTypeSelector.jquery.colorbox-min.js",

                this.Page.ClientScript.GetWebResourceUrl(typeof(DoctypeSelectorControl), "DocTypeSelector.Scripts.jquery.colorbox-min.js"));

        }

    }

}

使用系统；
使用System.Collections.Generic；
使用System.Web.UI.WebControl；
使用System.Web.UI；
[程序集：System.Web.UI.WebResource（“DocTypeSelector.Styles.colorbox.css”、“text/css”）]
[程序集：System.Web.UI.WebResource（“DocTypeSelector.Scripts.jquery.colorbox-min.js”，“text/js”）]
[程序集：System.Web.UI.WebResource（“DocTypeSelector.Control.DocTypeSelector.js”，“text/js”）]
命名空间DocTypeSelector
{
公共类doctype选择器控件：面板
{
私人选民；
受保护的覆盖无效OnInit（事件参数e）
{
碱基.奥尼特（e）；
如果（lnkSelector==null）
{
lnkSelector=新建超链接（）；
}
lnkSelector.Text=“选择…”；
lnkSelector.NavigateUrl=“#”；
lnkSelector.CssClass=“selectTool”；
System.Web.UI.HtmlControls.htmlink cssLink=new System.Web.UI.HtmlControls.htmlink（）；
cssLink.Href=cssLink.Href=Page.ClientScript.GetWebResourceUrl（this.GetType（），“DocTypeSelector.Styles.colorbox.css”）；
添加（“rel”，“样式表”）；
添加（“type”，“text/css”）；
this.Page.Header.Controls.Add（cssLink）；
添加（新的LiteralControl（“欢迎！”）；
this.Page.ClientScript.RegisterClientScriptInclude(
“DocTypeSelector.DocTypeSelector.js”，
this.Page.ClientScript.GetWebResourceUrl（typeof（DoctypeSelectorControl），“DocTypeSelector.Control.DocTypeSelector.js”）；
this.Page.ClientScript.RegisterClientScriptInclude(
“DocTypeSelector.jquery.colorbox-min.js”，
this.Page.ClientScript.GetWebResourceUrl（typeof（DoctypeSelectorControl），“DocTypeSelector.Scripts.jquery.colorbox-min.js”）；
}
}
}

如果有人感兴趣，我遇到的不是Umbraco问题，而是如何在ASP.NET中绑定JS和CSS文件。首先，确保所有CSS和JS文件都设置为embedded resource。在类声明上方，确保在程序集中包含文件：

[assembly: WebResource("Umbraco.Datatypes.DoctypeSelector.Styles.colorbox.css", "text/css", PerformSubstitution = true)]
[assembly: WebResource("Umbraco.Datatypes.DoctypeSelector.Scripts.jquery.colorbox-min.js", "text/javascript")]
[assembly: WebResource("Umbraco.Datatypes.DoctypeSelector.Control.DoctypeSelector.js", "text/javascript")]
[assembly: WebResource("Umbraco.Datatypes.DoctypeSelector.Styles.images.border.png", "image/png")]
[assembly: WebResource("Umbraco.Datatypes.DoctypeSelector.Styles.images.controls.png", "image/png")]
[assembly: WebResource("Umbraco.Datatypes.DoctypeSelector.Styles.images.loading.gif", "image/gif")]
[assembly: WebResource("Umbraco.Datatypes.DoctypeSelector.Styles.images.loading_background.png", "image/png")]

确保正确声明每个文件类型（即text/javascript、text/css等）。“PerformSubstitution=true”允许您在CSS本身中动态绑定这些项。例如，当我想在我使用的CSS中调用controls.png时：

<%=WebResource("Umbraco.Datatypes.DoctypeSelector.Styles.images.controls.png")%>

最后，将文件包括在OnInit中：

// Register colorbox css
            string css = "<link href=\"" + Page.ClientScript.GetWebResourceUrl(typeof(DoctypeSelectorControl),"Umbraco.Datatypes.DoctypeSelector.Styles.colorbox.css") + "\" type=\"text/css\" rel=\"stylesheet\" />";
            this.Page.ClientScript.RegisterClientScriptBlock(typeof(DoctypeSelectorControl), "cssFile", css, false);

            // Register doctype javascript
            this.Page.ClientScript.RegisterClientScriptInclude(
                "Umbraco.Datatypes.DoctypeSelector.doctypeSelector.js",
                this.Page.ClientScript.GetWebResourceUrl(typeof(DoctypeSelectorControl), "Umbraco.Datatypes.DoctypeSelector.Control.DoctypeSelector.js"));

//注册颜色框css
字符串css=“”；
this.Page.ClientScript.RegisterClientScriptBlock（typeof（DoctypeSelectorControl），“cssFile”，css，false）；
//注册doctype javascript
this.Page.ClientScript.RegisterClientScriptInclude(
“Umbraco.Datatypes.DoctypeSelector.DoctypeSelector.js”，
this.Page.ClientScript.GetWebResourceUrl（typeof（DoctypeSelectorControl），“Umbraco.Datatypes.DoctypeSelector.Control.DoctypeSelector.js”）；

我希望这对其他人有帮助