Compartilhar via


Criando Scripts de Cliente Personalizado Usando a Biblioteca Microsoft AJAX

Os recursos do ASP.NET AJAX ajudam você a criar script de cliente e integrá-lo em aplicativos ASP.NET.Isso inclui um sistema de tipo para ECMAScript (JavaScript) e extensões para objetos existentes ECMAScript (JavaScript) para dar-lhes a riqueza das classes .NET Framework.O ASP.NET também inclui o controle ScriptManager para gerenciar essas bibliotecas de script e qualquer script personalizado em seu aplicativo.

Este tópico contém as seções a seguir:

  • Cenários

  • Usando o Sistema Tipo

  • Usando Extensões para o Tipo Base JavaScript

  • Integração de Script de Cliente Aplicativos ASP.NET Web

Cenários

Você pode usar recursos de Microsoft AJAX Library quando você desejar fazer o seguinte:

  • Adicionar recursos orientados ao seu código JavaScript para aumentar a reutilização de código, flexibilidade e sustentabilidade.

  • Usar o reflexo para examinar a estrutura e componentes do script de cliente em tempo de execução.

  • Usar enumerações para fornecer uma alternativa para representações de inteiro facilmente legíveis.

  • Usar as extensões para os tipos base JavaScript para reduzir o tempo de desenvolvimento para tarefas comuns de script.

  • Usar extensões de depuração e um recurso de rastreamento para depuração mais rápida e mais informativa que com técnicas tradicionais de depuração JavaScript.

Usando o Sistema Tipo

The Microsoft AJAX Library Adiciona um sistema de tipos e extensões para objetos JavaScript para fornecer freqüentemente usados recursos orientados a objeto que se parecem com recursos no .NET estrutura. Elas permitem que você escreva aplicativos ASP.NET AJAX-habilitado em uma maneira estruturada que melhora sustentabilidade, facilita a adição de recursos e facilita a funcionalidade da camada. Extensões Microsoft AJAX Library adicionam os seguintes recursos ao JavaScript:

  • Classes

  • Namespaces

  • Herança

  • Interfaces

  • Enumerações

  • Reflexão

A biblioteca também fornece funções auxiliares para strings e matrizes.

Classes, Membros e Espaços de Nome

O Microsoft AJAX Library inclui as classes base, objetos e componentes que derivam deles.Juntas, essas classes permitem que você use um modelo de programação orientada a objetos para escrever scripts de cliente.

A classe Tipo adiciona recursos orientados a objeto, como espaços de nome, classes e a herança para programação JavaScript.Qualquer objeto de JavaScript que está registrado usando a classe Type automaticamente tem acesso a essa funcionalidade.O exemplo a seguir mostra como usar a classe Type para criar e registrar um namespace e uma classe em um arquivo javascript:

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

Demo.Person.prototype = {

    getFirstName: function() {
        return this._firstName;
    },

    getLastName: function() {
        return this._lastName;
    },

    getName: function() {
        return this._firstName + ' ' + this._lastName;
    },

    dispose: function() {
        alert('bye ' + this.getName());
    }
}
Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

// Notify ScriptManager that this is the end of the script.
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Classes podem ter quatro tipos de membros: campos, propriedades, métodos e eventos.Campos e propriedades são pares nome/valor que descrevem características de uma instância de uma classe.Os campos são compostos de tipos primitivos e são acessados diretamente, como no exemplo a seguir:

myClassInstance.name="Fred"

Propriedades podem representar qualquer primitivo ou tipo de referência.Acessar valores de propriedade com métodos de assessor get e set.Na Microsoft AJAX Library, os assessores get e set são funções, que por convenção, usam o prefixo "get_" or "set_" em nome da função.Por exemplo, para obter ou definir um valor para uma propriedade como cancel, você chama os métodos get_cancel ou set_cancel.

O Microsoft AJAX Library gera eventos em resposta às ações que ocorrem durante o ciclo de vida de um aplicativo cliente AJAX.O Microsoft AJAX Library também fornece uma maneira padrão para você criar eventos personalizados para componentes cliente AJAX.Para obter mais informações, consulte Criando eventos de cliente personalizados e Eventos de ciclo de vida de cliente AJAX.

The Microsoft AJAX Library Fornece uma maneira de registrar namespaces para que você pode agrupar funcionalidade comum. O exemplo a seguir demonstra como adicionar uma classe Person para o espaço de nome Demo usando os métodos Type.registerNamespace e registerClass.

