Como eliminar el ScriptManager de nuestra página y que el desarrollo Ajax siga funcionando igual.

En este post, vamos a ver cómo eliminar el ScriptManager de nuestra página (y porque eliminarlo) y que todo nos siga funcionando ok, sin que esto sea una experiencia traumática. También veremos que es el ScriptManager y cuáles son sus funciones.

¿Qué es el ScriptManager y para qué Sirve?

El ScriptManager, es un control que nos proporciona el Framework y que nos permite trabajar de forma sencilla con Ajax (Asynchronous JavaScript And XML). Este se encarga de descargar los archivos javascript necesarios para trabajar con Ajax, renderizar el javascript necesario en función de un contexto, crear las llamadas XmlHttpRequest, llamadas a Web Services etc.

Al final lo que intenta, es que trabajar con Ajax sea sencillo y rápido, de manera que con un pequeño esfuerzo podamos obtener unos muy buenos resultados, haciendo él el “trabajo sucio”.

¿Qué ganamos si eliminamos el ScriptManager de una página?

Y ¿si el ScriptManager se dedica a facilitarnos la vida, porque vamos a querer eliminarlo? pues he aquí las razones:

• El servidor no tiene que procesar absolutamente nada para servir los archivos en los que se transforma el ScriptManager una vez renderizado.
• Podemos cachear los archivos que sirve el ScriptManager.
• Una traba menos para eliminar el Form de la página.
• Podemos usar las Microsoft Ajax Library con independencia de la tecnología de servidor que estemos usando.

Así pues, si te encuentras en una situación en que tiene que primar el performance puedes eliminarlo que ya sabéis mis drugitos, un grano no hace el granero pero ayuda al compañero, aunque el mayor beneficio, lo vamos a encontrar cuando estemos trabajando con una tecnología de servidor que no sea ASP.NET y necesitemos usar Ajax.

Si no trabajas con ASP.NET anímate y usa esto ya que tenemos que tener en cuenta que estas librerías han sido pensadas (como ya he dicho) para facilitarnos la vida y realizar el trabajo sucio cuando estamos trabajando con Ajax por lo tanto nos vamos a encontrar con un código que nos va a permitir agilizar el desarrollo y que está totalmente testeado (evitándonos solo con esto muchísimo trabajo).

¿Cómo eliminar el ScriptManager de la página?

Eliminar el ScriptManager de la página es tan simple como obtener los archivos que descarga el ScriptManager y referenciarlos en la página.

Es decir, cuando usamos el ScriptManager, lo referenciamos en las páginas de nuestro sitio Web de la siguiente forma:

<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>

Como ya he dicho, el servidor cuando tiene que renderizar este control, lo que hace es añadirnos unas referencias a unos archivos JavaScript, así que realmente la funcionalidad para trabajar con Ajax, la están aportando estos archivos JavaScript.

Para referenciar directamente estos archivos tendremos que usar las siguientes sentencias:

<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjaxTimer.js"></script>
<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjaxWebForms.js"></script>

