Template Language in WebForms Core 2

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.

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

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>

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

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

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>

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">

webForm.ReplaceStartTag("txtEmail", "type=\"text\"", "type=\"email\"");

After the update, the DOM becomes:

<input id="txtEmail" type="email" class="form-control">

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

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>

webForm.Increase("likeCount", 1);

// or

webForm.Decrease("likeCount", 1);

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.