Регистрация JavaScript / CSS в пользовательском элементе управления для нового типа данных Umbraco - PullRequest
Новая
       2

Регистрация JavaScript / CSS в пользовательском элементе управления для нового типа данных Umbraco

1 голос
/ 21 апреля 2011

Я работаю над пользовательским типом данных для Umbraco на основе сообщения в блоге Тима: http://www.nibble.be/?p=90

У меня это в основном работает, но мне нужно включить colorbox (http://colorpowered.com/colorbox/) для одного из моих дисплеев. Для этого требуются jQuery, colorbox от jQuery и 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"));

        }

    }

}

1 Ответ

3 голосов
/ 22 апреля 2011

Если кому-то интересно, я столкнулся не с проблемой Umbraco, а с тем, как связать файлы JS и CSS внутри ASP.NET. Во-первых, убедитесь, что все файлы 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. Например, когда я хотел вызвать Control.png в CSS, я использовал: 

<%=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"));

Надеюсь, это поможет кому-то еще!

...