Para habilitar a funcionalidade para uma página da Web do ASP.NET AJAX, você deve adicionar um ScriptManager controle para a página. Quando a página é processada, as referências de script apropriadas para bibliotecas AJAX de scripts de cliente são geradas automaticamente.O exemplo a seguir mostra uma página com um ScriptManager controle.

<asp:ScriptManager  ID="scriptManager" />

O exemplo a seguir mostra como registrar o espaço de nomes, criar a classe e em seguida, registrar a classe.

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

Demo.Person.prototype = {

    getFirstName: function() {
        return this._firstName;
    },

    getLastName: function() {
        return this._lastName;
    },

    getName: function() {
        return this._firstName + ' ' + this._lastName;
    },

    dispose: function() {
        alert('bye ' + this.getName());
    }
}
Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

// Notify ScriptManager that this is the end of the script.
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

<!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>
    <title>Namespace</title>
</head>

<body>
    <form id="Main" >
        <asp:ScriptManager  ID="scriptManager" />
    </form>

    <div>
        <p>This example creates an instance of the Person class 
            and puts it in the "Demo" namespace.</p>

        <input id="Button1" value="Create Demo.Person" 
            type="button" onclick="return OnButton1Click()" />

    </div>

    <script type="text/javascript" src="Namespace.js"></script>
    <script type="text/javascript" language="JavaScript">

    function OnButton1Click() 
    {
        var testPerson = new Demo.Person(  
            'John', 'Smith', 'john.smith@example.com');
        alert(testPerson.getFirstName() + " " +    
            testPerson.getLastName() );

        return false;
    }
    </script>
</body>
</html>

Modificadores de acesso

A maioria dos idiomas de programação orientada a objetos incluem o conceito de modificadores de acesso , que permitem que você especifique em quais contextos uma classe ou membro está disponível, como fora do programa, classes internas dentro do mesmo espaço de nomes, ou apenas em um bloco de código específico.Não há modificadores de acesso em JavaScript.No entanto, o Microsoft AJAX Library segue a convenção que membros com nomes que começam com o caractere de sublinhado ("_") são considerados particulares e não acessados fora da classe a qual eles fazem parte.

Herança

A herança é a capacidade de uma classe de derivar de outra classe.Um classe derivada automaticamente herda todos as a campos, propriedades, métodos e eventos da classe base.Uma classe derivada pode adicionar novos membros ou substitua membros existentes da classe base para alterar seu comportamento.

O exemplo a seguir contém duas classes definidas no script: Person e Employee, onde Employee deriva da Person. Ambas as classes ilustram o uso de campos particulares, e ambas têm propriedades e métodos públicos.Além disso, Employee substitui a implementação toString da classe Person e usa a funcionalidade da classe base.

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
}

Demo.Person.prototype = {
    getFirstName: function() {
        return this._firstName;
    },

    getLastName: function() {
        return this._lastName;
    },

    getEmailAddress: function() {
        return this._emailAddress;
    },
    setEmailAddress: function(emailAddress) {
        this._emailAddress = emailAddress;
    },

    getName: function() {
        return this._firstName + ' ' + this._lastName;
    },

    dispose: function() {
        alert('bye ' + this.getName());
    },

    sendMail: function() {
        var emailAddress = this.getEmailAddress();

        if (emailAddress.indexOf('@') < 0) {
            emailAddress = emailAddress + '@example.com';
        }
        alert('Sending mail to ' + emailAddress + ' ...');
    },

    toString: function() {
        return this.getName() + ' (' + this.getEmailAddress() + ')';
    }
}

Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);
Demo.Employee = function(firstName, lastName, emailAddress, team, title) {
    Demo.Employee.initializeBase(this, [firstName, lastName, emailAddress]);

    this._team = team;
    this._title = title;
}

Demo.Employee.prototype = {

    getTeam: function() {
        return this._team;
    },
    setTeam: function(team) {
        this._team = team;
    },

    getTitle: function() {
        return this._title;
    },
    setTitle: function(title) {
        this._title = title;
    },
    toString: function() {
        return Demo.Employee.callBaseMethod(this, 'toString') + '\r\n' + this.getTitle() + '\r\n' + this.getTeam();
    }
}
Demo.Employee.registerClass('Demo.Employee', Demo.Person);
<!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>
    <title>Inheritance</title>
</head>

