Crear script de cliente personalizado mediante el uso de Microsoft AJAX Library
Actualización: noviembre 2007
Las características AJAX de ASP.NET ayudan a crear scripts de cliente e integrarlos en aplicaciones ASP.NET. Incluyen un sistema de tipos para ECMAScript (JavaScript) y extensiones para los objetos ECMAScript (JavaScript) existentes para darles la riqueza de las clases .NET Framework. ASP.NET también incluye el control ScriptManager para administrar estas bibliotecas de scripts y cualquier script personalizado de su aplicación.
Este tema contiene las siguientes secciones:
Escenarios
Utilizar el sistema de tipos
Utilizar las extensiones de los tipos base de JavaScript
Integrar scripts de cliente en aplicaciones web ASP.NET
Escenarios
Utilice las características de Microsoft AJAX Library cuando desee hacer lo siguiente:
Agregar capacidades orientadas a objetos al código JavaScript para aumentar la reutilización, flexibilidad y mantenimiento del código.
Utilizar la reflexión para examinar la estructura y los componentes de los scripts de cliente en tiempo de ejecución.
Utilizar enumeraciones para proporcionar una alternativa fácilmente legible a las representaciones de enteros.
Utilizar las extensiones de los tipos base de JavaScript para reducir el tiempo de desarrollo de las tareas de scripting comunes.
Utilizar las extensiones de depuración y una característica de traza para lograr una depuración más rápida y más informativa que con las técnicas tradicionales de depuración de JavaScript.
Utilizar el sistema de tipos
Microsoft AJAX Library agrega un sistema de tipos y extensiones a los objetos JavaScript para proporcionar las características orientadas a objetos de uso más frecuente similares a las características de .NET Framework. Permiten escribir aplicaciones ASP.NET habilitadas para AJAX de una manera estructurada que mejora el mantenimiento, facilita la incorporación de características y facilita la funcionalidad de capas. Las extensiones de Microsoft AJAX Library agregan las siguientes funciones a JavaScript:
Clases
Espacios de nombres
Herencia
Interfaces
Enumeraciones
Reflexión
La biblioteca también proporciona funciones auxiliares para cadenas y matrices.
Clases, miembros y espacios de nombres
Microsoft AJAX Library incluye las clases base y los objetos y componentes que derivan de ellos. Juntas, estas clases permiten utilizar un modelo de programación orientada a objetos para escribir scripts de cliente.
La clase Type agrega características orientadas a objetos como espacios de nombres, clases y herencia a la programación de JavaScript. Cualquier objeto JavaScript que se registra mediante la clase Type tiene acceso automáticamente a esta funcionalidad. En el ejemplo siguiente se muestra cómo utilizar la clase Type para crear y registrar un espacio de nombres y una clase en un archivo 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();
Las clases pueden tener cuatro tipos de miembros: campos, propiedades, métodos y eventos. Los campos y las propiedades son pares de nombre y valor que describen las características de una instancia de una clase. Los campos están compuestos por tipos primitivos y son de acceso directo, como en el ejemplo siguiente:
myClassInstance.name="Fred"
Las propiedades pueden representar cualquier tipo primitivo o de referencia. El acceso a los valores de la propiedad se obtiene con los métodos de descriptor de acceso get y set. En Microsoft AJAX Library, los descriptores de acceso get y set son funciones que, por convención, utilizan el prefijo "get_" o "set_" en el nombre de la función. Por ejemplo, para obtener o establecer un valor para una propiedad como cancel, llame a los métodos get_cancel o set_cancel.
Microsoft AJAX Library provoca eventos en respuesta a las acciones que se producen durante el ciclo de vida de una aplicación cliente de AJAX. Microsoft AJAX Library también proporciona un método estándar para crear eventos personalizados para los componentes de cliente de AJAX. Para obtener más información, vea Crear eventos de cliente personalizados y Eventos de ciclo de vida de cliente de AJAX.
Microsoft AJAX Library proporciona una manera de registrar los espacios de nombres con el fin de agrupar las funcionalidades comunes. En el ejemplo siguiente se muestra cómo agregar una clase Person al espacio de nombres Demo utilizando los métodos Type.registerNamespace y .registerClass.
Para habilitar la funcionalidad de AJAX para una página web ASP.NET, debe agregar un control ScriptManager a la página. Cuando se representa la página, se generan automáticamente las referencias de script correspondientes a las bibliotecas de scripts de cliente de AJAX. En el ejemplo siguiente se muestra una página con un control ScriptManager.
<asp:ScriptManager ID="scriptManager" />
En el ejemplo siguiente se muestra cómo registrar el espacio de nombres, crear la clase y, a continuación, registrar la clase.
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 acceso
La mayoría de los lenguajes de programación orientados a objetos incluyen el concepto de modificadores de acceso, que permiten especificar en qué contextos está disponible una clase o miembro, por ejemplo, para programas externos, clases internas dentro del mismo espacio de nombres o sólo dentro de un bloque de código concreto. No hay ningún modificador de acceso en JavaScript. Sin embargo, en Microsoft AJAX Library, la convención es que los miembros con nombres que comienzan por el carácter de subrayado ("_") se consideran privados y no se tiene acceso a ellos fuera de la clase de la que forman parte.
Herencia
La herencia es la capacidad de una clase de derivarse de otra clase. Una clase derivada hereda automáticamente todos los campos, propiedades, métodos y eventos de la clase base. Una clase derivada puede agregar nuevos miembros o invalidar los miembros existentes de la clase base para cambiar su comportamiento.
El ejemplo siguiente contiene dos clases definidas en el script: Person y Employee, donde Employee deriva de Person. Ambas clases muestran el uso de los campos privados y ambas tiene propiedades y métodos públicos. Además, Employee invalida la implementación toString de la clase Person y utiliza la funcionalidad de la clase 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
Una interfaz define los requisitos de entrada y salida de las clases que la implementan. Esto permite a una función interactuar con las clases que implementan la misma interfaz independientemente de qué otra funcionalidad implementa la clase.
En el ejemplo siguiente se define una clase base Tree y una interfaz IFruitTree. Apple y Banana, dos clases derivadas, implementan la interfaz IFruitTree, pero la clase Pine no lo hace. Cualquier clase que implemente la interfaz IFruitTree garantiza que un método bearFruit es miembro de esa clase.
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>
Enumeraciones
Una enumeración es una clase que contiene un conjunto de constantes enteras con nombre. El acceso a los valores, como las propiedades, se realiza como en el ejemplo siguiente:
myObject.color = myColorEnum.red
Las enumeraciones proporcionan una alternativa fácilmente legible a las representaciones de enteros. Para obtener más información acerca de las enumeraciones de Microsoft AJAX Library, vea Type.registerEnum (Método, ASP.NET AJAX).
En el ejemplo siguiente se define una enumeración de colores con nombre que representan valores hexadecimales.
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>
Reflexión
La reflexión es la capacidad de examinar la estructura y los componentes de un programa en tiempo de ejecución. Las API que implementan la reflexión son extensiones de la clase Type. Estos métodos permiten recopilar información sobre un objeto, por ejemplo, de quién hereda, si implementa una interfaz determinada y si es una instancia de una clase determinada.
En el ejemplo siguiente se utilizan API de reflexión para probar la clase GreenApple del ejemplo de interfaz anterior.
<!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>
Utilizar las extensiones de los tipos base de JavaScript
Las extensiones de los tipos base de JavaScript proporcionan funcionalidad adicional para esos tipos. Para obtener más información sobre estas extensiones, vea los temas siguientes:
La clase Sys.Debug proporciona funciones ampliadas de depuración. Para obtener más información, vea Información general sobre la depuración y la traza de aplicaciones habilitadas para AJAX y la información general de la clase Sys.Debug.
Si crea componentes basados en Microsoft AJAX Library, puede crear versiones comerciales y de depuración de los archivos de script que son administradas automáticamente por el control ScriptManager. Puede identificar las versiones de depuración de los archivos de script incluyendo ".debug" como parte del nombre de archivo del script. Por ejemplo, los siguientes nombres de archivo de script identifican las versiones comerciales y de depuración de un archivo:
MyScript.js (comercial)
MyScript.debug.js (depuración)
Integrar scripts de cliente en aplicaciones web ASP.NET
Cualquier página web ASP.NET puede tener acceso a un archivo de script haciendo referencia a él en un bloque <script>, como en el ejemplo siguiente:
<script type="text/javascript" src="MyScript.js"></script>
Sin embargo, un script invocado de esta manera no puede participar en la representación parcial de la página ni tener acceso a ciertos componentes de Microsoft AJAX Library. Para que un archivo de script esté disponible para la representación parcial de la página en una aplicación web ASP.NET habilitada para AJAX, el script se debe registrar con el control ScriptManager en la página. Para registrar un archivo de script, cree un objeto ScriptReference que señale al archivo en cuestión y que lo agregue a la colección Scripts. En el siguiente ejemplo se muestra cómo realizar esta acción en el marcado:
<asp:ScriptManager ID="SMgr" >
<Scripts>
<asp:ScriptReference path="MyScript.js" />
</Scripts>
</asp:ScriptManager>
Para que los archivos de script sean correctamente procesados por el control ScriptManager, cada nombre de archivo debe incluir una llamada al método Sys.Application.notifyScriptLoaded al final del archivo. Esta llamada notifica a la aplicación que el archivo se ha terminado de cargar. En el ejemplo siguiente se muestra el código que hay que usar con este fin:
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
También puede incrustar archivos .js como recursos en ensamblados de código administrado. (Puede hacerlo si crea un control de servidor ASP.NET con funcionalidad AJAX que se implementa en el script de cliente.) Si el script se incrusta en un ensamblado, no tiene que incluir una instrucción de notificación en el script. Tampoco tiene que especificar un atributo path en la referencia de script. Sin embargo, debe proporcionar el nombre del ensamblado sin la extensión de nombre de archivo, como se muestra en el ejemplo siguiente:
<asp:ScriptManager ID="SMgr" >
<Scripts>
<asp:ScriptReference
Name="MyScript.js" Assembly="MyScriptAssembly"/>
</Scripts>
</asp:ScriptManager>
.gif "Nota") Nota: |
|---|
Este escenario no es habitual para los desarrolladores de páginas, porque la mayoría de los controles con bibliotecas de scripts incrustadas hacen referencia a sus scripts internamente. Para obtener más información, vea Tutorial: Incrustar un archivo JavaScript como recurso en un ensamblado. |
Los scripts también se pueden registrar mediante programación creando referencias de script en el código y, a continuación, agregándolos a la colección Scripts. Para obtener más información, vea Asignar referencias de script de forma dinámica.
Puede registrar los scripts necesarios para las actualizaciones parciales de la página utilizando los métodos de registro del control ScriptManager. Puede utilizar estos métodos de las siguientes maneras:
Para generar el script de cliente en el código, genere un bloque de script como una cadena y páselo al método RegisterClientScriptBlock.
Para agregar archivos de script independientes que no tienen ninguna dependencia de Microsoft AJAX Library, utilice el método RegisterClientScriptInclude.
Para agregar archivos de script que se incrustan en un ensamblado, utilice el método RegisterClientScriptInclude.
Nota:Los scripts que se registran con estos métodos no admiten la localización.
Para obtener una lista completa de los métodos de registro de scripts y sus usos, vea la información general del control ScriptManager.
Los bloques de scripts o scripts insertados que vaya a registrar deben estar dentro del elemento <form> de la página. De lo contrario, el script no se registra con el control ScriptManager y no tiene acceso a la funcionalidad AJAX de ASP.NET. Para obtener más información, vea Sys.Application.initialize (Método).
Vea también
Tareas
Aplicación habilitada para AJAX de ejemplo
Conceptos
Información general sobre la representación parcial de páginas
Información general sobre AJAX en ASP.NET
Script de cliente en páginas web ASP.NET
Crear controles y componentes de cliente