{
  "id": 3566595,
  "title": "Morphing Feature in WebForms Core 2.1",
  "url": "https://urgent.news/2026/08/26/morphing-feature-in-webforms-core-2-1",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-26T18:31:27.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/elanatframework/morphing-feature-in-webforms-core-21-5d6o"
  },
  "original_language": "en",
  "account": "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.\n\nReflection 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.\n\nWebForms 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.\n\nConsider a scenario where a user card on a webpage initially looks like this:\n<div id=\"userCard\" class=\"card\" data-user=\"123\" style=\"border: 1px solid #ccc; padding: 10px;\">\n<h3>User</h3>\n<p id=\"userEmail\" style=\"border: 1px solid #ccc; padding: 10px;\">Email: user@example.com</p>\n<button id=\"editButton\" class=\"btn-edit\" onclick=\"editUser()\">Edit</button>\n<span id=\"oldTag\">Old tag</span>\n</div>\n\nA new template might describe the updated state of this element:\n<template id=\"userCardTemplate\">\n<div id=\"userCard\" class=\"card premium\" data-user=\"456\" data-role=\"admin\" style=\"background-color: #f0f8ff; border: 2px solid blue; margin: 5px;\">\n<h3>User</h3>\n<button id=\"editButton\" class=\"btn-vip\" onclick=\"VIP()\">VIP</button>\n<span id=\"newTag\">New tag</span>\n</div>\n</template>\n\nUpon receiving a request with the \"set-morph\" parameter, the controller can perform the Morph operation using:\nusing CodeBehind;\npublic void PageLoad(HttpContext context)\n{\nif (context.Request.Query.ContainsKey(\"set-morph\") && context.Request.Headers.Contains(\"Post-Back\"))\n{\nSetMorph_ByOutputPlace(context);\nreturn;\n}\n}\nprivate void SetMorph_ByOutputPlace(HttpContext context)\n{\nWebForms form = new WebForms();\nform.SetMorphByOutputPlace(\"userCard\", \"userCardTemplate\");\nIgnoreAll();\nWrite(form.Response());\n}\n\nThe 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.",
  "summary": "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…",
  "key_points": [
    "WebForms Core 2.1 introduces Morphing feature",
    "Morphing updates HTML structures while preserving DOM elements",
    "SetMorphByOutputPlace method simplifies DOM synchronization"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}