Inicio > .NET > [ASP.NET] Ejecutando código JavaScripts desde HTML ó desde Code-Behind

[ASP.NET] Ejecutando código JavaScripts desde HTML ó desde Code-Behind

Creo que la mayoría sabemos que en el desarrollo Web siempre hacemos uso de los scripts y creo que todos hemos tirado mínimo una función de Javascript así que este post trata de como trabajar con estos script en ASP.NET.

1.- Escribiendo Javascript desde el HTML y llamándolo desde el Code-Behind.

Código HTML

<script type="text/javascript" >
    function validarTextbox(){
        if (document.forms[0].txtNombre.value == "") {
            alert('El Cuadro de texto no puede estar vacio');
            return false;
        }
        return false;
    }
</script>

Llamándolo desde el Code-Behind

protected void Page_Load(object sender, EventArgs e)
{
    btnAceptar.Attributes.Add("onclick", "javascript:return validarTextbox();");
}

2. Escribir y llamar una función Javascript desde el Code-Behind

protected void Page_Load(object sender, EventArgs e)
{
    //cadena que contiene el script a ejecutar
    string stringJavascript;
    stringJavascript = "<script language=\"javascript\"> function poponload(){\n";
    stringJavascript += "testwindow = window.open(\"demo.htm\",\"Window\");\n";
    stringJavascript += "testwindow.moveTo(0,0);\n";
    stringJavascript += "return false;}";
    stringJavascript += "</script>";
    //registramos el script
    ClientScript.RegisterStartupScript(this.GetType(), "strJavascript", stringJavascript);
    //lo asignamos al evento del boton
    btnAceptar.Attributes.Add("onclick", "return poponload()");
}

3.- Escribir Javascript desde el Code-behind y llamarlo desde HTML

Código en el lado del Servidor

protected void Page_Load(object sender, EventArgs e)
{
    string jscript = string.Empty;
    jscript = "<script language=\"javascript\">function Mensaje(){alert" +
        "(\"Client Function in javascript is call\")}</script>";
    ClientScript.RegisterStartupScript(this.GetType(), "sJscript", jscript);
}

Llamándolo desde HTML

<a onclick="Mensaje();">
    <asp:Label id="Label1" runat="server" Width="281px" ForeColor="#8080FF">
        Clic para llamar a la función del Code-Behind
    </asp:Label>
</a>

4. RegisterClientScriptBlock

Esto lo podemos usar si es que no necesitamos que se ejecute una función que creamos, sino solo una parte de un script, aquí el como hacerlo:

Si queremos mostrar una alerta podemos hacer lo siguiente, en el HTML escribimos:

  
<script language="javascript">
    function mensaje() {
        alert("funcion llamada desde el Code-Behind");
    }
</script>

y si lo queremos ejecutar desde el Code-Behind según lo que escribí arriba sería así:

 

protected void Button1_Click(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript
            (this.GetType(), "jsKey", "javascript:mensaje();", true);
    }

Pero si se dan cuenta aquí solo es un código Javascript relativamente corto, entonces aquí es donde podemos usar RegisterClientScriptBlock y para ello lo hacemos así:

protected void Button2_Click(object sender, EventArgs e)
{
    ClientScript.RegisterClientScriptBlock
        (GetType(), "javascript", "<script>alert(" + 
        "\"Este es un Bloque de código javascript \")</script>");
}

Actualización: 2 horas más tarde😛

5. Registrar el script en el evento Load en el Header de nuestra página:

por lo regular cuando agregamos un script solo lo arrastramos desde el explorador de soluciones al Header de nuestra página y nos genera código HTML más o menos así:

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

Pero si se han dado cuenta la etiqueta Head en asp.net tiene un atributo runan=”server”, lo que significa que podemos manipularlo desde el Code-Behind lo que nos permite registrar un script desde el lado del servidor, aquí el como hacerlo, primero creamos una función que se llama RegistrarScript:

private void RegistrarScript()
{
    HtmlGenericControl script = new HtmlGenericControl("script");
    script.Attributes.Add("type", "text/javascript");
    script.Attributes.Add("src", "js/mensaje.js");
    Header.Controls.Add(script);
}

Aquí nos indica que en nuestro proyecto tenemos un Javascript llamada “mensaje.js” dentro de una carpeta llamada js. Este método lo ponemos dentro del evento load de nuestra página:

protected void Page_Load(object sender, EventArgs e)
{
    RegistrarScript();
    Button1.Attributes.Add("onclick", "javascript:return mensaje()");
}

Y de esta manera podemos registrar también nuestros script, e incluso las hojas de estilo.

Saludos.

Etiquetas de Technorati: ,,

Categorías:.NET
  1. julio 20, 2009 a las 5:13 pm

    Hola, interesante y completisimo este post, te felicito.

    Solo creo q hubiera sido interesante para cerrar el tema por completo, que hubieses puesto un ejemplo más sobre como registrar y ejecutar un bloque script de cliente, dentro de una página aspx que está usando el objeto UpdatePanel. De todas fromas te dejo un link que está mucho menos completo que este tuyo pero que si comentan lo que te mensiono:

    http://derbisnet.blogspot.com/2009/06/registrar-script-de-clientes-dentro-de.html

    Salu2,
    Derbis

    • julio 20, 2009 a las 6:22 pm

      Hola Derbis,

      Tienes razon, pero seguramente estare escribiendo sobre esto en unos días, porque ademas de un un bloque puedes registrar un scrip completo las funciones son similares a las que contiene la clase Page, solo que como es con AJAX a veces tenemos la necesidad de usar scripts dentro del update panel o incluso diferentes updatepanes que se encuentre en una misma página.

      Gracias por escribir.

      Saludos.

  2. becavas
    julio 20, 2010 a las 3:21 pm

    exelente man, pero dime como haces para poner publicidad en wordpress? …jejej

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: