DEV Community

Cover image for Template Language in WebForms Core 2
Elanat Framework
Elanat Framework

Posted on

Template Language in WebForms Core 2

#design #html #architecture #webformscore

Introduction

WebForms Core is a modern web technology that allows the server to directly control page rendering and updates in the browser.
Instead of sending JSON or HTML fragments, the server transmits lightweight textual commands that instruct the WebFormsJS client library to update specific parts of the DOM.

WebForms Core

The latest stable release has been version 1.9, and the upcoming WebForms Core version 2 introduces a groundbreaking concept — the Template Language, designed to make UI updates template-driven, flexible, and backend-safe.

From Commands to Template Language

In earlier versions of WebForms Core, updates were sent using predefined commands such as:

[web-forms]
st<h3>=Adriano! Your message was sent successfully.
de<h3>=1
Enter fullscreen mode Exit fullscreen mode

Each line instructed the client to perform a specific DOM operation (st = SetText, de = Delete).
This approach was powerful yet fixed — developers could only use a limited set of actions such as AddTag, SetText, and Delete.

Version 2 revolutionizes this system by introducing Template Language, enabling developers to define their own replacement patterns and update logic on the server side — safely and dynamically.

Replace — The Core of Template Language

The new Replace method is the centerpiece of Template Language.
Rather than sending a static “set text” command, the server now defines a pattern — a template that tells the client what to look for and how to transform it.

💡 What does Replace do?

Replace lets you specify a value pattern and a new value.
The WebFormsJS engine applies this pattern directly inside the DOM, modifying both text and structure based on your chosen depth and scope.

🔹 Example: Replace

Imagine your page includes the following HTML:

<div id="msg">Hello, @User! Your message was sent successfully.</div>
Enter fullscreen mode Exit fullscreen mode

On the server side, you can change the username dynamically using:

webForm.Replace("msg", "@User", "Sara", AlsoStartTag: false, Deep: false);
Enter fullscreen mode Exit fullscreen mode

When executed, the WebFormsJS client will update the DOM to:

Note: AlsoStartTag: true allows matching inside the opening tag; Deep: true enables nested replacements.

<div id="msg">Hello, Sara! Your message was sent successfully.</div>
Enter fullscreen mode Exit fullscreen mode

This happens instantly — without a page reload, without custom JavaScript.
The server simply defines the template, and the client performs the replacement using the shared Template Language rules.

ReplaceStartTag — Modify the Element Structure

The ReplaceStartTag method provides another key capability of the Template Language.
It allows you to modify the attributes or even the type of an HTML tag from the server side, without altering its inner content.

🔹 Example: ReplaceStartTag 

<input id="txtEmail" type="text" class="form-control">
Enter fullscreen mode Exit fullscreen mode 
webForm.ReplaceStartTag("txtEmail", "type=\"text\"", "type=\"email\"");
Enter fullscreen mode Exit fullscreen mode

After the update, the DOM becomes:

<input id="txtEmail" type="email" class="form-control">
Enter fullscreen mode Exit fullscreen mode

This gives developers fine-grained control over the structure and behavior of HTML elements — all managed from the server layer.

Comparison Table

Comparison of Update and UI Features in WebForms Core 1 and 2

Feature WebForms Core 1.9 WebForms Core 2.0
Update Method Fixed Commands Template Language
Flexibility Limited High
DOM Control Basic Deep & Structural
Server Logic Procedural Declarative

Increase and Decrease — Dynamic Value Updates

The Update section of WebForms Core version 2 also introduces the Increase and Decrease methods.
These methods are useful when working with numeric values in real-time updates, such as counters, scores, or prices.

🔹 Example: Increase / Decrease 

<span id="likeCount">25</span>
Enter fullscreen mode Exit fullscreen mode 
webForm.Increase("likeCount", 1);
// or
webForm.Decrease("likeCount", 1);
Enter fullscreen mode Exit fullscreen mode

The client automatically adjusts the displayed number — again, with no full-page reload.

Why Template Language Matters

The Template Language brings WebForms Core to a new level of flexibility and power.
It transforms WebForms from a command-driven system into a true template-based rendering engine, allowing developers to describe how the client should update itself rather than what it must do step by step.

Key Benefits

  • 🌐 Fully Flexible: Any part of the HTML can be modified dynamically.
  • 🔒 Backend-safe Templates: Prevents naming or syntax conflicts with backend logic.
  • ⚡ High Performance: Only minimal update instructions are transmitted.
  • 🧠 Intelligent Pattern Matching: Deep or shallow replacements can be controlled precisely.

With Replace, WebForms Core evolves from a set of fixed DOM commands to a server-driven Template Language, enabling elegant, powerful, and maintainable UI updates.

Summary

In WebForms Core version 2, the new Template Language is the foundation of the Update system.

  • Replace introduces flexible, template-based content updates.
  • ReplaceStartTag enables structural and attribute-level changes.
  • Increase and Decrease handle numeric updates efficiently.

Together, these features redefine how WebForms communicates between server and client — turning simple command sequences into a rich, declarative, and template-aware update language.

Top comments (0)