ASP.NET 2.

0
MANUEL RETAMOZO A.

Manipular Paginas y Controles de

Servidor con JavaScript
__________________________________________________________________________________________________________

Habitualmente a los Desarrolladores nos gusta incluir algun tipo de

Función JavaScrit personalizada en nuestras páginas ASP.

ASP.NET utiliza la propiedad page.ClientScript para registrar y colocar

funciones JavaScript en nuestras paginas ASP.Net.En este manual se
va a mostrar 3 de estos métodos;existen más métodos y propiedades
a travéz del objeto ClientScript,pero estos 3 son los mas útiles.

NOTA:

Los métodos Page.RegisterStartupScript y

Page.RegisterClientScriptBlock

De .NET Framework 1.0/1.1 ahora se consideran obsoletos.Ambas

posibilidades para registrar secuencias de comandos requerían un
conjunto de Parametros de claves/secuencias de comandos.Como se
implicaban 2 metodos independientes,habia muchas posibilidades
de que el nombre de la clave colisionara.Pero ahora la propiedad
Page.ClientScript esta diseñada para reunir todos los registros se
secuencias de comandos,haciendo que nuestro codigo se menos
propenso al error.

No obstante aun se pueden utilizar los metodos anteriores a los de la

propiedad ClientScript,pero nos saldra un mensaje de informacion
recomendandonos actualizar nuestra linea de codigo,como se
muestra en la imagen sgt:

Uso del Page.ClientScript.RegisterClientScriptBlock :

ASP.NET 2.0 Página 1

ASP.NET 2.0
MANUEL RETAMOZO A.

Este metodo nos permite colocar una Funcion JavaScript en la parte

superior de la pagina,lo que significa que la secuencia de comandos
se encuantra en su sitio para el inicio de la pagina en el explorador.El
uso de este comando se apreciara mejor en el sgte simple ejemplo.

Ejemplo:Validaremos las cajas de texto mediante JavaScript.

Agregamos 2 Textbox y un boton

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Button2.Click
If Me.TextBox1.Text = "" And Me.TextBox2.Text = "" Then
Dim codigo_script As String = "function AlertHello()
{ alert('Ingrese Datos !!');}"
Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType()
, "MyScript", codigo_script, True)
Me.Button2.OnClientClick = "AlertHello()"
Else
Dim codigo_script2 As String = "function AlertHello2()
{ alert('Bienvenido: " & Me.TextBox1.Text & "');}"
Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(),
"MyScript", codigo_script2, True)
Me.Button2.OnClientClick = "AlertHello2()"
End If
End Sub

SINTAXIS: Este metodo Tiene 2 posibles construcciones :

1)RegisterClientScriptBlock(Tipo,Clave,Secuencia de comandos)

ASP.NET 2.0 Página 2

ASP.NET 2.0
MANUEL RETAMOZO A.

2) RegisterClientScriptBlock(Tipo,Clave,Secuencia de
comandos,especificacion de etiqueta de secuencia de comandos)

Uso del Page.ClientScript.RegisterStartupScript :

Este metodo no es muy diferente del metodo
RegisterClientScriptBlock . La gran diferencia es que
RegisterStartupScript coloca la secuencia de comandos al final de
la Pagina ASP.Net en lugar de al principio.De hecho el metodo
RegisterStartupScript acepta los mismos constructores que el
metodo RegisterClientScriptBlock:

SINTAXIS:

1) RegisterStartupScript(Tipo,Clave,Secuencia de comandos)

2) RegisterStartupScript(Tipo,Clave,Secuencia de
comandos,especificacion de etiqueta de secuencia de comandos).

El uso de este comando se apreciara mejor en el sgte ejemplo:

Ejemplo:

- En este ejemplo capturaremos el Id del empleado mediante la

selección del listbox desde la tabla Employees de la BD=Northwind.
Mostrandolos con el comando
Page.ClientScript.RegisterStartupScript.

-Creamos un Procedimiento almacenado:

create proc usp_busqueda

