Nouveau référentiel sur GitHub, WebFormsJS est là !-js tutoriel-php.cn

New Repository on GitHub, WebFormsJS is Here!

WebFormsJS est une bibliothèque JavaScript qui fournit l'infrastructure permettant d'interagir avec les contrôles Web dans le framework CodeBehind ; cela permet aux développeurs de gérer facilement les balises HTML côté serveur.

Une nouvelle architecture pour un développement Web efficace

Le développement Web a toujours été un processus complexe et long, avec plusieurs niveaux de complexité et de nombreuses technologies à gérer. WebFormsJS est une nouvelle bibliothèque JavaScript qui simplifie ce processus en fournissant une infrastructure robuste pour interagir avec les contrôles Web (balises HTML) côté serveur, permettant aux développeurs de se concentrer sur les réponses du serveur sans se soucier du front-end.

L'utilisation de WebFormsJS élimine dans une large mesure le besoin de développement front-end. Vous n'aurez plus besoin d'utiliser des frameworks front-end tels que React, Angular et Vue, et vous n'aurez même pas besoin de travailler avec JavaScript sur le front-end. Veuillez noter que l'utilisation simultanée de WebFormsJS avec des frameworks front-end ou JavaScript donne également de nombreux avantages à votre projet.

Veuillez consulter l'exemple suivant :

Il s'agit d'une page HTML qui demande à une page du serveur d'ajouter son contenu dans une balise div avec l'identifiant MyTag.

AJAX simple avec JavaScript

    
  
  Request from server

Copier après la connexion

D'après les codes ci-dessus, nous avons une page HTML dans laquelle se trouve une méthode JavaScript pour recevoir la réponse d'une page sous forme AJAX.

L'exécution de la méthode JavaScript provoque trois choses :
1- Retrouver le contenu d'une page depuis le serveur et l'ajouter à une partie de la page HTML
2- Changer la couleur de fond
3- Réglez de droite à gauche pour l'un des tags

Remarque : les options 2 et 3 sont effectuées côté client, et si nous voulons les modifier depuis le serveur, nous devons demander au serveur deux fois de plus ou nous devons récupérer les trois options avec une seule requête dans un processus compliqué.

Afin de prendre en charge WebFormsJS, nous avons réécrit la page HTML ci-dessus comme ci-dessous.

Utilisation de WebFormsJS

    
   
  Request from server

Copier après la connexion

Nous avons copié le fichier web-forms.js à partir du lien ci-dessous et l'avons enregistré dans le chemin script/web-forms.js.

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

Lorsque nous demandons la page au serveur, le serveur envoie la réponse suivante.

Réponse du serveur

[web-forms] stMyTag=Server response text bc=#409354 ta=right

Copier après la connexion

Chez l'équipe Elanat, nous appelons cette structure Action Controls. Les contrôles d'action sont des codes reçus WebFormsJS au format INI. WebFormsJS détecte automatiquement si la réponse du serveur comporte ou non des contrôles d'action. Si la réponse du serveur est basée sur la structure d'un fichier INI qui commence par [web-forms], il traitera les Action Controls, sinon il remplacera la réponse du serveur sous forme d'AJAX sur la page.

Ligne 1 : stMyTag=Texte de réponse du serveur Ici, les deux premiers caractères sont st, ce qui signifie définir le texte, puis il est précisé qu'il doit être appliqué à une balise avec l'identifiant MyTag, et après le caractère égal (= ) voilà le texte reçu.
Ligne 2 : bc=#409354 Ici, les deux premiers caractères sont bc, ce qui signifie la couleur de fond, puis il est précisé qu'elle doit être appliquée à la balise body, et après le caractère égal (=) là est la valeur de la couleur.
Ligne 3 : ta
=right Ici, les deux premiers caractères sont ta, ce qui signifie aligner le texte, puis il est déterminé qu'il sera appliqué à une balise nommée li, et après le caractère égal (=) il y a une valeur de right qui signifie de droite à gauche.

WebFormsJS côté serveur

Si vous utilisez un framework back-end flexible, vous pouvez facilement créer un processus pour générer des contrôles d'action ; sinon, vous pouvez demander aux propriétaires ou aux développeurs de réécrire le cœur du framework back-end ou de créer un nouveau module pour prendre en charge WebFormsJS.

Un exemple d'utilisation de WebFormsJS dans le framework CodeBehind

