Introduction
To build and develop a web-based system, you sometimes need to be able to interact with a powerful JavaScript library. These libraries can be tools for building web games or tools for creating advanced charts. For example, you might use libraries like Three.js to create 3D environments, Chart.js or D3.js for data visualization, or Phaser for building 2D games. Choosing the right library depends on the project needs, the level of customization you expect, and the functionality you want to provide. At Elanat, in version 2 of WebForms Core technology, we have added powerful features for interacting with external JavaScript libraries.
Some important JavaScript libraries
Here are a few categories of JavaScript libraries that are great for different uses in web-based projects.
Data visualization and charts:
- D3.js – Powerful for creating interactive and custom charts.
- Chart.js – Simple and beautiful for classic charts (line, bar, pie, etc.).
- ECharts – A product from Baidu with high performance and many features.
- Plotly.js – Suitable for scientific analysis and big data.
- Vis.js – For network charts, timelines and complex data.
Graphics, animation and gaming:
- Three.js – For 3D rendering with WebGL.
- PixiJS – For high-performance 2D graphics.
- Phaser – Popular and open-source 2D game engine.
- GSAP (GreenSock) – One of the best tools for creating smooth and controlled animations.
- p5.js – For creative projects, design and digital art.
Machine learning and AI in the browser:
- TensorFlow.js – Running machine learning models on the client side.
- Brain.js – for simple neural networks in JavaScript.
- ml5.js – a simpler UI for TensorFlow.js for creative projects.
Working with data, formats and algorithms:
- Lodash or Underscore – powerful tools for working with arrays, objects and data.
- Moment.js (or Day.js) – date and time management.
- Papa Parse – for reading and processing CSV files.
- Math.js – for complex mathematical and statistical calculations.
- Fuse.js – for text search and fuzzy search in data.
UI and small interactions:
- Tippy.js – for beautiful tooltips and popups.
- Swiper – for creating responsive and touch-friendly sliders.
- SortableJS – for drag-and-drop lists and elements.
- Anime.js – Simple but eye-catching animations.
- ScrollMagic – For creating scroll-dependent animations.
In WebForms Core technology, you can interact with JavaScript libraries through server-side code (in the WebForms class on the server and using a programming language on the backend). Interestingly, WebForms Core offers broader and more powerful features than front-end frameworks such as React, Vue, and Angular; however, because the foundation of front-end frameworks is built on the client side, developers cannot distinguish between the features and capabilities of these frameworks and the independent JavaScript structure.
Module Support
In version 2 of WebForms Core technology, the ability to dynamically invoke JavaScript modules has been added. This feature allows the necessary scripts to be loaded only when needed, based on server-side execution logic or user state, without including the entire set of scripts in the page by default. In this way, the performance of the application is increased and the amount of data transferred to the browser is reduced. In addition, developers can organize JavaScript modules in a modular and manageable way, and benefit from easier maintenance and independent updates of each part. This approach makes WebForms Core a more modern platform and equal to today's front-end architectures such as SPAs.
Note: With a little ingenuity, it is even possible to dynamically extract JavaScript module functions from a script to consume less bandwidth (and not download the entire module). This is something you can do on the server, but you can't do on the client side!
To call the module, you need to make sure that the type attribute in the WebFormsJS script tag is set to module.
<script type="module" src="web-forms.js"></script>
Example:
form.LoadModule("/module/my-module.js", ["func1", "func2", "funcn"]);
In the above method, we add the module using the module path. In the second part, we can specify the methods (functions) of the module that we need; if you do not specify the methods, all of them will be added in the modules section.
You can also remove the module and all of the module's methods by calling the "UnloadModule" method.
form.UnloadModule("/module/my-module.js");
We can also use the "DeleteModuleMethod" method to delete module methods.
form.DeleteModuleMethod("func2");
Note: Please note that the structure of adding a module in dynamic mode in JavaScript is done async and WebForms Core commands are executed hierarchically. If you want to use its methods immediately in the same Action Control after loading the library, you must use the Condition structure. We will teach you this later in the article and in the section "Checking the existence of a method (function)".
Calling methods in Action Control
In this version, the "CallMethod" method and the "CallModuleMethod" method have also been added. This feature is for calling methods that we do not need their return value and simply want to perform an action by calling them.
Example:
form.CallMethod("alert", ["Hello WebForms Core!"]);
form.CallModuleMethod("func1", ["arg1", "arg2", "argn"]);
Calling and assigning methods in the Fetch class on the server
In the Fetch class on the server, it is possible to call and assign Module methods using the "ModuleMethod" method.
Note: In version 2 of WebForms Core in the Fetch class on the server, the "CallMethod" method has also been renamed to "Method".
This is to get the return value of the methods that we have called and we want to use these values.
Example:
form.SetValue("TextBox1", Fetch.ModuleMethod("FunctionName", ["arg1", "arg2", "argn"]));
Assigning JavaScript methods in tag events
In this version, we have added the ability to assign methods and module methods in tag events. Previously, we could only call JavaScript methods in the Fetch class on the server, but now we can do it much faster. This new feature allows us to assign JavaScript methods directly in the events of DOM elements in HTML, so we do not need to make additional requests to the server.
Example:
By using the following methods, you can add JavaScript functions from the server to the events of each element.
Set Method:
- SetMethodEvent
- SetMethodEventListener
- SetModuleMethodEvent
- SetModuleMethodEventListener
form.SetMethodEvent("<body>", HtmlEvent.OnLoad, "Method1");
form.SetMethodEventListener("Button1", HtmlEventListener.Click, "Method2", ["arg1"]);
form.SetModuleMethodEvent("<p>-1", HtmlEvent.OnClick, "Method3", ["arg1", "arg2"]);
form.SetModuleMethodEventListener("{my-class}", HtmlEventListener.DoubleClick, "Method4", ["arg1", "arg2", "arg3"]);
Explain above code:
Line 1: Assigns the method "Method1" to the body element's load event.
Line 2: Assigns the method "Method2" with argument "arg1" to the click event of an element with id "Button1"
Line 3: Assigns the module method "Method3" with two arguments to the click event of the last paragraph element.
Line 4: Assigns the module method "Method4" with three arguments to the double-click event in first element with the class "my-class".
You can remove these event method assignments using comparable remove functions with the same parameter structures.
Remove Method:
- RemoveMethodEvent
- RemoveMethodEventListener
- RemoveModuleMethodEvent
- RemoveModuleMethodEventListener
form.RemoveMethodEvent("<body>", HtmlEvent.OnLoad, "Method1");
form.RemoveMethodEventListener("Button1", HtmlEventListener.Click, "Method2");
form.RemoveModuleMethodEvent("<p>-1", HtmlEvent.OnClick, "Method3");
form.RemoveMethodEventListener("{my-class}", HtmlEventListener.DoubleClick, "Method4");
Checking for the existence of a method (function)
In this version, we have added the ability to check for the existence of methods and module methods.
Example:
form.IsTrue(Fetch.HasMethod("FunctionName"), 100);
form.CallMethod("FunctionName");
You can use the same thing for external module methods
form.IsTrue(Fetch.HasModuleMethod("FunctionName"), 100);
form.SetValue("TextBox1", Fetch.ModuleMethod("FunctionName", ["arg1", "arg2", "argn"]));
Note: WebForms Core technology is also available for all important programming languages on the web. These programming languages are slightly different from each other; even in different versions of themselves, there may be differences. The above code is suitable for C# version 12 and higher, and if you use a lower version of C#, you should initialize the arguments of the "ModuleMethod" method as follows:
new[] {"arg1", "arg2", "argn"}
Conclusion
Calling custom JavaScript functions from the server side shows that WebForms Core retains the flexibility needed for specific client-side scenarios (such as interacting with a complex graph or performing native calculations). In this way, the developer can implement heavy processing logic or specific UI interactions without leaving the WebForms Core framework, and establish dynamic communication between the server-side and client-side parts. This feature allows the server's processing power to be combined with the dynamism of JavaScript in the browser, creating a smoother and smarter experience for the end user. Also, using this approach, it is possible to design reusable JavaScript modules that operate in full harmony with the life cycle of web pages and server-side events.
Top comments (0)