WebForms Core 2.1 is coming soon from Elanat.
The new version introduces a collection of capabilities designed to further expand the server-driven approach of WebForms Core.
One of these new capabilities is Morphing.
Morphing provides a way to synchronize an existing DOM element with a new HTML structure without necessarily replacing the existing element itself.
This makes it possible to update HTML structures while preserving the identity of existing DOM elements.
Morphing Morphing is a DOM synchronization mechanism that compares an existing HTML element with a new HTML structure and applies the required changes to the existing DOM.
Unlike a traditional replacement operation such as: Morphing does not simply discard the existing element and create another one.
Instead, it analyzes the existing element and the new element and performs the necessary operations: Add new attributes Update existing attributes Remove attributes that no longer exist Add new child elements Update existing child elements Remove obsolete child elements Match elements using and Preserve existing DOM element identity whenever possible Preserve registered event listeners when new Nodes have to be created The goal is to make the smallest necessary changes to the DOM.
Reflection vs Morphing WebForms Core 2.1 contains both Reflection and Morphing, but they serve different purposes.
Reflection is primarily a merge operation.
For example, if the target contains: and the source contains: Reflection can merge the source into the target, adding the class and child without treating the source as a complete replacement definition.
Morphing has a different philosophy.
The source represents the desired structure.
If the source does not contain an element or attribute that exists in the target, Morphing can remove it.
Therefore: This distinction makes both mechanisms useful for different types of server-driven UI operations.
The WebForms Core API Morphing can be invoked from the WebForms class.
The first method accepts HTML directly: The second method uses an existing element as the source: For example: Here: is the destination element. is the source element.
The developer does not need to manually write JavaScript to perform the DOM synchronization.
A Complete Example Consider the following page.
Initially, the page contains a user card: A template describes the new state of this element: The controller can perform the Morph operation with: The page can trigger the operation with a normal WebForms Core request: What happens during Morphing?
Before Morphing, the target is: The source describes: Morphing compares these two structures and applies the necessary changes.
The resulting DOM becomes: Attribute Morphing Attributes are synchronized between the target and source.
For example: becomes: The new attribute: is added.
The class: becomes: And the style is updated according to the source.
Attributes that exist in the target but no longer exist in the source are removed.
Therefore Morphing effectively synchronizes the attribute set: Child Element Morphing Morphing also operates recursively on child Nodes.
In the example, this element: does not exist in the new structure.
Therefore it is removed.
Likewise: is removed.
At the same time: is added.
The existing: is retained and synchronized.
Element Matching One of the important parts of Morphing is determining whether a new element corresponds to an existing element.
WebForms Core uses identifiers such as: and: for this purpose.
For example, both the old and new structures contain: Therefore Morphing can recognize that they represent the same DOM element.
The existing Node can consequently be retained while its attributes and contents are updated.
This is different from simply deleting the old button and creating a completely new button.
Event Listeners DOM cloning has an important limitation: does not copy event listeners registered through .
WebForms Core Morphing therefore integrates with the WebForms Core event regist