From b08d6964c503086ee68ac7932f782716a0f90276 Mon Sep 17 00:00:00 2001
From: "Jeffrey T. Fritz" <csharpfritz@users.noreply.github.com>
Date: Thu, 29 Jan 2026 15:10:22 -0500
Subject: [PATCH 1/2] Add documentation for HyperLink and Menu components;
 update navigation structure

---
 README.md                                     |  4 +-
 .../HyperLink.md                              |  0
 docs/{ => NavigationControls}/Menu.md         | 51 +++++++++++++++++++
 mkdocs.yml                                    |  3 +-
 .../Menu/DynamicMenuStyleSample.razor         |  3 +-
 .../wwwroot/js/Basepage.module.js             | 13 ++++-
 6 files changed, 69 insertions(+), 5 deletions(-)
 rename docs/{EditorControls => NavigationControls}/HyperLink.md (100%)
 rename docs/{ => NavigationControls}/Menu.md (87%)

diff --git a/README.md b/README.md
index 3e26a5e2e..617de49a9 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,6 @@ There are a significant number of controls in ASP.NET Web Forms, and we will foc
     - [DropDownList](docs/EditorControls/DropDownList.md)
     - FileUpload
     - [HiddenField](docs/EditorControls/HiddenField.md)
-    - [HyperLink](docs/EditorControls/HyperLink.md)
     - [Image](docs/EditorControls/Image.md)
     - [ImageButton](docs/EditorControls/ImageButton.md)
     - ImageMap
@@ -69,7 +68,8 @@ There are a significant number of controls in ASP.NET Web Forms, and we will foc
     - [RequiredFieldValidator](docs/ValidationControls/RequiredFieldValidator.md)
     - [ValidationSummary](docs/ValidationControls/ValidationSummary.md)
   - Navigation Controls
-    - [Menu](docs/Menu.md)
+    - [HyperLink](docs/NavigationControls/HyperLink.md)
+    - [Menu](docs/NavigationControls/Menu.md)
     - SiteMapPath
     - [TreeView](docs/NavigationControls/TreeView.md)
   - Login Controls
diff --git a/docs/EditorControls/HyperLink.md b/docs/NavigationControls/HyperLink.md
similarity index 100%
rename from docs/EditorControls/HyperLink.md
rename to docs/NavigationControls/HyperLink.md
diff --git a/docs/Menu.md b/docs/NavigationControls/Menu.md
similarity index 87%
rename from docs/Menu.md
rename to docs/NavigationControls/Menu.md
index d88ad0ddc..65759410c 100644
--- a/docs/Menu.md
+++ b/docs/NavigationControls/Menu.md
@@ -341,5 +341,56 @@ The Menu component is meant to emulate the asp:Menu control in markup and is def
 
 ## Blazor Syntax
 
+```html
+<Menu id="NavigationMenu"
+      DisappearAfter="2000"
+      StaticDisplayLevels="2"
+      StaticSubmenuIndent="10"
+      orientation="Vertical"
+      font-names="Arial"
+      target="_blank">
+
+    <StaticMenuItemStyle BackColor="@("LightSteelBlue")"
+                         ForeColor="@("Black")" />
+    <StaticHoverStyle BackColor="WebColor.LightSkyBlue" />
+    <DynamicMenuItemStyle BackColor="WebColor.Black"
+                          ForeColor="WebColor.Silver" />
+    <DynamicHoverStyle BackColor="WebColor.LightSkyBlue"
+                       ForeColor="WebColor.Black" />
+    <DynamicSelectedStyle BackColor="WebColor.PapayaWhip"
+                          ForeColor="WebColor.SteelBlue" />
+
+    <Items>
+        <MenuItem navigateurl="Home.aspx"
+                  text="Home"
+                  tooltip="Home">
+            <MenuItem text="Music" tooltip="Music">
+                <MenuItem navigateurl="Classical.aspx"
+                          text="Classical"
+                          tooltip="Classical" />
+                <MenuItem navigateurl="Rock.aspx"
+                          text="Rock"
+                          tooltip="Rock" />
+                <MenuItem navigateurl="Jazz.aspx"
+                          text="Jazz"
+                          tooltip="Jazz" />
+            </MenuItem>
+            <MenuItem navigateurl="Movies.aspx" text="Movies" tooltip="Movies">
+                <MenuItem navigateurl="Action.aspx"
+                          text="Action"
+                          tooltip="Action" />
+                <MenuItem navigateurl="Drama.aspx"
+                          text="Drama"
+                          tooltip="Drama" />
+                <MenuItem navigateurl="Musical.aspx"
+                          text="Musical"
+                          tooltip="Musical" />
+            </MenuItem>
+        </MenuItem>
+    </Items>
+
+</Menu>
+```
+
 ##### [Back to top](#menu)
 