<body>
    <form id="Main" >
        <asp:ScriptManager  ID="scriptManager" />
    <script type="text/javascript" src="Inheritance.js"></script>
    </form>

    <h2>Inheritance</h2>
    <p />

    <div>
        This file contains two classes defined in script: Person and Employee, where
        Employee derives from Person.
        <p />

        Each class has private fields, and public properties and methods. In addition,
        Employee overrides the toString implementation, and in doing so, it uses the
        base class functionality.
        <p />

        This example puts the Person class in the "Demo" namespace.
        <p />
    </div>


    <div>
        <ul>
            <li><a href="#" onclick="return OnTestNewClick()">Object Creation</a></li>
            <li><a href="#" onclick="return OnTestDisposeClick()">Object Dispose</a></li>
            <li><a href="#" onclick="return OnTestPrivatePropertyClick()">Public vs. Private Properties</a></li>
            <li><a href="#" onclick="return OnTestInstanceMethodClick()">Instance Methods</a></li>
            <li><a href="#" onclick="return OnTestOverrideMethodClick()">Overriden Methods</a></li>
            <li><a href="#" onclick="return OnTestInstanceOfClick()">Instance Of Check</a></li>
        </ul>
    </div>

    <script type="text/javascript" language="JavaScript">

    function GetTestPerson() 
    {
        return new Demo.Person('Jane', 'Doe', 'jane.doe@example.com');
    }

    function GetTestEmployee() 
    {
        return new Demo.Employee('John', 'Doe', 'john.doe@example.com', 'Platform', 'Programmer');
    }

    function OnTestNewClick() {
        var aPerson = GetTestPerson();

        alert(aPerson.getFirstName());
        alert(aPerson);
        alert(Object.getType(aPerson).getName());

        var testPerson = GetTestPerson();
        alert(testPerson.getFirstName());
        alert(testPerson);

        return false;
    }

    function OnTestDisposeClick() {
        var aPerson = GetTestEmployee();
        alert(aPerson.getFirstName());
        aPerson.dispose();
    }

    function OnTestPrivatePropertyClick() {
        var aPerson = GetTestEmployee();
        alert('aPerson._firstName = ' + aPerson._firstName);
        alert('aPersona.getFirstName() = ' + aPerson.getFirstName());

        return false;
    }

    function OnTestInstanceMethodClick() {
        var aPerson = GetTestEmployee();
        aPerson.sendMail('Hello', 'This is a test mail.');

        return false;
    }

    function OnTestOverrideMethodClick() {
        var testPerson = GetTestEmployee();
        alert(testPerson);

        return false;
    }

    function OnTestInstanceOfClick() {
        var aPerson = GetTestEmployee();
        if (Demo.Employee.isInstanceOfType(aPerson)) {
            alert(aPerson.getName() + ' is an Employee instance.\r\nTitle property: ' + aPerson.getTitle());
        }

        return false;
    }

    </script>
</body>
</html>

Interfaces

Uma interface define os requisitos de entrada e saída de classes que as implementam.Isso habilita uma função para interagir com as classes que implementam a mesma interface, independentemente de qual outra funcionalidade a classe implementa.

O exemplo a seguir define um Tree classe base e um IFruitTree interface. Apple e Bananaimplementar classes derivadas dois, o IFruitTree interface, mas o Pine classe, não. Qualquer classe que implementa a interface IFruitTree certifica-se que um método bearFruit é um membro da classe.

Type.registerNamespace("Demo.Trees");

Demo.Trees.IFruitTree = function() {}
Demo.Trees.IFruitTree.Prototype = {
    bearFruit: function(){}
}
Demo.Trees.IFruitTree.registerInterface('Demo.Trees.IFruitTree');


Demo.Trees.Tree = function(name) {
    this._name = name;
}
Demo.Trees.Tree.prototype = {
    returnName: function() {
        return this._name;
    },

    toStringCustom: function() {
        return this.returnName();
    },

    makeLeaves: function() {}
}
Demo.Trees.Tree.registerClass('Demo.Trees.Tree');


Demo.Trees.FruitTree = function(name, description) {
    Demo.Trees.FruitTree.initializeBase(this, [name]);
    this._description = description;
}
Demo.Trees.FruitTree.prototype.bearFruit = function() {
        return this._description;
}
Demo.Trees.FruitTree.registerClass('Demo.Trees.FruitTree', Demo.Trees.Tree, Demo.Trees.IFruitTree);

Demo.Trees.Apple = function() {
    Demo.Trees.Apple.initializeBase(this, ['Apple', 'red and crunchy']);
}
Demo.Trees.Apple.prototype = {
    makeLeaves: function() {
        alert('Medium-sized and desiduous');
    },
    toStringCustom: function() {
        return 'FruitTree ' + Demo.Trees.Apple.callBaseMethod(this, 'toStringCustom');
    }
}
Demo.Trees.Apple.registerClass('Demo.Trees.Apple', Demo.Trees.FruitTree);

Demo.Trees.GreenApple = function() {
    Demo.Trees.GreenApple.initializeBase(this);
    // You must set the _description feild after initializeBase
    // or you will get the base value.
    this._description = 'green and sour';
}
Demo.Trees.GreenApple.prototype.toStringCustom = function() {
    return Demo.Trees.GreenApple.callBaseMethod(this, 'toStringCustom') + ' ... its GreenApple!';
}
Demo.Trees.GreenApple.registerClass('Demo.Trees.GreenApple', Demo.Trees.Apple);


Demo.Trees.Banana = function(description) {
    Demo.Trees.Banana.initializeBase(this, ['Banana', 'yellow and squishy']);
}
Demo.Trees.Banana.prototype.makeLeaves = function() {
    alert('Big and green');
}
Demo.Trees.Banana.registerClass('Demo.Trees.Banana', Demo.Trees.FruitTree);



Demo.Trees.Pine = function() {
    Demo.Trees.Pine.initializeBase(this, ['Pine']);
}
Demo.Trees.Pine.prototype.makeLeaves = function() {
    alert('Needles in clusters');
}
Demo.Trees.Pine.registerClass('Demo.Trees.Pine', Demo.Trees.Tree);

<!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>
    <title>Interface</title>
</head>

<body>
    <form id="Main" >
        <asp:ScriptManager  ID="scriptManager" />
    </form>

    <h2>Interface</h2>
    <p />

    <div>
        This file contains a Tree base class, and an IFruitTree interface.
        Apple and Banana, two derived classes implement that interface, whereas,
        Pine does not implement that interface.
        <p />
    </div>

    <script type="text/javascript" src="Interface.js"></script>

    <div>
        <ul>
                <li><a href="#" onclick="return OnTestNewClick()">Object Creation</a></li>
                <li><a href="#" onclick="return OnTestImplementsClick()">Implements Check</a></li>
                <li><a href="#" onclick="return OnTestInterfaceMethodClick()">Call interface method</a></li>
        </ul>
    </div>

    <script type="text/javascript" language="JavaScript">

    function OnTestNewClick() {
        var apple = new Demo.Trees.Apple('Apple');
        alert(apple.returnName());
        apple.makeLeaves();

        return false;
    }

    function OnTestImplementsClick() {
        var apple = new Demo.Trees.Apple();
        if (Demo.Trees.IFruitTree.isImplementedBy(apple)) {
            alert('Apple implements IFruitTree');
        }
        else {
            alert('Apple does not implement IFruitTree');
        }

        var pine = new Demo.Trees.Pine();
        if (Demo.Trees.IFruitTree.isImplementedBy(pine)) {
            alert('Pine implements IFruitTree');
        }
        else {
            alert('Pine does not implement IFruitTree');
        }

        return false;
    }

    function OnTestInterfaceMethodClick() {
        var apple = new Demo.Trees.Apple();
        ProcessTree(apple);

        var pine = new Demo.Trees.Pine();
        ProcessTree(pine);

        var banana = new Demo.Trees.Banana();
        ProcessTree(banana);

        var g = new Demo.Trees.GreenApple();
        ProcessTree(g);

        return false;
    }

    function ProcessTree(tree) {
        alert('Current Tree ' + tree.returnName());
        alert(tree.toStringCustom());
        if (Demo.Trees.IFruitTree.isImplementedBy(tree)) {
            alert(tree.returnName() + ' implements IFruitTree; Fruit is ' + tree.bearFruit());
        }
    }
    </script>
</body>
</html>

Enumerações

Uma enumeração é uma classe que contém um conjunto de constantes nomeadas inteiro.Acessar os valores como propriedades, como no exemplo a seguir:

myObject.color = myColorEnum.red

