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

Статья
10/22/2014

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

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

Обязательные компоненты

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

Microsoft Visual Studio 2005.

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

Создание сборки, содержащей внедренный файл JavaScript

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

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

В Visual Studio создайте новый проект библиотеки классов с именем SampleControl.
Добавьте в проект ссылки на сборки System.Web, System.Drawing и System.Web.Extensions.
Добавьте в проект новый файл JScript с именем UpdatePanelAnimation.js.

Добавьте в файл 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);
    }
}

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.

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

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

Imports System.Web.UI
Imports System.Drawing
Imports System.Globalization

Public Class UpdatePanelAnimationWithClientResource
    Inherits Control

    Private _updatePanelID As String
    Private _borderColor As Color
    Private _animate As Boolean

    Public Property BorderColor() As Color
        Get
            Return _borderColor
        End Get
        Set(ByVal value As Color)
            _borderColor = value
        End Set
    End Property

    Public Property UpdatePanelID() As String
        Get
            Return _updatePanelID
        End Get
        Set(ByVal value As String)
            _updatePanelID = value
        End Set
    End Property

    Public Property Animate() As Boolean
        Get
            Return _animate
        End Get
        Set(ByVal value As Boolean)
            _animate = value
        End Set
    End Property

    Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
        MyBase.OnPreRender(e)
        If (Animate) Then

            Dim updatePanel As UpdatePanel = CType(Me.FindControl(UpdatePanelID), UpdatePanel)

            Dim script As String = 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( _
                Me, _
                GetType(UpdatePanelAnimationWithClientResource), _
                ClientID, _
                script, _
                True)
        End If
    End Sub
End Class

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 вызывается при частичном обновлении страницы.

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

<Assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js", "application/x-javascript")>

[assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js", "application/x-javascript")]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<%@ Page Language="VB" AutoEventWireup="true" %>

<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>

<%@ 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-файла включает префикс, ссылающийся на пространство имен по умолчанию для сборки.

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

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

Итог

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

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

См. также

Задачи

Пошаговое руководство. Добавление локализованных ресурсов в файл JavaScript

Основные понятия

Создание пользовательского клиента сценария с помощью библиотеки Microsoft AJAX

Поделиться через

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

Обязательные компоненты

Создание сборки, содержащей внедренный файл JavaScript

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

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

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

Итог

См. также

Задачи

Основные понятия

Дополнительные ресурсы