diff --git a/mkdocs.yml b/mkdocs.yml
index b34b898fe..9787c9f59 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -69,7 +69,6 @@ nav:
     - CheckBoxList: EditorControls/CheckBoxList.md
     - DropDownList: EditorControls/DropDownList.md
     - HiddenField: EditorControls/HiddenField.md
-    - HyperLink: EditorControls/HyperLink.md
     - Image: EditorControls/Image.md
     - ImageButton: EditorControls/ImageButton.md
     - Label: EditorControls/Label.md
@@ -95,6 +94,8 @@ nav:
     - RequiredFieldValidator: ValidationControls/RequiredFieldValidator.md
     - ValidationSummary: ValidationControls/ValidationSummary.md
   - Navigation Controls:
+    - HyperLink: NavigationControls/HyperLink.md
+    - Menu: NavigationControls/Menu.md
     - TreeView: NavigationControls/TreeView.md
   - Login Controls:
     - Login: LoginControls/Login.md
diff --git a/samples/AfterBlazorServerSide/Pages/ControlSamples/Menu/DynamicMenuStyleSample.razor b/samples/AfterBlazorServerSide/Pages/ControlSamples/Menu/DynamicMenuStyleSample.razor
index fb4f619a7..53086ccb6 100644
--- a/samples/AfterBlazorServerSide/Pages/ControlSamples/Menu/DynamicMenuStyleSample.razor
+++ b/samples/AfterBlazorServerSide/Pages/ControlSamples/Menu/DynamicMenuStyleSample.razor
@@ -1,4 +1,5 @@
-@using static BlazorWebFormsComponents.WebColor
+@page "/ControlSamples/Menu/DynamicMenuStyleSample"
+@using static BlazorWebFormsComponents.WebColor
 @using static BlazorWebFormsComponents.Enums.BorderStyle
 
 <h3>DynamicMenuStyle Sample</h3>
diff --git a/src/BlazorWebFormsComponents/wwwroot/js/Basepage.module.js b/src/BlazorWebFormsComponents/wwwroot/js/Basepage.module.js
index cc63f68a6..f7eefa0d5 100644
--- a/src/BlazorWebFormsComponents/wwwroot/js/Basepage.module.js
+++ b/src/BlazorWebFormsComponents/wwwroot/js/Basepage.module.js
@@ -14,6 +14,16 @@ export function onAfterRender() {
     formatClientClick();
 }
 
