Návod: vložení souboru jazyka JavaScript jako zdroje do sestavení

Visual Studio 2010

V tomto návodu vložíte soubor jazyka JavaScript jako integrovaný zdroj v sestavení. Vkládáte soubor jazyka JavaScript, pokud máte komponentu klientského skriptu, která musí být distribuována se sestavením, které jste vytvořili. Můžete například vytvořit vlastní serverový ovládací prvek ASP.NET, který používá soubor jazyka JavaScript k implementaci funkcí AJAX pro ASP.NET. Můžete vložit soubory jazyka JavaScript do sestavení a ty pak mohou být odkazovány z webové aplikace, která zaregistruje toto sestavení.

K implementaci procedur v tomto návodu je potřeba:

  • Microsoft Visual Studio 2005.

    PoznámkaPoznámka

    Nelze použít Visual Web Developer 2005 Express Edition, protože Visual Web Developer Express neumožňuje vytvořit projekt knihovny tříd, což je v tomto návodu požadováno.

Na začátku vytvoříte soubor obsahující kód jazyka JavaScript, který chcete vložit do sestavení.

Pro vložení souboru klientského skriptu do sestavení

  1. V aplikaci Visual Studio vytvořte nový projekt knihovny tříd s názvem SampleControl.

  2. Přidejte odkazy na sestavení System.Web, System.Drawing a System.Web.Extensions do projektu.

  3. Přidejte do projektu nový soubor JScript s názvem UpdatePanelAnimation.js.

  4. Přidejte následující kód do souboru 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);
        }
    }
            
    
    
    

    Kód obsahuje funkci jazyka JavaScript, která dočasně zobrazí ohraničení na základě zadané barvy kolem ovládacího prvku UpdatePanel.

  5. V okně vlastností souboru UpdatePanelAnimation.js nastavte Proces sestavení na Integrovaný zdroj.

    Nastavení souboru skriptu na integrovaný prostředek
  6. Přidejte soubor třídy s názvem CustomControl do projektu.

  7. Nahraďte veškerý kód v souboru CustomControl následujícím kódem:

    
    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);
                }
            }
        }
    }
    
    
    

    Tato třída obsahuje vlastnosti pro vlastní nastavení ohraničení, které se zobrazí kolem ovládacího prvku UpdatePanel. Kód také registruje kód jazyka JavaScript pro použití na webové stránce. Kód vytvoří obslužnou rutinu pro událost load objektu Sys.Application. Funkce animate v souboru UpdatePanelAnimation.js je volána, když je zpracovávána aktualizace části stránky.

  8. Do souboru AssemblyInfo přidejte následující řádek.

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

    Soubor AssemblyInfo.vb se nachází v uzlu Můj projekt Průzkumníka řešení. Pokud nevidíte žádné soubory v uzlu Můj projekt, klikněte v nabídce Projekt na příkaz Zobrazit všechny soubory. Soubor AssemblyInfo.cs se nachází v uzlu Vlastnosti Průzkumníka řešení.

    Definice WebResource musí zahrnovat výchozí obor názvů sestavení a název souboru .js.

  9. Projekt sestavte.

    Po dokončení kompilace vznikne sestavení s názvem SampleControl.dll. Kód jazyka JavaScript v souboru UpdatePanelAnimation.js je vložen do tohoto sestavení jako prostředek.

Nyní můžete odkazovat na vložený soubor skriptu ve webové aplikaci.

PoznámkaPoznámka

Přestože můžete vytvořit projekt knihovny tříd a webu ve stejném řešení sady Visual Studio, v tomto návodu se předpokládá, že tomu tak nebude. Tím, že oddělíme projekty do rozdílných řešení, budeme simulovat oddělenou práci vývojáře ovládacího prvku a vývojáře stránky. Nicméně, pro pohodlnější práci můžete vytvořit oba projekty ve stejném řešení a provést pouze drobné úpravy postupů v tomto návodu.

Pro odkázání na vložený soubor skriptu

  1. V sadě Visual Studio vytvořte nový web s možnostmi AJAX.

  2. V kořenovém adresáři webu vytvořte složku Bin.

  3. Zkopírujte SampleControl.dll z adresáře Bin\Debug nebo Bin\Release projektu knihovny tříd do složky Bin webu.

    PoznámkaPoznámka

    Pokud jste vytvořili projekt knihovny tříd a webu ve stejném řešení sady Visual Studio, můžete přidat odkaz z projektu knihovny tříd do webu. Další informace naleznete v tématu Postup: Přidání odkazu na projekt do webového projektu sady Visual Studio.

  4. Nahraďte veškerý kód v souboru Default.aspx následujícím kódem:

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

    Tento kód obsahuje ovládací prvek ScriptReference, který odkazuje na sestavení a název souboru .js, který jste vytvořili v předchozí proceduře. Název souboru .js obsahuje předponu, která odkazuje na výchozí obor názvů sestavení.

  5. Spusťte projekt a na stránce klikněte na data v kalendáři.

    Vždy, když kliknete na datum v kalendáři, zobrazí se zelené ohraničení kolem ovládacího prvku UpdatePanel.

Tento návod ukázal, jak vložit soubor jazyka JavaScript jako prostředek do sestavení. K vloženému souboru skriptu může být přistupováno ve webové aplikaci, která obsahuje dané sestavení.

Dalším krokem je naučit se, jak vložit lokalizované prostředky do sestavení pro použití v klientském skriptu. Další informace naleznete v tématu Návod: vložení lokalizovaných zdrojů pro soubor jazyka JavaScript.

Obsah vytvořený komunitou

Přidat
Zobrazit: