An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Llamar a funciones JavaScript desde DotVVM con JS Directive
Hola! Un gusto saludarte. Para aprender a llamar funciones JavaScript desde DotVVM en ASP.NET, y viceversa, en este artculo tutorial aprenderemos a utilizar JS Directive al solicitar dos nmeros desde una pgina web, realizar la operacin en JavaScript, y mostrar los resultados en dicha pgina.
Qu es JS Directive?
La directiva JS es un conjunto de caractersticas que ofrece una manera de interactuar entre los controles de DotVVM y el cdigo JavaScript. Por ejemplo, con JS Directive podemos llamar funciones JavaScript desde DotVVM, y enviar datos desde JavaScript hacia DotVVM.
Nota: Esta funcionalidad fue incorporada en DotVVM 3.0.
Pasos a seguir
Para que nosotros podamos establecer una comunicacin entre DotVVM y JavaScript, estos son los pasos que debemos seguir:
- Declarar un modulo JavaScript con sus respectivas funciones.
- Registrar ese modulo en DotVVM Startup.
- Importar el modulo declarado en nuestras vistas DotVVM.
- Manos a la obra! Llamar funciones JavaScript desde DotVVM, o recibir datos.
Caso practico
Para ver el funcionamiento de JS Directive en un ejemplo, sigamos los pasos antes mencionados para solicitar dos nmeros al usuario, llamar una funcin de JavaScript que realice esa operacin, y finalmente mostrar el resultado en la pgina web.
Nuestro ejemplo se visualizara de la siguiente manera:
Lo primero que debemos tener es el modulo JavaScript con sus funciones correspondientes, en este caso tenemos un archivo llamado JavaScript.js
ubicado en el wwwroot
con las siguientes definiciones:
export default (contextApp) => new App(contextApp);var WEB;class App { constructor(contextApp) { this.contextApp = contextApp; WEB = contextApp; } operation(a, b) { let result = a + b; WEB.namedCommands["ResultOperation"](result); }}
Aqu la funcin operation
ser la encargada de realizar la suma para luego poner el resultado en la seccin ResultOperation
definida en una vista con DotVVVM.
Con esta clase App
, y su contexto definido, ahora podemos registrarlo en DotVVM para poder realizar llamadas desde DotVVM hacia JavaScript, y viceversa. En este sentido, debemos dirigirnos a la clase DotVVM Startup
, y en el mtodo ConfigureResources
hacer referencia al archivo JavaScript en cuestin, y ponerle un nombre a este registro (en este caso el nombre ser module):
private void ConfigureResources(DotvvmConfiguration config, string applicationPath){ //JS Directive config.Resources.Register("module", new ScriptModuleResource(new UrlResourceLocation("~/JavaScript.js")) { //Dependencies = new[] { "external/other-js-file" } });}
Con esta definicin, ya podemos utilizar JS Directive. Para la suma de los dos nmeros, definiremos tres variables en el ViewModel (en este caso en el DefaultViewModel.cs
):
public class DefaultViewModel : MasterPageViewModel{ public int Number1 { get; set;} public int Number2 { get; set;} public int Result { get; set;}}
Finalmente, tendremos la seccin de la vista ubicada en Default.dothtml
de la siguiente manera:
@viewModel JSDirective.ViewModels.DefaultViewModel, JSDirective@masterPage Views/MasterPage.dotmaster@js module<dot:Content ContentPlaceHolderID="MainContent"> <div class="content"> <div class="content__text"> <h1>JS Directive Demo</h1> <h3>Add two numbers</h3> <ul class="content-page"> <li><b>Number1: </b></li> <li><dot:TextBox Text="{value: Number1}" Type="Number" /></li> <li><b>Number2: </b></li> <li><dot:TextBox Text="{value: Number2}" Type="Number" /></li> </ul> <dot:Button Text="Calculate" Click="{staticCommand:_js.Invoke("operation", Number1, Number2);}" /> <dot:NamedCommand Name="ResultOperation" Command="{staticCommand: (int id) => _root.Result = id}" /> <h3>Result: <b>{{value: Result}}</b></h3> </div> </div></dot:Content>
En la vista, es necesario hacer referencia al modulo JavaScript que queremos utilizar, en este caso podemos referenciarlo con el identificador js
, con el nombre del modulo registrado previamente:
@js module
Luego, en esta vista podemos mencionar tres cosas importantes:
- Para establecer los dos nmeros a sumar, se han utilizado dos controles de DotVVM de tipo
TextBox
. - Para llamar a la funcin JavaScript podemos hacerlo con un
Button
, especificando el nombre de la funcin, y enviando los parmetros respectivos (Number1
, yNumber2
). - El control
NamedCommand
nos permite invocar comandos desde JavaScript, en este caso se ha definido una seccin con el nombre ResultOperation, para enviar el valor de la operacin desde JavaScript y guardarlo en la variableResult
(definida en el ViewModel desde DotVVM).
Ccon este proceso, hemos podido llamar funciones JavaScript desde DotVVM, y enviar valores desde JavaScript hacia DotVVM.
La documentacin completa de JS Directive se puede revisar desde la documentacin en DotVVM: JS directive overview.
Gracias por leer
Muchas gracias por leer, espero que este artculo te haya parecido interesante y pueda serte de utilidad en el futuro.
El cdigo fuente de este ejemplo lo puedes encontrar en el siguiente repositorio en GitHub: DotVVM JS Directive.
Si tienes alguna pregunta o alguna idea que necesites discutir, ser un gusto poder colaborarte y juntos intercambiar conocimientos entre s.
Nos vemos en Twitter! :)
Original Link: https://dev.to/esdanielgomez/llamar-a-funciones-javascript-desde-dotvvm-con-js-directive-32f6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To