Nous créons une nouvelle vue dans laquelle se trouve une entrée de type select ; nous voulons ajouter de nouvelles valeurs d'option dans la sélection, nous mettons donc deux zones de texte pour le nom et la valeur de la nouvelle option dans la vue, et nous créons également une entrée de case à cocher pour savoir si la nouvelle option est sélectionnée ou non dans cette vue .

Afficher (Form.aspx)

@page @controller FormController     Send Form Data  
   Select name  
 Select value  
 Select Is Selected  
 Select

Copier après la connexion

Nous activons d’abord l’attribut IgnoreViewAndModel ; en faisant cela, nous empêchons le retour de la page Afficher. Ensuite, nous créons une instance de la classe WebForms et ajoutons une nouvelle valeur dans la liste déroulante en fonction des valeurs envoyées via la méthode Form. Enfin, nous devons placer l'instance créée de la classe WebForms dans la méthode Control.

Contrôleur (FormController)

public partial class FormController : CodeBehindController { public void PageLoad(HttpContext context) { if (!string.IsNullOrEmpty(context.Request.Form["btn_Button"])) btn_Button_Click(context); } private void btn_Button_Click(HttpContext context) { IgnoreViewAndModel = true; Random rand = new Random(); string RandomColor = "#" + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X") + rand.Next(16).ToString("X"); WebForms Form = new WebForms(); string SelectValue = context.Request.Form["txt_SelectValue"]; string SelectName = context.Request.Form["txt_SelectName"]; bool SelectIsChecked = context.Request.Form["cbx_SelectIsSelected"] == "on"; Form.AddOptionTag(InputPlace.Id("ddlst_Select"), SelectName, SelectValue, SelectIsChecked); Form.SetBackgroundColor(InputPlace.Tag("body"), RandomColor); Control(Form); } }

Copier après la connexion

Each time the button is clicked, new values are added to the drop-down list and the background changes to a random color.

This is a simple example of CodeBehind framework interaction with WebFormsJS.

These features will be available in version 2.9 of the CodeBehind framework. In the coming days, version 2.9 of the CodeBehind framework will be released.

Advantages of WebFormsJS over using JavaScript and AJAX:

Simplified code: WebFormsJS provides a simpler and more concise way of interacting with web controls on the server-side, reducing the complexity of code and making it easier to maintain.
Automatic form serialization: WebFormsJS automatically serializes form data, eliminating the need to manually serialize and deserialize data using techniques like JSON or XML.
Progress bar: WebFormsJS includes a progress bar that displays the amount of data sent on the screen, providing a more engaging user experience.
Server-Side processing: WebFormsJS allows for server-side processing of form data, enabling more complex logic and validation to be performed on the server-side.
Support for multiple controls: WebFormsJS supports multiple controls, including checkboxes, radio buttons, select boxes, and text inputs, making it easy to interact with multiple controls on the server-side.
Customizable: WebFormsJS provides customizable options, such as the ability to set the progress bar display, error messages, and other settings.
Robust infrastructure: WebFormsJS provides a robust infrastructure for interacting with web controls on the server-side, making it suitable for large-scale applications.

In contrast, using JavaScript and AJAX:

Requires manual serialization and deserialization of form data
Does not provide a progress bar or error handling
Does not support multiple controls or server-side processing
Is more verbose and complex to use

Comparison with Frontend Frameworks

Frontend frameworks like React, Angular, and Vue have gained popularity in recent years for their ability to create dynamic and interactive user interfaces. However, compared to WebFormsJS, they have some key differences:

Complexity: Frontend frameworks can be complex to set up and require a deep understanding of JavaScript and the framework itself. In contrast, WebFormsJS simplifies web development by allowing developers to focus on server-side interactions and control the HTML elements.

Performance: While frontend frameworks offer high performance and efficiency, WebFormsJS also boasts high performance and low bandwidth consumption. It efficiently manages server responses and controls HTML tags, reducing the complexity of web development.

Customization: Frontend frameworks offer extensive customization options and flexibility to create unique user interfaces. WebFormsJS also provides customization options, such as postback, progress bar, and script extraction, but focuses more on server-side interaction.

Action Controls: WebFormsJS introduces the concept of Action Controls, which are received in INI format to define specific actions for HTML tags. This provides a clear and structured way to handle server responses and modify controls on the page.

Conclusion

WebFormsJS is a powerful JavaScript library that simplifies web development by providing a robust infrastructure for interacting with web controls on the server-side. Its advanced system, low bandwidth consumption, and customization options make it an attractive choice for developers looking to build efficient and scalable web applications.