Implement DropDownList component with shared ListItem infrastructure

README.md

@@ -29,7 +29,7 @@ There are a significant number of controls in ASP.NET Web Forms, and we will foc
     - Calendar
     - [CheckBox](docs/EditorControls/CheckBox.md)
     - CheckBoxList
-    - DropDownList
+    - [DropDownList](docs/EditorControls/DropDownList.md)
     - FileUpload
     - [HiddenField](docs/EditorControls/HiddenField.md)
     - [HyperLink](docs/EditorControls/HyperLink.md)

docs/EditorControls/DropDownList.md

@@ -0,0 +1,222 @@
+# DropDownList
+
+The DropDownList component renders an HTML `<select>` element that allows users to select a single item from a drop-down list. This component supports both static items and data-bound scenarios.
+
+Original Web Forms documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.dropdownlist?view=netframework-4.8
+
+## Blazor Features Supported
+
+- Static items via `StaticItems` parameter with `ListItem` collection
+- Data binding via `Items` parameter with `DataTextField` and `DataValueField`
+- Two-way binding with `@bind-SelectedValue`
+- Selected item tracking via `SelectedValue` and `SelectedIndex`
+- OnSelectedIndexChanged event handler
+- Disabled state via `Enabled` parameter
+- Style attributes (BackColor, ForeColor, Font, etc.) and CssClass formatting
+- Access to `SelectedItem` property
+
+## WebForms Features Not Supported
+
+- AutoPostBack is not supported in Blazor - use `OnSelectedIndexChanged` event instead
+- AppendDataBoundItems is not implemented
+- DataSourceID is not supported - bind directly to collections via `Items` parameter
+
+## WebForms Syntax
+
+```html
+<asp:DropDownList
+    AccessKey="string"
+    AutoPostBack="True|False"
+    BackColor="color name|#dddddd"
+    BorderColor="color name|#dddddd"
+    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset"
+    BorderWidth="size"
+    CssClass="string"
+    DataSourceID="string"
+    DataTextField="string"
+    DataValueField="string"
+    Enabled="True|False"
+    EnableTheming="True|False"
+    EnableViewState="True|False"
+    Font-Bold="True|False"
+    Font-Italic="True|False"
+    Font-Names="string"
+    Font-Overline="True|False"
+    Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|Large|X-Large|XX-Large"
+    Font-Strikeout="True|False"
+    Font-Underline="True|False"
+    ForeColor="color name|#dddddd"
+    Height="size"
+    ID="string"
+    OnDataBinding="DataBinding event handler"
+    OnDisposed="Disposed event handler"
+    OnInit="Init event handler"
+    OnLoad="Load event handler"
+    OnPreRender="PreRender event handler"
+    OnSelectedIndexChanged="SelectedIndexChanged event handler"
+    OnUnload="Unload event handler"
+    runat="server"
+    SelectedIndex="number"
+    SelectedValue="string"
+    TabIndex="integer"
+    ToolTip="string"
+    Visible="True|False"
+    Width="size">
+
+    <asp:ListItem Value="value1" Text="Display Text 1" Selected="True|False" />
+    <asp:ListItem Value="value2" Text="Display Text 2" />
+
+</asp:DropDownList>
+```
+
+## Blazor Syntax
+
+### Static Items
+
+```razor
+<DropDownList TItem="object" StaticItems="items" @bind-SelectedValue="selectedValue" />
+
+@code {
+    private string selectedValue = "";
+
+    private ListItemCollection items = new()
+    {
+        new ListItem("Select...", ""),
+        new ListItem("Option One", "1"),
+        new ListItem("Option Two", "2"),
+        new ListItem("Option Three", "3")
+    };
+}
+```
+
+### Data Binding
+
+```razor
+<DropDownList TItem="Product"
+              Items="products"
+              DataTextField="Name"
+              DataValueField="Id"
+              @bind-SelectedValue="selectedProductId" />
+
+@code {
+    private string selectedProductId = "";
+
+    private List<Product> products = new()
+    {
+        new Product { Id = "1", Name = "Widget" },
+        new Product { Id = "2", Name = "Gadget" },
+        new Product { Id = "3", Name = "Gizmo" }
+    };
+
+    public class Product
+    {
+        public string Id { get; set; }
+        public string Name { get; set; }
+    }
+}
+```
+
+### With Event Handler
+
+```razor
+<DropDownList TItem="object"
+              StaticItems="items"
+              @bind-SelectedValue="selectedValue"
+              OnSelectedIndexChanged="HandleSelectionChanged" />
+
+@code {
+    private string selectedValue = "";
+
+    private void HandleSelectionChanged(ChangeEventArgs e)
+    {
+        var newValue = e.Value?.ToString();
+        Console.WriteLine($"Selection changed to: {newValue}");
+    }
+}
+```
+
+### With Styling
+
+```razor
+<DropDownList TItem="object"
+              StaticItems="items"
+              CssClass="form-select"
+              BackColor="new WebColor(System.Drawing.Color.LightYellow)"
+              Font="new FontInfo { Bold = true }" />
+```
+
+## Key Differences from Web Forms
+
+1. **Type Parameter**: Blazor DropDownList requires a `TItem` type parameter for data binding
+2. **Property Names**: Use `StaticItems` for the item collection (not `Items`), as `Items` is reserved for data-bound scenarios
+3. **Two-way Binding**: Use `@bind-SelectedValue` for automatic two-way binding
+4. **Events**: Use `OnSelectedIndexChanged` with `ChangeEventArgs` instead of specialized event args
+5. **No AutoPostBack**: Blazor's event model doesn't require postback; events fire immediately
+
+## ListItem and ListItemCollection
+
+The `ListItem` class represents individual items in the dropdown:
+
+```csharp
+public class ListItem
+{
+    public string Text { get; set; }
+    public string Value { get; set; }
+    public bool Selected { get; set; }
+    public bool Enabled { get; set; } = true;
+
+    public ListItem(string text)
+    public ListItem(string text, string value)
+    public ListItem(string text, string value, bool selected)
+}
+```
+
+The `ListItemCollection` class provides helper methods:
+
+```csharp
+public class ListItemCollection : List<ListItem>
+{
+    public ListItem FindByValue(string value)
+    public ListItem FindByText(string text)
+}
+```
+
+## Common Patterns
+
+### Pre-select an Item
+
+```razor
+<DropDownList TItem="object" StaticItems="items" SelectedValue="2" />
+```
+
+### Disabled DropDownList
+
+```razor
+<DropDownList TItem="object" StaticItems="items" Enabled="false" />
+```
+
+### Get Selected Item Details
+
+```csharp
+var dropdown = // reference to DropDownList component
+var selectedItem = dropdown.SelectedItem;
+var text = selectedItem?.Text;
+var value = selectedItem?.Value;
+```
+
+## Migration Tips
+
+When migrating from Web Forms:
+
+1. Replace `<asp:DropDownList>` with `<DropDownList TItem="object">`
+2. Rename any `Items` parameter to `StaticItems`
+3. Replace `AutoPostBack="true"` with `OnSelectedIndexChanged` event handler
+4. Use `@bind-SelectedValue` instead of manually managing `SelectedValue`
+5. Remove `runat="server"` attribute
+6. Remove `<asp:ListItem>` tags and define items in code-behind as `ListItemCollection`
+
+## See Also
+
+- [ListBox](ListBox.md) - Multiple selection list control
+- [CheckBoxList](CheckBoxList.md) - Multiple checkboxes in a list
+- [RadioButtonList](RadioButtonList.md) - Radio button selection list

mkdocs.yml

@@ -65,6 +65,7 @@ nav:
   - Editor Controls:
     - AdRotator: EditorControls/AdRotator.md
     - Button: EditorControls/Button.md
+    - DropDownList: EditorControls/DropDownList.md
     - CheckBox: EditorControls/CheckBox.md
     - HiddenField: EditorControls/HiddenField.md
     - HyperLink: EditorControls/HyperLink.md

samples/AfterBlazorServerSide/Components/Pages/ControlSamples/DropDownList/Index.razor

@@ -0,0 +1,105 @@
+@page "/ControlSamples/DropDownList"
+
+<h1>DropDownList Component Samples</h1>
+
+<h2>Basic DropDownList with Static Items</h2>
+<DropDownList TItem="object" StaticItems="staticItems" @bind-SelectedValue="selectedStatic" />
+<p>Selected Value: <strong>@selectedStatic</strong></p>
+
+<h2>With Pre-selected Value</h2>
+<DropDownList TItem="object" StaticItems="preselectedItems" SelectedValue="banana" />
+
+<h2>Data-bound DropDownList</h2>
+<DropDownList TItem="Product"
+              Items="products"
+              DataTextField="Name"
+              DataValueField="Id"
+              @bind-SelectedValue="selectedProduct" />
+<p>Selected Product ID: <strong>@selectedProduct</strong></p>
+<p>Selected Product: <strong>@(products.FirstOrDefault(p => p.Id == selectedProduct)?.Name ?? "None")</strong></p>
+
+<h2>Disabled DropDownList</h2>
+<DropDownList TItem="object" StaticItems="staticItems" Enabled="false" SelectedValue="2" />
+
+<h2>With CSS Class</h2>
+<DropDownList TItem="object" StaticItems="styledItems" CssClass="form-select" />
+<br />
+<small>Note: The form-select class is from Bootstrap and provides styling.</small>
+
+<h2>With Inline Styles</h2>
+<DropDownList TItem="object"
+              StaticItems="colorItems"
+              BackColor="new WebColor(System.Drawing.Color.LightYellow)"
+              ForeColor="new WebColor(System.Drawing.Color.Navy)"
+              Font="new FontInfo { Bold = true }" />
+
+<h2>With Change Event</h2>
+<DropDownList TItem="object"
+              StaticItems="eventItems"
+              @bind-SelectedValue="eventSelection"
+              OnSelectedIndexChanged="HandleSelectionChanged" />
+<p>Last selection: <strong>@lastSelection</strong> at @lastChangeTime.ToString("HH:mm:ss")</p>
+
+@code {
+    private string selectedStatic = "";
+    private string selectedProduct = "";
+    private string eventSelection = "";
+    private string lastSelection = "None";
+    private DateTime lastChangeTime = DateTime.Now;
+
+    private ListItemCollection staticItems = new()
+    {
+        new ListItem("Select...", ""),
+        new ListItem("Option One", "1"),
+        new ListItem("Option Two", "2"),
+        new ListItem("Option Three", "3")
+    };
+
+    private ListItemCollection preselectedItems = new()
+    {
+        new ListItem("Apple", "apple"),
+        new ListItem("Banana", "banana"),
+        new ListItem("Cherry", "cherry")
+    };
+
+    private ListItemCollection styledItems = new()
+    {
+        new ListItem("Styled Option", "1"),
+        new ListItem("Another Option", "2")
+    };
+
+    private ListItemCollection colorItems = new()
+    {
+        new ListItem("Colored dropdown item", "1"),
+        new ListItem("Another colored item", "2")
+    };
+
+    private ListItemCollection eventItems = new()
+    {
+        new ListItem("Select one...", ""),
+        new ListItem("First", "1"),
+        new ListItem("Second", "2"),
+        new ListItem("Third", "3")
+    };
+
+    private List<Product> products = new()
+    {
+        new Product { Id = "1", Name = "Widget" },
+        new Product { Id = "2", Name = "Gadget" },
+        new Product { Id = "3", Name = "Gizmo" },
+        new Product { Id = "4", Name = "Doohickey" }
+    };
+
+    private void HandleSelectionChanged(ChangeEventArgs e)
+    {
+        lastSelection = e.Value?.ToString() ?? "None";
+        lastChangeTime = DateTime.Now;
+        StateHasChanged();
+    }
+
+    public class Product
+    {
+        public string Id { get; set; }
+        public string Name { get; set; }
+    }
+}

samples/BeforeWebForms/ControlSamples/DropDownList/Default.aspx

@@ -0,0 +1,38 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BeforeWebForms.ControlSamples.DropDownList.Default" %>
+<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
+    <h2>DropDownList Control Samples</h2>
+
+    <h3>Basic DropDownList with Static Items</h3>
+    <asp:DropDownList ID="ddlStatic" runat="server">
+        <asp:ListItem Text="Select..." Value="" />
+        <asp:ListItem Text="Option One" Value="1" />
+        <asp:ListItem Text="Option Two" Value="2" />
+        <asp:ListItem Text="Option Three" Value="3" />
+    </asp:DropDownList>
+
+    <h3>With Pre-selected Value</h3>
+    <asp:DropDownList ID="ddlSelected" runat="server">
+        <asp:ListItem Text="Apple" Value="apple" />
+        <asp:ListItem Text="Banana" Value="banana" Selected="True" />
+        <asp:ListItem Text="Cherry" Value="cherry" />
+    </asp:DropDownList>
+
+    <h3>Data-bound DropDownList</h3>
+    <asp:DropDownList ID="ddlDataBound" DataTextField="Name" DataValueField="Id" runat="server" />
+
+    <h3>Disabled DropDownList</h3>
+    <asp:DropDownList ID="ddlDisabled" Enabled="false" runat="server">
+        <asp:ListItem Text="Cannot change" Value="1" />
+    </asp:DropDownList>
+
+    <h3>With CSS Class</h3>
+    <asp:DropDownList ID="ddlStyled" CssClass="form-select" runat="server">
+        <asp:ListItem Text="Styled" Value="1" />
+    </asp:DropDownList>
+
+    <h3>With Inline Styles</h3>
+    <asp:DropDownList ID="ddlColors" BackColor="LightYellow" ForeColor="Navy" 
+                      Width="200px" runat="server">
+        <asp:ListItem Text="Colored dropdown" Value="1" />
+    </asp:DropDownList>
+</asp:Content>