Component Development Skill

This skill covers creating new Blazor components that emulate ASP.NET Web Forms controls.

Related Guides

• HTML Output Matching Guide - How to ensure Blazor components render identical HTML to Web Forms controls

Quick Reference

Creating a New Component

1. Identify the Web Forms control from System.Web.UI.WebControls
2. Research the HTML output using the HTML Output Matching Guide
3. Create component files:

• src/BlazorWebFormsComponents/{ComponentName}.razor
• src/BlazorWebFormsComponents/{ComponentName}.razor.cs

1. Inherit from appropriate base class:

• BaseWebFormsComponent - Basic components
• BaseStyledComponent - Components with styling
• DataBoundComponent<T> - Data-bound components

1. Add unit tests in src/BlazorWebFormsComponents.Test/{ComponentName}/
2. Add sample page in samples/AfterBlazorServerSide/Components/Pages/ControlSamples/{ComponentName}/
3. Add integration tests using Playwright in samples/AfterBlazorServerSide.Tests/
4. Create documentation in docs/{Category}/{ComponentName}.md
5. Update navigation:

• Add to samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor (TreeView)
• Add to samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor (home page catalog)
• Update mkdocs.yml and README.md

Base Class Selection

| Base Class | Use When | |------------|----------| | BaseWebFormsComponent | Simple components without styling (Literal, PlaceHolder) | | BaseStyledComponent | Components with visual styling (Label, Panel, Button) | | ButtonBaseComponent | Button-like components (Button, LinkButton, ImageButton) | | DataBoundComponent<T> | Components binding to collections (Repeater, GridView) | | BaseValidator | Validation controls |

Property Naming Convention

Match Web Forms property names exactly:

• Text not Label or Content
• CssClass not Class or ClassName
• NavigateUrl not Href or Url
• ImageUrl not Src or Source

Event Naming Convention

Prefix with On:

• OnClick for click events
• OnCommand for command events
• OnSelectedIndexChanged for selection changes
• OnDataBinding for data binding events

Integration Testing Requirements

Every component must have integration tests in samples/AfterBlazorServerSide.Tests/ using Playwright:

1. Page load test in ControlSampleTests.cs:

• Add route to the appropriate [Theory] test (EditorControl, DataControl, etc.)
• Verifies page loads without console errors or page errors

1. Interactive test in InteractiveComponentTests.cs (for interactive components):

• Test user interactions (clicks, input, selection changes)
• Verify component responds correctly to user actions
• Assert no console errors during interaction

Example page load test entry:

csharp
[Theory]
[InlineData("/ControlSamples/YourComponent")]
public async Task EditorControl_Loads_WithoutErrors(string path)

Example interactive test:

csharp
[Fact]
public async Task YourComponent_Interaction_Works()
{
    var page = await _fixture.NewPageAsync();
    try
    {
        await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/YourComponent");
        // Test interactions...
        // Assert expected behavior...
    }
    finally
    {
        await page.CloseAsync();
    }
}

Run integration tests with:

bash
dotnet test samples/AfterBlazorServerSide.Tests