.

ReactWithDotNet.WebSite/Pages/PageTechnicalDetail.cs

@@ -34,14 +34,39 @@ protected override Element render()
             SpaceY(50),
             new p
             {
-                "Lets see what is incoming from server"
+                "Lets see what is incoming from server to client"
             },
 
             SpaceY(20),
             new img(WidthFull, ObjectFitContain)
             {
-                Src(Asset("TechnicalDetail.IO.drawio.png"))
-            }
+                Src(Asset("TechnicalDetail.I.drawio.png"))
+            },
+
+            SpaceY(50),
+            new p
+            {
+                "Lets see what is outgoing from client to server"
+            },
+
+            SpaceY(20),
+            new img(WidthFull, ObjectFitContain)
+            {
+                Src(Asset("TechnicalDetail.O.drawio.png"))
+            },
+            SpaceY(20),
+            new p
+            {
+                "As you can see at images, main idea is server driven UI, just like react server components.",
+                br,
+                "Main differences server is not nodejs, language is not typescript or js.",
+                br,
+                "Server is .NetCore server and language is c# language.",
+                br,
+                "As a result; power of two technology is combined. " +
+                "We have many benefits of c# language and serverside approach and react components flexibility."
+            },
+            SpaceY(50)
         };
     }
 }

ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx

@@ -212,21 +212,6 @@ function HasId(htmlElement)
     return htmlElement.id !== "";
 }
 
-function GoUpwardFindFirst(htmlElement, findFunc)
-{
-    while (htmlElement)
-    {
-        if (findFunc(htmlElement))
-        {
-            return htmlElement;
-        }
-
-        htmlElement = htmlElement.parentElement;
-    }
-
-    return null;
-}
-
 function OnDocumentReady(callback)
 {
     const stateCheck = setInterval(function ()
@@ -478,16 +463,6 @@ function ShouldBeNumber(value)
     throw CreateNewDeveloperError("value should be number.");
 }
 
-function NVL(a, b)
-{
-    if (a == null)
-    {
-        return b;
-    }
-
-    return a;
-}
-
 function Clone(obj)
 {
     return JSON.parse(JSON.stringify(obj));
@@ -1390,15 +1365,7 @@ function IsSerializablePrimitiveJsValue(value)
 
 function ConvertToSyntheticMouseEvent(e)
 {
-    let firstNotEmptyId = NVL(GoUpwardFindFirst(e.target, HasId), e.target).id;
-    if (firstNotEmptyId === '')
-    {
-        firstNotEmptyId = null;
-    }
-
     return {
-        FirstNotEmptyId: firstNotEmptyId,
-
         altKey:    e.altKey,
         bubbles:   e.bubbles,
         clientX:   e.clientX,

ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx

@@ -212,21 +212,6 @@ function HasId(htmlElement)
     return htmlElement.id !== "";
 }
 
-function GoUpwardFindFirst(htmlElement, findFunc)
-{
-    while (htmlElement)
-    {
-        if (findFunc(htmlElement))
-        {
-            return htmlElement;
-        }
-
-        htmlElement = htmlElement.parentElement;
-    }
-
-    return null;
-}
-
 function OnDocumentReady(callback)
 {
     const stateCheck = setInterval(function ()
@@ -478,16 +463,6 @@ function ShouldBeNumber(value)
     throw CreateNewDeveloperError("value should be number.");
 }
 
-function NVL(a, b)
-{
-    if (a == null)
-    {
-        return b;
-    }
-
-    return a;
-}
-
 function Clone(obj)
 {
     return JSON.parse(JSON.stringify(obj));
@@ -1390,15 +1365,7 @@ function IsSerializablePrimitiveJsValue(value)
 
 function ConvertToSyntheticMouseEvent(e)
 {
-    let firstNotEmptyId = NVL(GoUpwardFindFirst(e.target, HasId), e.target).id;
-    if (firstNotEmptyId === '')
-    {
-        firstNotEmptyId = null;
-    }
-
     return {
-        FirstNotEmptyId: firstNotEmptyId,
-
         altKey:    e.altKey,
         bubbles:   e.bubbles,
         clientX:   e.clientX,

ReactWithDotNet/SyntheticEvent.cs

@@ -80,12 +80,7 @@ public sealed class MouseEvent : UIEvent
     public int clientX { get; init; }
     public int clientY { get; init; }
     public bool ctrlKey { get; init; }
-
-    /// <summary>
-    ///     this is the id of first element id which is 'has id value'
-    /// </summary>
-    public string FirstNotEmptyId { get; set; } // todo: remove
-
+
     public bool metaKey { get; init; }
 
     public double movementX { get; init; }