Пошаговое руководство. Внедрение в сборку файла JavaScript в качестве ресурса

Visual Studio 2010

Обновлен: Ноябрь 2007

В этом пошаговом руководстве описан процесс включения файла JavaScript в сборку в качестве внедренного ресурса. Файл JavaScript внедряется тогда, когда есть компонент клиентского сценария, который должен распространяться вместе с созданной сборкой. Например, создан пользовательский серверный элемент управления ASP.NET, использующий файлы JavaScript для реализации функций AJAX для ASP.NET. Можно внедрить файлы JavaScript в сборку и ссылки на них могут содержаться в веб-приложении, регистрирующем сборку.

Для реализации процедур, описанных в данном пошаговом руководстве, необходим:

  • Microsoft Visual Studio 2005.

    Bb398930.alert_note(ru-ru,VS.100).gifПримечание.

    Нельзя использовать Visual Web Developer 2005, экспресс-выпуск, поскольку Visual Web Developer, экспресс-выпуск не позволяет создавать проект библиотеки классов, необходимый для данного пошагового руководства.

Для начала создайте файл, содержащий код JavaScript, который необходимо внедрить в сборку.

Внедрение файла клиентского сценария в сборку

  1. В Visual Studio создайте новый проект библиотеки классов с именем SampleControl.

  2. Добавьте в проект ссылки на сборки System.Web, System.Drawing и System.Web.Extensions.

  3. Добавьте в проект новый файл JScript с именем UpdatePanelAnimation.js.

  4. Добавьте в файл UpdatePanelAnimation.js следующий код:

    BorderAnimation = function(color) {
        this._color = color;
    }
    
    BorderAnimation.prototype = {
        animate: function(panelElement) {
            var s = panelElement.style;
            s.borderWidth = '2px';
            s.borderColor = this._color;
            s.borderStyle = 'solid';
    
            window.setTimeout(
                function() {{
                    s.borderWidth = 0;
                }},
                500);
        }
    }
    
    
    
    

    Код содержит функцию JavaScript, которая временно отображает цветную границу вокруг элемента управления UpdatePanel.

  5. В окне Свойства файла UpdatePanelAnimation.js присвойте параметру Действие при построении значение Внедренный ресурс.

    Задать внедренный ресурс для файла сценария
  6. Добавьте в проект файл класса с именем CustomControl.

  7. В файле CustomControl замените код следующим кодом:

    using System;
    using System.Drawing;
    using System.Web.UI;
    using System.Web;
    using System.Globalization;
    
    namespace SampleControl
    {
        public class UpdatePanelAnimationWithClientResource : Control
        {
            private string _updatePanelID;
            private Color _borderColor;
            private Boolean _animate;
            public Color BorderColor
            {
                get
                {
                    return _borderColor;
                }
                set
                {
                    _borderColor = value;
                }
            }
    
            public string UpdatePanelID
            {
                get
                {
                    return _updatePanelID;
                }
                set
                {
                    _updatePanelID = value;
                }
            }
    
            public Boolean Animate
            {
                get
                {
                    return _animate;
                }
                set
                {
                    _animate = value;
                }
            }
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
                if (Animate)
                {
    
                    UpdatePanel updatePanel = (UpdatePanel)FindControl(UpdatePanelID);
    
                    string script = String.Format(
                       CultureInfo.InvariantCulture,
                       @"
    Sys.Application.add_load(function(sender, args) {{
    var {0}_borderAnimation = new BorderAnimation('{1}');    
    var panelElement = document.getElementById('{0}');
         if (args.get_isPartialLoad()) {{
            {0}_borderAnimation.animate(panelElement);
        }}
    }})
    ",
                       updatePanel.ClientID,
                       ColorTranslator.ToHtml(BorderColor));
    
    
                    ScriptManager.RegisterStartupScript(
                        this,
                        typeof(UpdatePanelAnimationWithClientResource),
                        ClientID,
                        script,
                        true);
                }
            }
        }
    }
    
    
    

    Этот класс содержит свойства настройки границы вокруг элемента управления UpdatePanel. Код также регистрирует код JavaScript для использования на веб-странице. Код создает обработчик для события load объекта Sys.Application. Функция animate в файле UpdatePanelAnimation.js вызывается при частичном обновлении страницы.

  8. Добавьте следующую строку в файл AssemblyInfo.

    [assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js", "application/x-javascript")]
    
    
    
    Bb398930.alert_note(ru-ru,VS.100).gifПримечание.

    Файл AssemblyInfo.vb находится в узле Мой проект обозревателя решений. Если в узле Мой проект не отображаются файлы, выберите в меню Проект пункт Показать все файлы. Файл AssemblyInfo.cs находится в узле Свойства обозревателя решений.

    Определение WebResource должно включать пространство имен по умолчанию для сборки, а также имя JS-файла.

  9. Выполните построение проекта.

    По завершении компилирования будет создана сборка с именем SampleControl.dll. Код JavaScript в файле UpdatePanelAnimation.js внедрен в сборку в качестве ресурса.

Теперь можно создать ссылку на внедренный файл сценария в веб-приложении.

Bb398930.alert_note(ru-ru,VS.100).gifПримечание.

Не смотря на то, что можно создать проект библиотеки классов и веб-узел в одном и том же решении Visual Studio, в данном пошаговом руководстве этот вариант не рассматривается. Наличие проектов в отдельных решениях имитирует ситуацию, когда разработчик элемента управления и разработчик страницы работают отдельно друг от друга. Однако, для удобства можно создать оба проекта в одном решении и внести небольшие изменения в процедуры пошагового руководства.

Создание ссылки на внедренный файл сценария

  1. В Visual Studio создайте новый веб-узел, поддерживающий технологию AJAX.

  2. В корневом каталоге веб-узла создайте папку Bin.

  3. Скопируйте файл SampleControl.dll из папки «Bin\Debug» или «Bin\Release» проекта библиотеки классов в папку Bin веб-узла.

    Bb398930.alert_note(ru-ru,VS.100).gifПримечание.

    Если проект библиотеки классов и веб-узел созданы в одном и том же решении Visual Studio, то можно добавить ссылку из проекта библиотеки классов на веб-узел. Дополнительные сведения см. в разделе Практическое руководство. Добавление ссылки на проект Visual Studio к проекту веб-узла.

  4. В файле Default.aspx замените код на следующий:

    <%@ Page Language="C#" %>
    <%@ Register TagPrefix="Samples" Namespace="SampleControl" Assembly="SampleControl" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>ScriptReference</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" 
                                     EnablePartialRendering="True"
                                     runat="server">
                 <Scripts>
                    <asp:ScriptReference Assembly="SampleControl" Name="SampleControl.UpdatePanelAnimation.js" />
                 </Scripts>
                </asp:ScriptManager>
    
    
                <Samples:UpdatePanelAnimationWithClientResource 
                         ID="UpdatePanelAnimator1"
                         BorderColor="Green"
                         Animate="true"
                         UpdatePanelID="UpdatePanel1"
                         runat="server" >
                </Samples:UpdatePanelAnimationWithClientResource>
                <asp:UpdatePanel ID="UpdatePanel1" 
                                   UpdateMode="Conditional"
                                   runat="server">
                    <ContentTemplate>
                        <asp:Calendar ID="Calendar2" 
                                      runat="server">
                        </asp:Calendar>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
    
    
    

    Этот код включает элемент управления ScriptReference, ссылающийся на сборку и на имя JS-файла, созданные на предыдущем этапе. Имя JS-файла включает префикс, ссылающийся на пространство имен по умолчанию для сборки.

  5. Запустите проект и щелкните даты в календаре на странице.

    При каждом щелчке даты в календаре будет отображаться зеленая граница вокруг элемента управления UpdatePanel.

В этом пошаговом руководстве показано, как внедрять файл JavaScript в сборку в качестве ресурса. Внедренный файл сценария доступен для веб-приложения, содержащего сборку.

Следующим шагом будет обучение тому, как внедрять в сборку локализованные ресурсы для использования в клиентских сценариях. Дополнительные сведения см. в разделе Пошаговое руководство. Внедрение локализованных ресурсов в файл JavaScript.

Показ: