Morphing Feature in WebForms Core 2.1

WebForms Core 2.1 is set to release soon from Elanat. This update introduces Morphing, a feature designed to seamlessly update HTML structures while maintaining the identity of existing DOM elements. Unlike traditional replacement methods, Morphing analyzes both the existing and new HTML structures, applying necessary changes with minimal alterations to the DOM.

Reflection and Morphing coexist in WebForms Core 2.1, but they serve distinct purposes. Reflection is a merge operation, adding new attributes or child elements without treating the source as a full replacement. Morphing, on the other hand, aims to synchronize the target with the source, removing elements or attributes that do not exist in the target. This distinction allows both mechanisms to be useful in various server-driven UI operations.

WebForms Core 2.1 provides two methods to invoke Morphing: SetMorph (string InputPlace, string Tag) and SetMorphByOutputPlace (string InputPlace, string OutputPlace). The latter is particularly useful, as it allows developers to perform DOM synchronization without manually writing JavaScript code. For instance, by setting userCard as the destination element and userCardTemplate as the source element, developers can easily update the element's HTML structure.

Consider a scenario where a user card on a webpage initially looks like this:

<div id="userCard" class="card" data-user="123" style="border: 1px solid #ccc; padding: 10px;">

<h3>User</h3>

<p id="userEmail" style="border: 1px solid #ccc; padding: 10px;">Email: user@example.com</p>

<button id="editButton" class="btn-edit" onclick="editUser()">Edit</button>

<span id="oldTag">Old tag</span>

</div>

A new template might describe the updated state of this element:

<template id="userCardTemplate">

<div id="userCard" class="card premium" data-user="456" data-role="admin" style="background-color: #f0f8ff; border: 2px solid blue; margin: 5px;">

<h3>User</h3>

<button id="editButton" class="btn-vip" onclick="VIP()">VIP</button>

<span id="newTag">New tag</span>

</div>

</template>

Upon receiving a request with the "set-morph" parameter, the controller can perform the Morph operation using:

using CodeBehind;

public void PageLoad(HttpContext context)

{

if (context.Request.Query.ContainsKey("set-morph") && context.Request.Headers.Contains("Post-Back"))

{

SetMorph_ByOutputPlace(context);

return;

}

}

private void SetMorph_ByOutputPlace(HttpContext context)

{

WebForms form = new WebForms();

form.SetMorphByOutputPlace("userCard", "userCardTemplate");

IgnoreAll();

Write(form.Response());

}

The Morphing process begins with the target page displaying the initial user card. After the Morph operation, the user card updates to reflect the new structure defined in the template, with the identity of existing DOM elements preserved whenever possible.