viernes, septiembre 17, 2021

Cómo llamar funciones JavaScript desde el code-behind en ASP.NET

En este artículo vamos a explicar como interactuar entre aplicaciones en ASP.NET y JavaScript o jQuery. Como llamar una función JavaScript desde el «code-behind».

Como desarrolladores no podemos pretender utilizar solo una tecnología o forma de programación, debemos utilizar todos los recursos que tengamos a mano para poder brindarle una mejor experiencia al usuario final.

Para llamar una función javascript debemos utilizar el método ScriptManager.RegisterStartupScript(), y aquí explicaremos como utilizarlo.

ScriptManager.RegisterStartupScript(Control control, Type type,string key, string script, bool addScriptTags);

Para este ejemplo vamos a crear un archivo .js en nuestra solución y le vamos a llamar funciones.js

Creamos una función sencilla que genere una simple alerta. Agregamos el siguiente código al archivo funciones.js

function myFuncionAlerta() {
    alert("Alerta JavaScript")
}

Agregamos un archivo .aspx llamado index.aspx, al cual le agregamos un botón y la referencia al archivo funciones.js

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="funciones.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="miBoton" runat="server" 
                    Text="Llama JavaScript" />
    </div>
    </form>
</body>
</html>

En el code-behind del archivo index.aspx modificamos el evento click del botón miBoton y llamamos la función javascript con el método ScriptManager.RegisterStartupScript(),

Partial Class index
    Inherits System.Web.UI.Page

    Protected Sub miBoton_Click(sender As Object, e As EventArgs) Handles miBoton.Click

        ScriptManager.RegisterStartupScript(Me, Me.Page.GetType,
                                            "myFuncionAlerta", "myFuncionAlerta();", True)

    End Sub

End Class

Una vez que tenemos todo listo, ejecutamos la aplicación y el botón asp.net debe llamar la función JavaScript.

Debería de verse algo similar a esto:

Parece un ejemplo muy simple, pero con esto ya puedes crear funciones y procesos mucho más complejos en todos los niveles de tu aplicación.

También puedes aprender a utilizar el método RegisterClientScriptBlock, es un método similar pero genera el código en lugares distintos de la página. En un siguiente artículo explicaremos las diferencias. Para este ejemplo cualquiera de los dos métodos funcionan igual.

'Declaración
Public Shared Sub RegisterClientScriptBlock ( _
  control As Control, _
  type As Type, _
  key As String, _
  script As String, _
  addScriptTags As Boolean _
)

Call JavaScript Function from Code-behind in Asp.net C# Vb




Roy Rojashttp://www.dotnetcr.com
Con más de 20 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español. royrojas.com | dotnetcr.com | GitHub

Redes Sociales

2,736FansMe gusta
326SeguidoresSeguir

Popular esta semana

SQL Server - Merge

MERGE en SQL Server para Insert, Delete y Update con dos tablas

Ejemplo práctico usando MERGE para sincronizar dos tablas, Insert, Update y Delete en un solo query. Válido para SQL SERVER 2008 o superior.

Calcular la distancia entre dos puntos geográficos en SQL Server

En este ejemplo mostramos como calcular la distancia en metros o kilómetros entre dos puntos geográficos, por latitud y longitud. El resultado lo obtenemos en metros o kilómetros.

DELETE con subconsulta o INNER JOIN

En el siguiente ejemplo se explica la forma en que se pueden eliminar registros en nuestras tablas con instrucciones DELETE más complejas que las...

Últimos artículos

Flutter - Instagram Clone App

Instagram Clone App con Flutter

Marvin Stanley Valenzuela nos comparte un reto y genialidad a la vez, excelente práctica de la que podemos aprender mucho, diseñó en...

¿Cómo agregar una IP adicional en una VM Ubuntu en Azure?

Lo más común al momento de crear y configurar un nuevo servidor es que a este le asigne un solo IP, pero...
flutter one year

Después de un año con Flutter, esto es lo que aprendí

La historia comenzó cuando un día desperté pensando en tener un nuevo proyecto personal. Me dije a mí misma que hay muchas...
promocionar app

Cómo promocionar gratis tu app usando tappx

Como todos los que me siguen y mis redes sociales sabrán, recientemente lancé mi primera aplicación, pero más allá del desafío tecnológico de...