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

本文关键字：注册 JavaScript CSS 自定义控件 Umbraco 数据类型 | 更新日期: 2023-09-27 17:50:41

我正在为基于Tim的博客文章的Umbraco定制数据类型:http://www.nibble.be/?p=90

我已经让它大部分工作，但我需要为我的一个显示器包括一个颜色盒(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"));
        }
    }
}

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

如果有人感兴趣，这不是我遇到的Umbraco问题，而是如何在ASP.NET中绑定JS和CSS文件。首先，确保所有的CSS和JS文件都被设置为嵌入式资源。在类声明的上面，请确保将文件包含在程序集中:

[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"));

我希望这有助于别人!

相关文章：