DEV Community

Cover image for Smart Template Revolution in WebForms Core 2
Elanat Framework
Elanat Framework

Posted on

Smart Template Revolution in WebForms Core 2

#html #ui #design #webformscore

So far, we have presented some of the features and capabilities of WebForms Core version 2. What you have seen so far is just the tip of the iceberg; WebForms Core 2 will revolutionize the web industry.
Given its depth and breadth, this technology has the following capabilities:

  1. Redefining web application development standards
  2. Reducing dependency on heavy front-end frameworks
  3. Returning to server-centric architectures with modern capabilities
  4. Democratizing complex application development

Our team at Elanat is introducing a complete transformation in the web development paradigm, not just another framework.

Get ready to see:

  • Architectures we thought were “impossible”

  • Simplifications that seemed “fantasy”

  • Performances that were thought to be “unattainable”

This is just the beginning!

Continuing with the features of version 2, in this article we want to expose the new feature of extracting HTML tags from a source (URL).

Extract HTML tags

One of the new features in version 2 of the WebForms Core technology is extracting HTML tags from sources (URLs). This feature allows you to create entire HTML Templates in a single large file and extract the desired templates.

WebForms Core Template

This new feature is accessible by using the "LoadHtml" method in the WebForms class on the server.

Fetch.LoadHtml(Url, FetchInputPlace, FetchScript = false)
Enter fullscreen mode Exit fullscreen mode

Url: Path to the external HTML template file.
FetchInputPlace: Specifies which template(s) to extract from the file. It has the same structure as InputPlace but is used for external templates.
FetchScript: Optional boolean to include or exclude scripts.

Example

HTML template ("/template/content.html")

<template id="Article">
  <section>
    <h2>@ArticleTitle</h2>
    <p>@ArticleText</p>
  </section>
</template>

<template id="Video">
  <section>
    <h2>@VideoTitle</h2>
    <video controls>
      <source src="@VideoPath" type="video/mp4">
      @VideoFallbackText
    </video>
  </section>
</template>

<template id="Link">
  <section>
    <h2>@LinksTitle</h2>
    <a href="@Link1Url">@Link1Text</a></li>
  </section>
</template>
Enter fullscreen mode Exit fullscreen mode

The above example shows a quality template for all types of content. Here, each section is placed inside a section tag and each section is added inside a template tag with a unique id. This template is structured and created for professional work; you are free to create the template however you like, however, we at Elanat recommend following this structured pattern.

Server code

form.AddText("<main>", Fetch.LoadHtml("/template/content.html", "Video|<section>"));
form.Replace("<main>|<section>-1", "@VideoTitle", "My video", false, true);
form.Replace("-", "@VideoPath", "/video/video1.mp4", false, true);
form.Replace("-", "@VideoFallbackText", "Your browser doesn't support HTML5 video.", false, true);
Enter fullscreen mode Exit fullscreen mode

Explanation:

  1. Fetch.LoadHtml loads the <section> from the "Video" template.
  2. form.Replace replaces the placeholders (@VideoTitle, @VideoPath, etc.) with real values.
  3. The resulting HTML is dynamically rendered on the page.

Result

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <main>
    <section>
      <h2>My video</h2>
      <video controls>
        <source src="/video/video1.mp4" type="video/mp4">
        Your browser doesn't support HTML5 video.
      </video>
    </section>
  </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • This produces ready-to-display HTML with dynamic content.
  • You can repeat the process for multiple templates (Article, Link, etc.) in the same page.

Note: If you have enabled client caching on the server side, templates are requested from the server only once. Of course, you can also create dynamic templates on the server.

Comparison to Modern Tools

Feature WebForms Core 2 React / Vue Blazor Server
HTML Templates External, server-extracted Component-based JSX / Vue templates Server-rendered
Server Interaction Built-in API calls / Fetch Server HTML updates
Learning Curve Low (HTML + server logic) High Moderate
Performance High (minimal client JS) Depends on build & hydration Moderate to Low
Real-Time Built-in (WebSocket & SSE) WebSocket / manual setup Optional

What’s Innovative Here

1. External HTML Templating

Instead of embedding HTML directly in your server-side logic, LoadHtml allows you to fetch and extract specific templates from remote or local HTML files.
This makes your UI layer:

  • Modular and maintainable — ensuring a clear separation between structure and logic
  • Easily editable by designers without requiring any server-side code changes
  • Cacheable — templates are fetched once and efficiently reused

It’s reminiscent of modern component-based architectures such as React or Vue — but executed entirely on the server side.

2. Server SPA — Without Frontend SPA Complexity

By introducing the concept of “Server Command / Client Execution”, WebForms Core 2 enables the delivery of even the most advanced front-end capabilities through purely server-side control.
This modern templating model redefines full-stack development by restoring simplicity and coherence:

  • No heavy JavaScript frameworks required
  • Real-time capabilities (via SSE or WebSocket) cover the same ground as reactive SPAs
  • Extends the traditional server-side model to a new level — powerful enough to replace many front-end frameworks in practice

In essence, it achieves SPA-like interactivity without SPA-level complexity.

3. Dynamic Placeholder Replacement

The syntax:

form.Replace("-", "@VideoPath", "/video/video1.mp4", false, true);
Enter fullscreen mode Exit fullscreen mode

illustrates data binding within pure HTML templates, using placeholder constructs such as @Placeholder, {{Placeholder}}, or <%Placeholder%>, which are replaced dynamically at render time — clean, explicit, and framework-agnostic.

This allows for flexible, server-driven rendering while maintaining clear and readable markup.

Comparison: React Component vs WebForms Core 2 Template

Feature React Component WebForms Core 2 Template Explanation / Analysis
🧭 Execution Environment Browser (Client-side) On the client after receiving the server command React renders the UI in the browser, WebForms Core is also the responsible client.
🧩 Core Nature A function of data to produce UI (UI = f(state)) HTML template with placeholders replaced at render time Both produce UI output based on input data (state or placeholders). Placeholders in WebForms Core are more flexible.
🧱 Purpose Build interactive, reusable UI on the client Build modular, reusable HTML templates on the server Both focus on modularity and reusability.
⚙️ Dependency on JavaScript High — fully JS-based Without writing JavaScript WebForms Core delivers similar flexibility without heavy client-side JS.
🧠 Data Mechanism props, state, hooks @Placeholders or methods like Replace() Both inject data into the template/component to produce dynamic output.
🔁 Re-rendering Happens in the browser when state changes Happens on the server per request or via SSE updates React is reactive on the client; WebForms Core is reactive on the server.
🧩 Composition Components can be nested (<Button /> inside <Form />) Templates can be loaded and combined (LoadHtml) The concept of composition is central in both architectures.
🧰 Development Tools JSX, Virtual DOM, React Hooks Template Loader, Fetch/Replace, Server Command Different toolsets, same goal: controlling and regenerating UI efficiently.
⚡ Performance Fast on the client, requires hydration Fast on the server, automatic hydration in client React has heavier initial load; WebForms Core is lighter but server-driven.
🔌 Real-Time / Interaction Via WebSocket or React state Via SSE & WebSocket Both support real-time updates, but via different mechanisms.
🔒 SEO / Indexing Requires SSR for SEO optimization Fully SEO-friendly In WebForms Core, you can first present the data on the page and then use the Template.
🧠 Design Philosophy “UI is a function of state” “Template is a function of data” Philosophically very similar; the difference is primarily the execution environment.
🧱 Structure Type Component Tree on the client Template Hierarchy on the server Both use a hierarchical structure to manage UI effectively.

Conclusion

The LoadHtml feature represents a forward-thinking leap that fuses the simplicity of server-centric architectures with the flexibility of modular HTML templating.

This Smart Template Revolution is not just a new feature — it’s a thoughtful reimagining of how server-side rendering can meet modern web demands:

✅ Clean, external HTML templates
✅ Server-driven rendering
✅ Cacheable, composable UI elements
✅ Minimal JavaScript dependency

Ultimately, WebForms Core 2 bridges the gap between traditional simplicity and modern flexibility — something that no web framework has achieved so far.

Top comments (0)