Usar enumerações para fornecer uma alternativa para representações de inteiro facilmente legíveis.Para obter mais informações sobre enumerações na caixa Microsoft AJAX Library, consulte Método tipo.registerEnum (ASP.NET AJAX).

O exemplo a seguir define uma enumeração de cores nomeadas que representam os valores hexadecimais.

Type.registerNamespace("Demo");

// Define an enumeration type and register it.
Demo.Color = function(){};
Demo.Color.prototype = 
{
    Red:    0xFF0000,
    Blue:   0x0000FF,
    Green:  0x00FF00,
    White:  0xFFFFFF 
}
Demo.Color.registerEnum("Demo.Color");
<!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>
    <title>Enumeration</title>
</head>

<body>
    <form id="Main" >
        <asp:ScriptManager  ID="scriptManager" />
    </form>

    <div>
        <p>This example creates an Enumeration of colors
            and applies them to page background.</p>

        <select id="ColorPicker" 
            onchange="ChangeColor(options[selectedIndex].value)">
            <option value="Red" label="Red" />
            <option value="Blue" label="Blue" />
            <option value="Green" label="Green" />
            <option value="White" label="White" />
        </select>

    </div>

    <script type="text/javascript" src="Enumeration.js"></script>
    <script type="text/javascript" language="JavaScript">

    function ChangeColor(value) 
    {
         document.body.bgColor = eval("Demo.Color." + value + ";");
    }

    </script>

</body>
</html>

Reflexão

Reflexo é a capacidade para examinar a estrutura e componentes de um programa em tempo de execução.As APIs que implementam o reflexo são extensões da classe Tipo.Esses métodos permitem que você colete informações sobre um objeto, como o que ele herda de, se ele implementa uma interface específica, e se ele é uma instância de uma determinada classe.

O exemplo a seguir usa APIs de reflexão para testar a classe GreenApple do exemplo anterior de interface.

<!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>
    <title>Reflection</title>
</head>

<body>
    <form id="Main" >
        <asp:ScriptManager  ID="scriptManager" />
    </form>

    <div>
        <p>This example tests the Demo.Trees.GreenApple class 
            against various reflection APIs.</p>

        <input id="Button1" value="Check Type" 
            type="button" onclick="return OnButton1Click()" />
        <input id="Button2" value="Check Inheritance" 
            type="button" onclick="return OnButton2Click()" />
        <input id="Button3" value="Check Interface" 
            type="button" onclick="return OnButton3Click()" />

    </div>

    <script type="text/javascript" src="Interface.js"></script>
    <script type="text/javascript" language="JavaScript">

    var g = new Demo.Trees.GreenApple();
    var gt = Demo.Trees.GreenApple;
    var a = new Array(
        Demo.Trees.Apple, 
        Demo.Trees.Tree, 
        Demo.Trees.Pine,
        Demo.Trees.IFruitTree,
        Sys.IContainer);

    function OnButton1Click() 
    {
        for (var i = 0; i < a.length; i ++)
        {
            if (a[i].isInstanceOfType(g))
            {
                alert(gt.getName() + " is a " + a[i].getName() + ".");
            }
            else alert(gt.getName() + " is not a " + a[i].getName() + ".");
        }
    }

    function OnButton2Click() 
    {
        for (var i = 0; i < a.length; i ++)
        {
            if (gt.inheritsFrom(a[i]))
            {
                alert(gt.getName() + " inherits from " + a[i].getName() + ".");
            }
            else alert(gt.getName() + " does not inherit from " + a[i].getName() + ".");
        }
    }

    function OnButton3Click() 
    {
        for (var i = 0; i < a.length; i ++)
        {
            if (Type.isInterface(a[i]))
            {
                if (gt.implementsInterface(a[i]))
                {
                    alert(gt.getName() + " implements the " + a[i].getName() + " interface.");
                }
                else alert(gt.getName() + " does not implement the " + a[i].getName() + " interface.");
            }
            else alert(a[i].getName() + " is not an interface.");
        }
    }
    </script>
</body>
</html>

Usando Extensões para o Tipo Base JavaScript

Extensões para tipos base JavaScript fornecem funcionalidade adicional para esses tipos.Para obter mais informações sobre essas extensões, consulte os seguintes tópicos:

A classe Sys.Debug fornece recursos abrangentes de depuração.Para obter mais informações, consulte Visão geral de Depuração e Rastreamento de Aplicativos AJAX e Sys.Debug de classe, visão geral.