@nombre varchar(10)
as
select alias=(convert(varchar(10),employeeid) + ' =>Codigo del
Empleado'),Nombres=(firstname +space(1)+lastname) from
employees where firstname like @nombre +'%'
go
-Creamos una Clase: (Class1.vb)

Imports Microsoft.VisualBasic
Imports System.Data
Imports System.Data.SqlClient

ASP.NET 2.0 Página 3

ASP.NET 2.0
MANUEL RETAMOZO A.

Public Class Class1

Dim cn As New SqlConnection("server=localhost;integrated
security=true;database=northwind")
Public Function lista_empleados(ByVal nombre As String) As
DataTable
Dim cmd As New SqlCommand("usp_busqueda", cn)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.Add("@nombre", SqlDbType.VarChar, 10).Value
= nombre
Dim da As New SqlDataAdapter(cmd)
Dim tbl As New DataTable
da.Fill(tbl)
Return tbl
End Function
End Class

-En nuestra pagina utilizaremos un TextBox y un ListBox :

Partial Class Default3

Inherits System.Web.UI.Page
Dim obj As New Class1
Protected Sub TextBox1_TextChanged(ByVal sender As Object,
ByVal e As System.EventArgs) Handles TextBox1.TextChanged
Me.ListBox1.DataSource =
obj.lista_empleados(Me.TextBox1.Text)
Me.ListBox1.DataTextField = "Nombres"
Me.ListBox1.DataValueField = "alias"
Me.ListBox1.DataBind()
End Sub

ASP.NET 2.0 Página 4

ASP.NET 2.0
MANUEL RETAMOZO A.

Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As

Object, ByVal e As System.EventArgs) Handles
ListBox1.SelectedIndexChanged
Dim myscript As String =
"alert(document.forms[0]['ListBox1'].value);"
Me.Page.ClientScript.RegisterStartupScript(Me.GetType(),
"myKey", myscript, True)

End Sub
End Class

Diferencia Notable entre

ClientScript.RegisterClientScriptBlock y
ClientScript.RegisterStartupScript :
Se sostiene que la diferencia entre uno con el otro es el lugar donde
se registra la secuencia de comandos en la pagina. Aparentemente
esta diferencia no es crucial,pero en el fondo es MUY IMPORTANTE.

Nota:
Si tenemos un fragmento JavaScript trabajando con uno de los
controles de nuestra pagina normalmente se tiene que utilizar el
ClientScript.RegisterStartupScript en lugar del
ClientScript.RegisterClientScriptBlock.

ASP.NET 2.0 Página 5

ASP.NET 2.0
MANUEL RETAMOZO A.

Ejemplo:
Por ejemplo vamos a crear una pagina que incluya un simple control
TextBox que contenga como valor predeterminado la fecha y hora
actual,utilizamos el siguiente codigo:

a)Utilizamos Primero el
ClientScript.RegisterClientScriptBlock:
-Creamos el TextBox1:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br

/>

-Dentro del Evento Load:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load
Dim fecha As Date
fecha = Date.Now
Me.TextBox1.Text = fecha
Dim codigo_script As String =
"alert(document.forms[0]['TextBox1'].value);"
Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(),
"myKey", codigo_script, True)
End Sub
End Class

-Al Ejecutar solo se observa que el textbox1 se muestra la fecha y

hora mas no sale ningun mensaje capturado donde se muestre la
fecha y hora:

b)Utilizando el ClientScript.RegisterStartupScript:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br
/>
ASP.NET 2.0 Página 6
ASP.NET 2.0
MANUEL RETAMOZO A.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load
Dim fecha As Date
fecha = Date.Now
Me.TextBox1.Text = fecha
Dim codigo_script As String =
"alert(document.forms[0]['TextBox1'].value);"
Me.Page.ClientScript.RegisterStartupScript (Me.GetType(), "myKey",
codigo_script, True)
End Sub
End Class

-Al ejecutar se obtiene el resultado que se esperaba:

Que susedio??
1)En el primer ejemplo usando el metodo
ClientScript.RegisterClientScriptBlock se muestra un error
devido a que la funcion JavaScript se ha activado antes de que incluso
se colocase en la pantalla el cuadro de texto,y se ha producido un
error de pagina.

2)en el segundo ejemplo utilizando el metodo

ClientScript.RegisterStartupScript

Se aprecia que este metodo coloca a la funcion JavaScript en la parte

inferior de la pagina,por lo que cuando se inicia realmente
JavaScript,encuentra el elemento TextBox1 y funciona como estaba
previsto.

ASP.NET 2.0 Página 7

ASP.NET 2.0
MANUEL RETAMOZO A.

Uso del
Page.ClientScript.RegisterClientScriptInclude:
Este método RegisterClientScriptInclude es sumamente
importante como los otros 2 ya mencionados,este metodo se
caracteriza devido a que muchos desarrolladores colocan su
JavaScript dentro de un archivo *.js,algo considerado como la mejor
practica ya que facilita realizar cambios globales de JavaScript a una
aplicación.Podemos registrar los archivos de secuencia de comandos
en nuestras paginas utilizando este metodo de la sgte manera:

Ejemplo: Agregamos un archivo con formato

*.js(JavaScript)a nuestro proyecto.
Dim myscript As String = "codigo.js"

Me.Page.ClientScript.RegisterClientScriptInclude("myKey", myscript)

ASP.NET 2.0 Página 8