+export function addScriptElement(location, callback) {
+    var el = document.createElement("script");
+    el.setAttribute("src", location);
+    document.head.appendChild(el);
+
+    if (callback != null) {
+        el.addEventListener("load", function () { eval(callback); });
+    }
+}
+
 function formatClientClick() {
     var elementsToReplace = document.querySelectorAll("*[onclientclick]");
     for (var el of elementsToReplace) {
@@ -31,6 +41,7 @@ if (typeof window !== 'undefined') {
     window.bwfc.Page = {
         setTitle,
         getTitle,
-        OnAfterRender: onAfterRender
+        OnAfterRender: onAfterRender,
+        AddScriptElement: addScriptElement
     };
 }

From 287fbcdb9426959432de802dd89fa1374d897d94 Mon Sep 17 00:00:00 2001
From: "Jeffrey T. Fritz" <csharpfritz@users.noreply.github.com>
Date: Thu, 29 Jan 2026 15:20:28 -0500
Subject: [PATCH 2/2] Enhance documentation for Button, HiddenField, and Image
 components; add usage examples and clarify features

Fixes #228
Fixes #219
Fixes #217
---
 docs/EditorControls/Button.md                 | 237 +++++++++++++++++-
 docs/EditorControls/HiddenField.md            |  94 ++++++-
 docs/EditorControls/Image.md                  | 190 +++++++++++++-
 .../Components/Layout/NavMenu.razor           |   2 +
 .../Components/Pages/ComponentList.razor      |   2 +
 .../ControlSamples/HiddenField/Index.razor    |  86 +++++++
 .../Pages/ControlSamples/Image/Index.razor    | 112 +++++++++
 7 files changed, 700 insertions(+), 23 deletions(-)
 create mode 100644 samples/AfterBlazorServerSide/Components/Pages/ControlSamples/HiddenField/Index.razor
 create mode 100644 samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Image/Index.razor

diff --git a/docs/EditorControls/Button.md b/docs/EditorControls/Button.md
index acf38d834..9fa39b22c 100644
--- a/docs/EditorControls/Button.md
+++ b/docs/EditorControls/Button.md
@@ -1,19 +1,37 @@
-It may seem strange that we have a Button component when there already is an HTML button and Blazor has features that enable C# interactions with that button, but we need to activate other features that were once present in Web Forms.  Original Web Forms documentation is at:  https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button?view=netframework-4.8
+# Button
 
-## Blazor Features Supported
+The **Button** component displays a push button control that allows users to trigger actions. It may seem strange that we have a Button component when there already is an HTML button and Blazor has features that enable C# interactions with that button, but we need to activate other features that were once present in Web Forms, such as `OnCommand` event bubbling, `OnClientClick` JavaScript execution, and `CausesValidation` support.
 
-- OnClick event handler
-- OnClientClick JavaScript pointer
-- OnCommand event handler with event bubbling
-- Button Style attributes and CssClass formatting
-- CausesValidation will control whether  Form validation is triggered on click
+Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button?view=netframework-4.8
 
-## WebForms Features Not Supported
+## Features Supported in Blazor
 
-- PostBackUrl is not supported as you will be triggering Button click events on the same page
-- UseSubmitBehavior is not supported as Blazor buttons trigger click events and you can inspect the Form regardless
+- `Text` - the text displayed on the button
+- `OnClick` - event handler triggered when button is clicked
+- `OnClientClick` - JavaScript code to execute on client-side click
+- `OnCommand` - event handler with event bubbling, receives `CommandEventArgs` with `CommandName` and `CommandArgument`
+- `CommandName` - the command name passed to `OnCommand` event
+- `CommandArgument` - the command argument passed to `OnCommand` event
+- `CausesValidation` - controls whether form validation is triggered on click (default: `true`)
+- `Enabled` - enables or disables the button
+- `Visible` - controls button visibility
+- `ToolTip` - tooltip text displayed on hover
+- All style properties (`BackColor`, `ForeColor`, `BorderColor`, `BorderStyle`, `BorderWidth`, `CssClass`, `Width`, `Height`, `Font`)
 
-## WebForms Syntax
+### Blazor Notes
+
+- The `OnCommand` event uses a `CommandEventArgs` class that contains `CommandName` and `CommandArgument` properties
+- When `CommandName` is set, clicking the button triggers `OnCommand` instead of `OnClick`
+- Event bubbling is supported for container components that need to handle commands from child buttons
+
+## Web Forms Features NOT Supported
+
+- **PostBackUrl** - Not supported; Blazor uses component events instead of postbacks to different pages
+- **UseSubmitBehavior** - Not supported; Blazor buttons trigger click events and you can inspect the form regardless
+- **ValidationGroup** - Not yet implemented; use EditForm validation instead
+- **AccessKey** - Use HTML `accesskey` attribute directly if needed
+
+## Web Forms Declarative Syntax
 
 ```html
 <asp:Button
@@ -63,3 +81,200 @@ It may seem strange that we have a Button component when there already is an HTM
     Width="size"
 />
 ```
+
+## Blazor Razor Syntax
+
+### Basic Button with Click Event
+
+```razor
+<Button Text="Click Me" OnClick="HandleClick" />
+
+@code {
+    void HandleClick()
+    {
+        // Handle the click
+    }
+}
+```
+
+### Button with Command
+
+```razor
+<Button Text="Save" 
+        CommandName="Save" 
+        CommandArgument="@itemId" 
+        OnCommand="HandleCommand" />
+
+@code {
+    private string itemId = "123";
+
+    void HandleCommand(CommandEventArgs args)
+    {
+        var command = args.CommandName;    // "Save"
+        var argument = args.CommandArgument; // "123"
+    }
+}
+```
+
+### Button with JavaScript Click
+
+```razor
+<Button Text="Alert" OnClientClick="alert('Hello World!')" />
+```
+
+### Styled Button
+
+```razor
+<Button Text="Styled Button"
+        BackColor="WebColor.Blue"
+        ForeColor="WebColor.White"
+        Font_Bold="true"
+        CssClass="my-button-class" />
+```
+
+### Disabled Button
+
+```razor
+<Button Text="Cannot Click" Enabled="false" />
+```
+
+### Button with Validation Control
+
+```razor
+<EditForm Model="@model" OnValidSubmit="HandleSubmit">
+    <TextBox @bind-Text="model.Name" />
+    <RequiredFieldValidator ControlToValidate="..." Text="Required" />
+    
+    @* This button triggers validation *@
+    <Button Text="Submit" CausesValidation="true" />
+    
+    @* This button skips validation *@
+    <Button Text="Cancel" CausesValidation="false" OnClick="HandleCancel" />
+</EditForm>
+```
+
+## HTML Output
+
+**Web Forms Input:**
+```html
+<asp:Button ID="btnSubmit" Text="Submit" CssClass="btn" runat="server" />
+```
+
+**Rendered HTML:**
+```html
+<button type="submit" class="btn">Submit</button>
+```
+
+**Styled Button Input:**
+```razor
+<Button Text="Styled" BackColor="WebColor.Blue" ForeColor="WebColor.White" />
+```
+
+**Rendered HTML:**
+```html
+<button type="submit" style="background-color:Blue;color:White;">Styled</button>
+```
+
+## Migration Notes
+
+When migrating from Web Forms to Blazor:
+
+1. **Remove `asp:` prefix** - Change `<asp:Button>` to `<Button>`
+2. **Remove `runat="server"`** - Not needed in Blazor
+3. **Remove `ID` attribute** - Use `@ref` if you need a reference to the component
+4. **Update event handler syntax** - Change `OnClick="btnSubmit_Click"` to `OnClick="HandleClick"`
+5. **Replace `PostBackUrl`** - Use navigation or component state instead
+6. **Update `OnCommand` handlers** - The signature changes from `(object sender, CommandEventArgs e)` to `(CommandEventArgs args)`
+
+### Before (Web Forms)
+
+```html
+<asp:Button ID="btnSave" 
+            Text="Save" 
+            OnClick="btnSave_Click" 
+            CssClass="btn btn-primary"
+            runat="server" />
+```
+
+```csharp
+protected void btnSave_Click(object sender, EventArgs e)
+{
+    // Handle click
+}
+```
+
+### After (Blazor)
+
+```razor
+<Button Text="Save" 
+        OnClick="HandleSave" 
+        CssClass="btn btn-primary" />
+
+@code {
+    void HandleSave()
+    {
+        // Handle click
+    }
+}
+```
+
+## Examples
+
+### Basic Click Handler
+
+```razor
+<Button Text="Click Me!" OnClick="OnClick" />
+
+<span style="font-weight: bold">@message</span>
+
+@code {
+    private string message = "Not clicked yet!";
+
+    void OnClick()
+    {
+        message = "I've been clicked!";
+    }
+}
+```
+
+### Command Pattern with Multiple Buttons
+
+```razor
+<Button Text="Edit" CommandName="Edit" CommandArgument="@item.Id" OnCommand="HandleCommand" />
+<Button Text="Delete" CommandName="Delete" CommandArgument="@item.Id" OnCommand="HandleCommand" />
+
+<p>Last action: @lastAction</p>
+
+@code {
+    private string lastAction = "None";
+
+    void HandleCommand(CommandEventArgs args)
+    {
+        lastAction = $"Command '{args.CommandName}' on item {args.CommandArgument}";
+    }
+}
+```
+
+### Styled Buttons
+
+```razor
+@using static BlazorWebFormsComponents.WebColor
+
+<Button Text="Blue Button" BackColor="Blue" ForeColor="White" />
+<Button Text="Red Bold Button" BackColor="Red" ForeColor="Yellow" Font_Bold="true" />
+<Button Text="Custom Class" CssClass="rounded-corners" />
+```
+
+### JavaScript Integration
+
+```razor
+<Button Text="Show Alert" OnClientClick="alert('Hello from JavaScript!')" />
+<Button Text="Confirm" OnClientClick="return confirm('Are you sure?')" OnClick="HandleConfirmed" />
+```
+
+## See Also
+
+- [LinkButton](LinkButton.md) - A button that renders as a hyperlink
+- [ImageButton](ImageButton.md) - A button that displays an image
+- [RequiredFieldValidator](../ValidationControls/RequiredFieldValidator.md) - Validate required fields
+- [Live Demo](https://blazorwebformscomponents.azurewebsites.net/ControlSamples/Button) - Interactive Button samples
diff --git a/docs/EditorControls/HiddenField.md b/docs/EditorControls/HiddenField.md
index f9e23faf0..0d1239931 100644
--- a/docs/EditorControls/HiddenField.md
+++ b/docs/EditorControls/HiddenField.md
@@ -1,11 +1,34 @@
-The HiddenField component is meant to emulate the asp:HiddenField control in markup and is defined in the [System.Web.UI.WebControls.HiddenField class](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.hiddenfield?view=netframework-4.8)
+# HiddenField
 
-## Blazor Features Supported
+The **HiddenField** component stores a non-displayed value that can be posted back to the server. It emulates the `asp:HiddenField` control, providing a way to store page-specific information that should not be visible to users but needs to be available during processing.
 
-- `Value` the value of the hidden field component.
-- `OnValueChanged` Occurs when the value of the HiddenField component changes between posts to the server.
+Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.hiddenfield?view=netframework-4.8
 
-## WebForms Syntax
+## Features Supported in Blazor
+
+- **Value** - The value stored in the hidden field
+- **OnValueChanged** - Event that fires when the value changes
+- **ID** - Renders as the HTML `id` attribute
+
+### Blazor Notes
+
+In Blazor, the HiddenField is useful for:
+
+- Storing values that need to be accessible via JavaScript interop
+- Maintaining compatibility with migrated Web Forms markup
+- Storing temporary data that shouldn't be visible to users
+
+Unlike Web Forms, Blazor maintains component state automatically, so you may not need HiddenField as frequently. Consider using component fields or cascading parameters for state management in pure Blazor applications.
+
+## Web Forms Features NOT Supported
+
+- **EnableTheming** - Blazor uses CSS for styling
+- **EnableViewState** - Blazor handles state differently; use component state instead
+- **SkinID** - Themes/skins not supported; use CSS classes
+- **OnDataBinding, OnDisposed, OnInit, OnLoad, OnPreRender, OnUnload** - Blazor component lifecycle is different; use Blazor lifecycle methods (`OnInitialized`, `OnParametersSet`, etc.)
+- **Visible** - Not applicable; use conditional rendering with `@if` instead
+
+## Web Forms Declarative Syntax
 
 ```html
 <asp:HiddenField
@@ -25,3 +48,64 @@ The HiddenField component is meant to emulate the asp:HiddenField control in mar
     Visible="True|False"
 />
 ```
+
+## Blazor Razor Syntax
+
+### Basic Usage
+
+```razor
+<HiddenField ID="myHiddenField" Value="@secretValue" />
+
+@code {
+    private string secretValue = "stored-data-123";
+}
+```
+
+### With Value Changed Event
+
+```razor
+<HiddenField ID="trackingField" 
+             Value="@trackingId" 
+             OnValueChanged="HandleValueChanged" />
+
+@code {
+    private string trackingId = "initial-value";
+
+    private void HandleValueChanged(EventArgs e)
+    {
+        // Handle the value change
+        Console.WriteLine("Hidden field value changed");
+    }
+}
+```
+
+## HTML Output
+
+**Blazor Input:**
+```razor
+<HiddenField ID="myHidden" Value="secret123" />
+```
+
+**Rendered HTML:**
+```html
+<input id="myHidden" type="hidden" value="secret123" />
+```
+
+## Migration Notes
+
+When migrating from Web Forms to Blazor:
+
+1. **Remove `runat="server"`** - Not needed in Blazor
+2. **Remove `EnableViewState` and `EnableTheming`** - Not applicable in Blazor
+3. **Replace lifecycle events** - Use Blazor lifecycle methods instead
+4. **Consider alternatives** - For pure Blazor apps, you may not need HiddenField; use component state or `@bind` instead
+5. **JavaScript interop** - HiddenField is still useful when you need to exchange values with JavaScript
+
+!!! tip "Best Practice"
+    In new Blazor development, prefer using component fields and parameters over hidden fields. Only use HiddenField when migrating existing markup or when JavaScript interop requires a DOM element to read/write values.
+
+## See Also
+
+- [TextBox](TextBox.md) - For visible text input
+- [ViewState](../UtilityFeatures/ViewState.md) - State management options
+- [JavaScript Setup](../UtilityFeatures/JavaScriptSetup.md) - JavaScript interop guidance
diff --git a/docs/EditorControls/Image.md b/docs/EditorControls/Image.md
index 7f2856fb2..1cd9ff22f 100644
--- a/docs/EditorControls/Image.md
+++ b/docs/EditorControls/Image.md
@@ -1,13 +1,36 @@
-It may seem strange that we have a Image component when there already is an HTML image and Blazor has features that enable C# interactions with that image, but we need to activate other features that were once present in Web Forms.  Original Web Forms documentation is at:  https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.image?view=netframework-4.8
+# Image
 
-## Blazor Features Supported
+The **Image** component displays an image on a web page. It may seem strange that we have an Image component when there already is an HTML `<img>` element and Blazor has features that enable C# interactions with that image, but we need to activate other features that were once present in Web Forms, such as `DescriptionUrl` for accessibility, `ImageAlign` for legacy alignment, and `GenerateEmptyAlternateText` for accessibility compliance.
 
-- `AlternateText` alternate text displayed when the image is unavailable
-- `DescriptionUrl` the location to a detailed description for the image
-- `ImageAlign`  the alignment of the image in relation to other elements on the Web page
-- `ImageUrl` The URL of the image
+Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.image?view=netframework-4.8
 
-## WebForms Syntax
+## Features Supported in Blazor
+
+- `AlternateText` - alternate text displayed when the image is unavailable (renders as `alt` attribute)
+- `DescriptionUrl` - the location to a detailed description for the image (renders as `longdesc` attribute)
+- `GenerateEmptyAlternateText` - when `true`, generates an empty `alt=""` attribute for decorative images (accessibility compliance)
+- `ImageAlign` - the alignment of the image in relation to other elements on the Web page (renders as `align` attribute)
+- `ImageUrl` - the URL of the image to display (renders as `src` attribute)
+- `ToolTip` - tooltip text displayed on hover (renders as `title` attribute)
+- `Visible` - controls image visibility
+
+### Blazor Notes
+
+- The `ImageUrl` property maps directly to the HTML `src` attribute. In Blazor, you can use relative paths from your `wwwroot` folder (e.g., `/images/logo.png`) or absolute URLs
+- For static assets in Blazor, place images in the `wwwroot` folder and reference them with a leading `/`
+- The `ImageAlign` property uses the `ImageAlign` enum with values: `NotSet`, `Left`, `Right`, `Baseline`, `Top`, `Middle`, `Bottom`, `AbsBottom`, `AbsMiddle`, `TextTop`
+- The `longdesc` attribute (from `DescriptionUrl`) is considered obsolete in HTML5 but is rendered for backward compatibility. Consider using `aria-describedby` in new applications
+
+## Web Forms Features NOT Supported
+
+- **Style properties** (`BackColor`, `ForeColor`, `BorderColor`, `BorderStyle`, `BorderWidth`, `CssClass`, `Width`, `Height`, `Font`) - Not yet implemented; use standard HTML/CSS styling on a wrapper element
+- **AccessKey** - Not supported; use HTML `accesskey` attribute directly if needed
+- **TabIndex** - Not supported; use HTML `tabindex` attribute directly if needed
+- **EnableTheming/SkinID** - Not supported; ASP.NET theming is not available in Blazor
+- **EnableViewState** - Not needed; Blazor manages state differently
+- **Lifecycle events** (`OnDataBinding`, `OnInit`, `OnLoad`, etc.) - Not supported; use Blazor lifecycle methods instead
+
+## Web Forms Declarative Syntax
 
 ```html
 <asp:Image
@@ -45,3 +68,156 @@ It may seem strange that we have a Image component when there already is an HTML
     Width="size"
 />
 ```
+
+## Blazor Razor Syntax
+
+### Basic Image
+
+```razor
+<Image ImageUrl="/images/photo.jpg" AlternateText="A beautiful photo" />
+```
+
+### Image with Tooltip
+
+```razor
+<Image ImageUrl="/images/logo.png" 
+       AlternateText="Company Logo" 
+       ToolTip="Our company logo" />
+```
+
+### Image with Alignment
+
+```razor
+@using BlazorWebFormsComponents.Enums
+
+<Image ImageUrl="/images/icon.png" 
+       AlternateText="Icon" 
+       ImageAlign="ImageAlign.Left" />
+<p>This text flows around the left-aligned image.</p>
+```
+
+### Decorative Image (Empty Alt Text)
+
+```razor
+<Image ImageUrl="/images/decorative-border.png" 
+       GenerateEmptyAlternateText="true" />
+```
+
+### Image with Description URL
+
+```razor
+<Image ImageUrl="/images/complex-chart.png" 
+       AlternateText="Sales Chart" 
+       DescriptionUrl="/descriptions/sales-chart.html" />
+```
+
+## HTML Output
+
+**Blazor Input:**
+```razor
+<Image ImageUrl="/images/photo.jpg" 
+       AlternateText="A photo" 
+       ToolTip="Click to enlarge" 
+       ImageAlign="ImageAlign.Left" />
+```
+
+**Rendered HTML:**
+```html
+<img src="/images/photo.jpg" alt="A photo" longdesc="" title="Click to enlarge" align="left" />
+```
+
+## Migration Notes
+
+When migrating from Web Forms to Blazor:
+
+1. **Remove `asp:` prefix** - Change `<asp:Image>` to `<Image>`
+2. **Remove `runat="server"`** - Not needed in Blazor
+3. **Remove `ID` attribute** - Use `@ref` if you need a reference to the component
+4. **Update image paths** - Place images in `wwwroot` folder and use paths like `/images/photo.jpg`
+5. **Add `@using` for enums** - Add `@using BlazorWebFormsComponents.Enums` when using `ImageAlign`
+6. **Style properties** - Wrap the Image in a `<div>` or `<span>` and apply CSS for styling not yet supported
+
+### Before (Web Forms)
+
+```html
+<asp:Image ID="imgLogo" 
+           ImageUrl="~/images/logo.png" 
+           AlternateText="Company Logo"
+           CssClass="logo-image"
+           runat="server" />
+```
+
+### After (Blazor)
+
+```razor
+<div class="logo-image">
+    <Image ImageUrl="/images/logo.png" 
+           AlternateText="Company Logo" />
+</div>
+```
+
+## Examples
+
+### Basic Image Display
+
+```razor
+<Image ImageUrl="/images/sample.jpg" AlternateText="Sample Image" />
+```
+
+### Dynamic Image URL
+
+```razor
+<Image ImageUrl="@imageUrl" AlternateText="@imageAlt" />
+
+@code {
+    private string imageUrl = "/images/default.png";
+    private string imageAlt = "Default image";
+    
+    void ChangeImage()
+    {
+        imageUrl = "/images/alternate.png";
+        imageAlt = "Alternate image";
+    }
+}
+```
+
+### Conditional Visibility
+
+```razor
+<Image ImageUrl="/images/banner.jpg" 
+       AlternateText="Promotional Banner" 
+       Visible="@showBanner" />
+
+<button @onclick="ToggleBanner">Toggle Banner</button>
+
+@code {
+    private bool showBanner = true;
+    
+    void ToggleBanner()
+    {
+        showBanner = !showBanner;
+    }
+}
+```
+
+### Text Wrapping with Aligned Image
+
+```razor
+@using BlazorWebFormsComponents.Enums
+
+<Image ImageUrl="/images/author.jpg" 
+       AlternateText="Author photo" 
+       ImageAlign="ImageAlign.Left" />
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+   This text wraps around the left-aligned image. The ImageAlign 
+   property allows you to control how content flows around the image.</p>
+
+<div style="clear: both;"></div>
+```
+
+## See Also
+
+- [ImageButton](ImageButton.md) - A clickable image that acts as a button
+- [HyperLink](../NavigationControls/HyperLink.md) - Wrap an Image in a HyperLink for clickable images
+- [Live Demo](https://blazorwebformscomponents.azurewebsites.net/ControlSamples/Image) - Interactive Image samples
diff --git a/samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor b/samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor
index 7dbd1ab3e..02baa5f73 100644
--- a/samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor
+++ b/samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor
@@ -24,6 +24,8 @@
 						<TreeNode Text="Style" NavigateUrl="/ControlSamples/CheckBox/Style" />
 					</TreeNode>
 					<TreeNode Text="DropDownList" NavigateUrl="/ControlSamples/DropDownList" />
+					<TreeNode Text="HiddenField" NavigateUrl="/ControlSamples/HiddenField" />
+					<TreeNode Text="Image" NavigateUrl="/ControlSamples/Image" />
 					<TreeNode Text="LinkButton" NavigateUrl="/ControlSamples/LinkButton">
 						<TreeNode Text="JavaScript Click" NavigateUrl="/ControlSamples/LinkButton/JavaScript" />
 					</TreeNode>
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor b/samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor
index 5a212a27c..922c4b28f 100644
--- a/samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor
+++ b/samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor
@@ -6,6 +6,8 @@
 			<li><a href="/ControlSamples/Button">Button</a></li>
 			<li><a href="/ControlSamples/CheckBox">CheckBox</a></li>
 			<li><a href="/ControlSamples/DropDownList">DropDownList</a></li>
+			<li><a href="/ControlSamples/HiddenField">HiddenField</a></li>
+			<li><a href="/ControlSamples/Image">Image</a></li>
 			<li><a href="/ControlSamples/HyperLink">HyperLink</a></li>
 			<li><a href="/ControlSamples/LinkButton">LinkButton</a></li>
 			<li><a href="/ControlSamples/Literal">Literal</a></li>
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/HiddenField/Index.razor b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/HiddenField/Index.razor
new file mode 100644
index 000000000..66211f39e
--- /dev/null
+++ b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/HiddenField/Index.razor
@@ -0,0 +1,86 @@
+@page "/ControlSamples/HiddenField"
+
+<PageTitle>HiddenField Sample</PageTitle>
+
+<h2>HiddenField - Basic Usage</h2>
+
+<p>The HiddenField component stores a non-displayed value. While the field is not visible to users, the value is accessible to both server-side code and JavaScript.</p>
+
+<div class="demo-section">
+    <h3>Demo</h3>
+    
+    <HiddenField ID="myHiddenField" Value="@HiddenValue" OnValueChanged="HandleValueChanged" />
+    
+    <p><strong>Current hidden value:</strong> @HiddenValue</p>
+    
+    <div class="mb-3">
+        <label class="form-label">Update hidden field value:</label>
+        <input type="text" class="form-control" style="max-width: 300px;" @bind="NewValue" />
+    </div>
+    
+    <Button Text="Update Hidden Field" OnClick="UpdateHiddenValue" CssClass="btn btn-primary" />
+    
+    @if (!string.IsNullOrEmpty(Message))
+    {
+        <div class="alert alert-info mt-3">@Message</div>
+    }
+</div>
+
+<hr />
+
+<h3>Source Code</h3>
+
+<pre><code class="language-razor">@@page "/ControlSamples/HiddenField"
+
+&lt;HiddenField ID="myHiddenField" Value="@@HiddenValue" OnValueChanged="HandleValueChanged" /&gt;
+
+&lt;p&gt;&lt;strong&gt;Current hidden value:&lt;/strong&gt; @@HiddenValue&lt;/p&gt;
+
+&lt;div class="mb-3"&gt;
+    &lt;label class="form-label"&gt;Update hidden field value:&lt;/label&gt;
+    &lt;input type="text" class="form-control" @@bind="NewValue" /&gt;
+&lt;/div&gt;
+
+&lt;Button Text="Update Hidden Field" OnClick="UpdateHiddenValue" /&gt;
+
+@@code {
+    private string HiddenValue = "initial-secret-value";
+    private string NewValue = "";
+    private string Message = "";
+
+    private void UpdateHiddenValue()
+    {
+        if (!string.IsNullOrEmpty(NewValue))
+        {
+            HiddenValue = NewValue;
+            Message = $"Hidden field updated to: {HiddenValue}";
+            NewValue = "";
+        }
+    }
+
+    private void HandleValueChanged(EventArgs e)
+    {
+        Message = "Value changed event triggered!";
+    }
+}</code></pre>
+
+@code {
+    private string HiddenValue = "initial-secret-value";
+    private string NewValue = "";
+    private string Message = "";
+
+    private void UpdateHiddenValue()
+    {
+        if (!string.IsNullOrEmpty(NewValue))
+        {
+            HiddenValue = NewValue;
+            Message = $"Hidden field updated to: {HiddenValue}";
+            NewValue = "";
+        }
+    }
+
+    private void HandleValueChanged(EventArgs e)
+    {
+        Message = "Value changed event triggered!";
+    }
+}
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Image/Index.razor b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Image/Index.razor
new file mode 100644
index 000000000..41f97b15c
--- /dev/null
+++ b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Image/Index.razor
@@ -0,0 +1,112 @@
+@page "/ControlSamples/Image"
+@using BlazorWebFormsComponents
+@using BlazorWebFormsComponents.Enums
+
+<PageTitle>Image Sample</PageTitle>
+
+<h2>Image - Basic Usage</h2>
+
+<p>The Image component displays an image on a web page, emulating the ASP.NET Web Forms Image control.</p>
+
+<hr />
+
+<h3>Basic Image</h3>
+<p>A simple image with alternate text:</p>
+
+<div class="demo-section">
+    <Image ImageUrl="https://via.placeholder.com/150x100" 
+           AlternateText="Sample placeholder image" />
+</div>
+
+<p>Code:</p>
+<pre><code>&lt;Image ImageUrl="https://via.placeholder.com/150x100" 
+       AlternateText="Sample placeholder image" /&gt;</code></pre>
+
+<hr />
+
+<h3>Image with Tooltip</h3>
+<p>Hover over the image to see the tooltip:</p>
+
+<div class="demo-section">
+    <Image ImageUrl="https://via.placeholder.com/150x100/0066cc/ffffff?text=Hover+Me" 
+           AlternateText="Image with tooltip"
+           ToolTip="This is a tooltip displayed on hover" />
+</div>
+
+<p>Code:</p>
+<pre><code>&lt;Image ImageUrl="https://via.placeholder.com/150x100/0066cc/ffffff?text=Hover+Me" 
+       AlternateText="Image with tooltip"
+       ToolTip="This is a tooltip displayed on hover" /&gt;</code></pre>
+
+<hr />
+
+<h3>Image Alignment</h3>
+<p>Images can be aligned using the ImageAlign property:</p>
+
+<div class="demo-section" style="overflow: auto;">
+    <Image ImageUrl="https://via.placeholder.com/80x80/28a745/ffffff?text=Left" 
+           AlternateText="Left aligned image"
+           ImageAlign="ImageAlign.Left" />
+    <p>This text flows around the left-aligned image. The ImageAlign property 
+       controls how content flows around the image, similar to the CSS float property. 
+       This is useful when migrating Web Forms applications that rely on this behavior.</p>
+</div>
+
+<p>Code:</p>
+<pre><code>&lt;Image ImageUrl="https://via.placeholder.com/80x80" 
+       AlternateText="Left aligned image"
+       ImageAlign="ImageAlign.Left" /&gt;
+&lt;p&gt;This text flows around the left-aligned image...&lt;/p&gt;</code></pre>
+
+<hr />
+
+<h3>Dynamic Image with Visibility Toggle</h3>
+<p>Click the button to toggle image visibility:</p>
+
+<div class="demo-section">
+    <button class="btn btn-primary" @onclick="ToggleVisibility">
+        @(isVisible ? "Hide Image" : "Show Image")
+    </button>
+    
+    <div style="margin-top: 10px;">
+        <Image ImageUrl="https://via.placeholder.com/200x120/dc3545/ffffff?text=Toggle+Me" 
+               AlternateText="Toggleable image"
+               Visible="@isVisible" />
+    </div>
+</div>
+
+<p>Code:</p>
+<pre><code>&lt;button @@onclick="ToggleVisibility"&gt;Toggle&lt;/button&gt;
+&lt;Image ImageUrl="..." AlternateText="Toggleable image" Visible="@@isVisible" /&gt;
+
+@@code {
+    private bool isVisible = true;
+    
+    void ToggleVisibility()
+    {
+        isVisible = !isVisible;
+    }
+}</code></pre>
+
+<hr />
+
+<h3>Decorative Image (Empty Alt Text)</h3>
+<p>For decorative images that don't convey content, use GenerateEmptyAlternateText:</p>
+
+<div class="demo-section">
+    <Image ImageUrl="https://via.placeholder.com/300x20/6c757d/6c757d?text=+" 
+           GenerateEmptyAlternateText="true" />
+    <p>The decorative separator above has an empty alt attribute for accessibility compliance.</p>
+</div>
+
+<p>Code:</p>
+<pre><code>&lt;Image ImageUrl="..." GenerateEmptyAlternateText="true" /&gt;</code></pre>
+
+@code {
+    private bool isVisible = true;
+
+    void ToggleVisibility()
+    {
+        isVisible = !isVisible;
+    }
+}