Se você criar componentes baseados no Microsoft AJAX Library, você pode criar podem criar depurar e versão versões dos arquivos de script que são automaticamente gerenciadas pela ScriptManager controle. Você pode identificar versões de depuração dos arquivos script incluindo ".debug" como parte do nome do arquivo script.Por exemplo, os seguintes nomes de arquivo de script identificam versões de depuração e comerciais e de um arquivo:

  • MyScript.js (Comercial)

  • MyScript.debug.js (depuração)

Integração de Script de Cliente Aplicativos ASP.NET Web

Qualquer página da Web ASP.NET pode acessar um arquivo de script, referindo-se a ele em um bloco <script>, como no exemplo a seguir:

<script type="text/javascript" src="MyScript.js"></script>

No entanto, um script chamado desta forma não é pode participar em um processamento parcial de página ou acessar determinados componentes do Microsoft AJAX Library.Para disponibilizar um arquivo de script para processamento parcial de página em um aplicativo ASP.NET AJAX ativado, o script deve ser registrado com o controle ScriptManager na página.Para registrar um arquivo de script, crie um objeto ScriptReference que aponta para a pergunta do arquivo e que o adiciona à coleção Scripts.O exemplo a seguir mostra como fazer isso na marcação:

<asp:ScriptManager ID="SMgr" >
  <Scripts>
    <asp:ScriptReference path="MyScript.js" />
  </Scripts>
</asp:ScriptManager> 

Para arquivos de script a serem processados corretamente pelo controle ScriptManager, cada arquivo deve incluir uma chamada para o método Sys.Application.notifyScriptLoaded no final do arquivo.Esta chamada notifica o aplicativo que o arquivo concluiu o carregamento.O exemplo a seguir mostra o código que será usado para essa finalidade:

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Você também pode incorporar arquivos .js como recursos em conjuntos de código gerenciado.(Você pode fazer isto se criar um controle de servidor ASP.NET com funcionalidade de AJAX que é implementada em script de cliente.) Se o script é incorporado em um conjunto de módulos (assembly), não é necessário incluir uma instrução de notificação no script.Você também não precisará especificar um atributo path na referência de script.No entanto, você deve fornecer o nome do conjunto de módulos (assembly) sem a extensão de nome de arquivo, conforme mostrado no exemplo o seguir:

<asp:ScriptManager ID="SMgr" >
  <Scripts>
    <asp:ScriptReference 
        Name="MyScript.js" Assembly="MyScriptAssembly"/>
  </Scripts>
</asp:ScriptManager> 
Observação:

Esse cenário não é comum para desenvolvedores de página, pois a maioria dos controles com bibliotecas de script incorporado referencia seus scripts internamente.Para obter mais informações, consulte Demonstra Passo a passo: Incorporação de um arquivo JavaScript sistema autônomo um recurso em um assembly.

Você também pode registrar scripts por meio de programação, criando script referências no código e, em seguida, adicionando-os à coleção Scripts.Para obter mais informações, consulte Atribuindo Referências a Scripts Dinamicamente.

Você pode registrar os scripts que são necessários para atualizações parciais de página usando os métodos de registro do controle ScriptManager.Você pode usar esses métodos nos seguintes aspectos:

  • Para gerar script de cliente no código, construir um bloco de script como uma string e passá-lo para o método RegisterClientScriptBlock.

  • Para adicionar arquivos de script autônomo que tem nenhum Microsoft AJAX Library dependências, use o RegisterClientScriptInclude método. 

  • Para adicionar arquivos de script que são incorporados em um conjunto de módulos (assembly), use o método RegisterClientScriptInclude.

    Observação:

    Scripts registrados usando esses métodos não têm suporte de localização.

Para obter uma lista completa de métodos de script-registro e suas utilizações, consulte a visão geral sobre o controle ScriptManager.

Quaisquer blocos de script ou script in-line que você estiver inscrevendo devem estar dentro da página do elemento <form>.Caso contrário, o script não estará registrado com o controle ScriptManager e não poderá acessar a funcionalidade ASP.NET Ajax.Para obter mais informações, consulte Método Sys.Aplicativo.Initialize.

Consulte também

Tarefas

Aplicativo de Exemplo de AJAX

Conceitos

Visão geral de renderização de página parcial

Visão geral do ASP.NET AJAX

Script de Cliente em Páginas da Web ASP.NET

Criando componentes de cliente e controles

Referência

Type (Classe )