Como veis son sentencias estándar para asociar archivos JavaScript a nuestras páginas y supongo que ahora muchos os preguntareis ¿de dónde puedo obtener estos archivos? Lo más sencillo es que visitemos el sitio Web de Ajax de asp.net y en su sección de downloads, podemos descargarlos (Cuidado con las versiones, que funciona todo parecido pero no igual) o también puedes descargarlo del directamente del sitio de Microsoft (http://www.asp.net/ajax/ te lleva al sitio de Microsoft).

Veamos un ejemplo.

Pues sí, vamos a ver un ejemplo (que también vais a poder descargar), que es como mejor vamos a entender esto.

Vamos a desarrollar 3 páginas:

• Una página aspx que trabaja con ScriptManager.
• Una página aspx que trabaja sin ScriptManager pero con los archivos JavaScript que renderiza.
• Una página HTML que (evidentemente) trabaja sin ScriptManager pero con los archivos JavaScript que renderiza.

Además de esta vamos a desarrollar un archivo JavaScript (el mismo para todos) que se va a encargar de llamar con el mismo código a un WebService con independencia del ScriptManager.

Ejemplo de página aspx con ScriptManager.

La página aspx que va a contener el ScriptManager, va a tener el siguiente aspecto:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxExampleWithScriptManager.aspx.cs" Inherits="DeletingScriptManager.Web.AjaxExampleWithScriptManager" %>
<!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 runat="server">
<title>Ejemplo Ajax con Asp:ScriptManager</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/Services/CountriesService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/scripts/ExampleScripts.js" />
</Scripts>
</asp:ScriptManager>
<h1>
Ejemplo Ajax con Asp:ScriptManager
</h1>
<div id="divForm">
<select id="ddlContinents" onchange="GetCountries_Handler('divResults', 'ddlContinents')">
<option value="AF">África</option>
<option value="AM">America</option>
<option value="AN">Antártida</option>
<option value="AS">Asia</option>
<option value="EU">Europa</option>
<option value="OC">Oceanía</option>
</select>
</div>
<div id="divResults"></div>
<script type="text/javascript">
GetCountries_Handler('divResults', 'ddlContinents');
</script>
</form>
</body>
</html>

Como veis, en ella, tenemos un ScriptManager que nos registra un WebService y una referencia a un archivo JavaScript, esto lo hacemos con la siguiente sentencia:

<asp:ScriptManager ID="ScriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/Services/CountriesService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/scripts/ExampleScripts.js" />
</Scripts>
</asp:ScriptManager>

Ejemplo de página aspx sin ScriptManager.

La página aspx que no va a contener el ScriptManager, va a tener el siguiente aspecto:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxExampleWithoutScriptManager.aspx.cs" Inherits="DeletingScriptManager.Web.AjaxExampleWithoutScriptManager" %>
<!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 runat="server">
<title>Ejemplo Ajax sin Asp:ScriptManager</title>
<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjaxTimer.js"></script>
<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjaxWebForms.js"></script>
<script type="text/javascript" src="/Services/CountriesService.asmx/js"></script>
<script type="text/javascript" src="/scripts/ExampleScripts.js"></script>
</head>
<body>
<div>
<h1>
Ejemplo Ajax sin Asp:ScriptManager
</h1>
<div id="divForm">
<select id="ddlContinents" onchange="GetCountries_Handler('divResults', 'ddlContinents')">
<option value="AF">África</option>
<option value="AM">America</option>
<option value="AN">Antártida</option>
<option value="AS">Asia</option>
<option value="EU">Europa</option>
<option value="OC">Oceanía</option>
</select>
</div>
<div id="divResults">
</div>
<script type="text/javascript">
GetCountries_Handler('divResults', 'ddlContinents');
</script>
</div>
</body>
</html>

Si nos fijamos la única diferencia es que esta tiene una serie de referencias a ficheros JavaScript y que no tiene ScriptManager.

Veamos esas referencias:

<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjaxTimer.js"></script>
<script type="text/javascript" src="/scripts/scriptmanager/MicrosoftAjaxWebForms.js"></script>
<script type="text/javascript" src="/Services/CountriesService.asmx/js"></script>
<script type="text/javascript" src="/scripts/ExampleScripts.js"></script>

Las tres primeras, son los ficheros JavaScript que descargamos al renderizar la página en lugar del ScriptManager, las otras dos, son las referencias al WebService y al fichero JavaScript con nuestra funcionalidad Ajax.

Cuando queramos referenciar un WebService para hacer una llamada asíncrona vía Ajax, únicamente lo tenemos que incluir como un fichero de JavaScript y añadirle el sufijo “/js”.

<script type="text/javascript" src="/Services/CountriesService.asmx/js"></script>

En el código de ejemplo tenéis estas dos páginas y una página HTML (prácticamente igual que esta) que aprovecha toda la funcionalidad Ajax.

El JavaScript empleado.

El JavaScript empleado es un JavaScript estándar y no tiene nada raro, solo quería mencionar un tema y es la llamada al WebService.

Para nuestro JavaScript, hayamos puesto en la página el ScriptManager o los archivos JavaScript (los que nos descarga) le es indiferente, ya que cuando nosotros hagamos la llamada al WebService el no va a tener problemas porque los archivos que necesita (de una forma u otra) están, la llamada al WebService tiene este aspecto:

var countriesService = new DeletingScriptManager.Web.Services.CountriesService();
var obj = countriesService.GetCountriesByContinentCode(objSelect.value, OnGetCountriesComplete_Handler);

Y eso es todo por hoy, como veis, podemos dotar a nuestras aplicaciones con funcionalidad Ajax gracias a las Microsoft Ajax Library con independencia de la plataforma, y si tu plataforma es ASP.NET y no te gusta que el ScriptManager opere sin saber muy bien lo que hace, puedes quitarlo y todo funcionara ok.

Ahh se me olvidaba, el archivo MicrosoftAjaxTimer.js, solo es necesario si tenemos por ahí un UpdatePanel.

Post relacionados.

• Trabajando con Ajax y las Microsoft Ajax Library (ScriptManager, Update Panel etc..) e Iframes: Como resolver el error «Access Denied».

Descargas – Downloads

• Descarga el código de ejemplo usado en este post.

Enlaces relacionados

• El sitio de Ajax de Microsoft.

Anuncio publicitario