Skip to content

Commit c44fc6b

Browse files
csharpfritzcsharpfritz
committed
Merge branch 'dev' of github.com:FritzAndFriends/BlazorWebFormsComponents into dev
2 parents 87a7259 + 82f5e02 commit c44fc6b

57 files changed

Lines changed: 5420 additions & 24 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/deploy-server-side.yml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
name: Deploy Server-Side Demo to Azure
2+
3+
on:
4+
push:
5+
branches:
6+
- 'main'
7+
paths:
8+
- 'src/BlazorWebFormsComponents/**'
9+
- 'samples/AfterBlazorServerSide/**'
10+
- 'samples/SharedSampleObjects/**'
11+
- '.github/workflows/deploy-server-side.yml'
12+
workflow_dispatch:
13+
14+
permissions:
15+
packages: write
16+
contents: read
17+
18+
env:
19+
REGISTRY: ghcr.io
20+
IMAGE_NAME: fritzandfriends/blazorwebformscomponents/serversidesamples
21+
22+
jobs:
23+
build-and-push:
24+
runs-on: ubuntu-latest
25+
26+
steps:
27+
- name: Checkout
28+
uses: actions/checkout@v4
29+
with:
30+
fetch-depth: 0
31+
32+
- name: Log in to GitHub Container Registry
33+
uses: docker/login-action@v3
34+
with:
35+
registry: ${{ env.REGISTRY }}
36+
username: ${{ github.actor }}
37+
password: ${{ secrets.GITHUB_TOKEN }}
38+
39+
- name: Set up Docker Buildx
40+
uses: docker/setup-buildx-action@v3
41+
42+
- name: Build and push Docker image
43+
uses: docker/build-push-action@v6
44+
with:
45+
context: .
46+
file: samples/AfterBlazorServerSide/Dockerfile
47+
push: true
48+
tags: |
49+
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
50+
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}

‎docs/EditorControls/CheckBoxList.md‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
# CheckBoxList
2+
3+
The CheckBoxList component renders a group of checkboxes that allow users to select multiple items from a list. This component supports both static items and data-bound scenarios.
4+
5+
Original Web Forms documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.checkboxlist?view=netframework-4.8
6+
7+
## Blazor Features Supported
8+
9+
- Static items via `StaticItems` parameter with `ListItemCollection`
10+
- Data binding via `Items` parameter with `DataTextField` and `DataValueField`
11+
- Two-way binding with `@bind-SelectedValues` for multiple selections
12+
- Layout options: Table (default), Flow, OrderedList, UnorderedList
13+
- Repeat direction: Vertical (default) or Horizontal
14+
- `TextAlign` property (Left or Right) for label positioning
15+
- `CellPadding` and `CellSpacing` for table layout
16+
- `OnSelectedIndexChanged` event handler
17+
- Disabled state via `Enabled` parameter
18+
- Style attributes (BackColor, ForeColor, Font, etc.) and CssClass formatting
19+
20+
## WebForms Features Not Supported
21+
22+
- `AutoPostBack` is not supported in Blazor - use `OnSelectedIndexChanged` event instead
23+
- `DataSourceID` is not supported - bind directly to collections via `Items` parameter
24+
25+
## WebForms Syntax
26+
27+
```html
28+
<asp:CheckBoxList
29+
ID="string"
30+
runat="server"
31+
AutoPostBack="True|False"
32+
CellPadding="integer"
33+
CellSpacing="integer"
34+
CssClass="string"
35+
DataSourceID="string"
36+
DataTextField="string"
37+
DataValueField="string"
38+
Enabled="True|False"
39+
RepeatColumns="integer"
40+
RepeatDirection="Horizontal|Vertical"
41+
RepeatLayout="Table|Flow|OrderedList|UnorderedList"
42+
TextAlign="Left|Right"
43+
Visible="True|False"
44+
OnSelectedIndexChanged="SelectedIndexChanged event handler">
45+
46+
<asp:ListItem Value="value1" Text="Option 1" Selected="True|False" />
47+
<asp:ListItem Value="value2" Text="Option 2" />
48+
49+
</asp:CheckBoxList>
50+
```
51+
52+
## Blazor Syntax
53+
54+
### Static Items
55+
56+
```razor
57+
<CheckBoxList TItem="object" StaticItems="items" @bind-SelectedValues="selectedValues" />
58+
59+
@code {
60+
private List<string> selectedValues = new();
61+
62+
private ListItemCollection items = new()
63+
{
64+
new ListItem("Option One", "1"),
65+
new ListItem("Option Two", "2"),
66+
new ListItem("Option Three", "3")
67+
};
68+
}
69+
```
70+
71+
### Data Binding
72+
73+
```razor
74+
<CheckBoxList TItem="Category"
75+
Items="categories"
76+
DataTextField="Name"
77+
DataValueField="Id"
78+
@bind-SelectedValues="selectedCategoryIds" />
79+
80+
@code {
81+
private List<string> selectedCategoryIds = new();
82+
83+
private List<Category> categories = new()
84+
{
85+
new Category { Id = "1", Name = "Electronics" },
86+
new Category { Id = "2", Name = "Clothing" },
87+
new Category { Id = "3", Name = "Books" }
88+
};
89+
90+
public class Category
91+
{
92+
public string Id { get; set; }
93+
public string Name { get; set; }
94+
}
95+
}
96+
```
97+
98+
### With Event Handler
99+
100+
```razor
101+
<CheckBoxList TItem="object"
102+
StaticItems="items"
103+
@bind-SelectedValues="selectedValues"
104+
OnSelectedIndexChanged="HandleSelectionChanged" />
105+
106+
@code {
107+
private List<string> selectedValues = new();
108+
109+
private void HandleSelectionChanged(ChangeEventArgs e)
110+
{
111+
Console.WriteLine($"Selection changed. Total selected: {selectedValues.Count}");
112+
}
113+
}
114+
```
115+
116+
### Text Alignment
117+
118+
By default, the label appears to the right of the checkbox. Use `TextAlign` to position it on the left:
119+
120+
```razor
121+
<CheckBoxList TItem="object" StaticItems="items" TextAlign="TextAlign.Left" />
122+
```
123+
124+
### Layout Options
125+
126+
#### Flow Layout (no table, items in a span)
127+
128+
```razor
129+
<CheckBoxList TItem="object"
130+
StaticItems="items"
131+
RepeatLayout="RepeatLayout.Flow"
132+
RepeatDirection="DataListEnum.Vertical" />
133+
```
134+
135+
#### Unordered List Layout
136+
137+
```razor
138+
<CheckBoxList TItem="object"
139+
StaticItems="items"
140+
RepeatLayout="RepeatLayout.UnorderedList" />
141+
```
142+
143+
#### Horizontal Direction with Multiple Columns
144+
145+
```razor
146+
<CheckBoxList TItem="object"
147+
StaticItems="items"
148+
RepeatDirection="DataListEnum.Horizontal"
149+
RepeatColumns="3" />
150+
```
151+
152+
### With Styling
153+
154+
```razor
155+
<CheckBoxList TItem="object"
156+
StaticItems="items"
157+
CssClass="checkbox-list"
158+
CellPadding="5"
159+
CellSpacing="2" />
160+
```
161+
162+
## HTML Output
163+
164+
### Table Layout (default, vertical direction)
165+
166+
```html
167+
<table class="custom-class">
168+
<tr>
169+
<td><input id="abc_0" type="checkbox" name="abc$0" value="1" /><label for="abc_0">Option 1</label></td>
170+
</tr>
171+
<tr>
172+
<td><input id="abc_1" type="checkbox" name="abc$1" value="2" checked /><label for="abc_1">Option 2</label></td>
173+
</tr>
174+
</table>
175+
```
176+
177+
### Flow Layout (vertical direction)
178+
179+
```html
180+
<span class="custom-class">
181+
<input id="abc_0" type="checkbox" name="abc$0" value="1" /><label for="abc_0">Option 1</label><br />
182+
<input id="abc_1" type="checkbox" name="abc$1" value="2" /><label for="abc_1">Option 2</label>
183+
</span>
184+
```
185+
186+
### Unordered List Layout
187+
188+
```html
189+
<ul class="custom-class">
190+
<li><input id="abc_0" type="checkbox" name="abc$0" value="1" /><label for="abc_0">Option 1</label></li>
191+
<li><input id="abc_1" type="checkbox" name="abc$1" value="2" /><label for="abc_1">Option 2</label></li>
192+
</ul>
193+
```
194+
195+
## Key Properties
196+
197+
| Property | Type | Default | Description |
198+
|----------|------|---------|-------------|
199+
| `StaticItems` | `ListItemCollection` | empty | Static list items |
200+
| `Items` | `IEnumerable<TItem>` | null | Data-bound items |
201+
| `DataTextField` | `string` | null | Property for display text |
202+
| `DataValueField` | `string` | null | Property for value |
203+
| `SelectedValues` | `List<string>` | empty | All selected values |
204+
| `RepeatColumns` | `int` | 0 | Number of columns (0 = auto) |
205+
| `RepeatDirection` | `DataListEnum` | Vertical | Vertical or Horizontal |
206+
| `RepeatLayout` | `RepeatLayout` | Table | Table, Flow, OrderedList, UnorderedList |
207+
| `TextAlign` | `TextAlign` | Right | Label position (Left or Right) |
208+
| `CellPadding` | `int` | -1 | Padding in table layout |
209+
| `CellSpacing` | `int` | -1 | Spacing in table layout |
210+
211+
## Key Differences from Web Forms
212+
213+
1. **Type Parameter**: Blazor CheckBoxList requires a `TItem` type parameter for data binding
214+
2. **Property Names**: Use `StaticItems` for the item collection (not `Items`), as `Items` is reserved for data-bound scenarios
215+
3. **Two-way Binding**: Use `@bind-SelectedValues` (returns `List<string>`) for automatic two-way binding
216+
4. **RepeatDirection**: Uses `DataListEnum.Horizontal` / `DataListEnum.Vertical` instead of enum
217+
5. **No AutoPostBack**: Blazor's event model doesn't require postback; events fire immediately
218+
219+
## Accessing Selected Items
220+
221+
```csharp
222+
var checkboxList = // reference to CheckBoxList component
223+
224+
// Get all selected values
225+
List<string> values = checkboxList.SelectedValues;
226+
227+
// Get first selected value
228+
string firstValue = checkboxList.SelectedValue;
229+
230+
// Get all selected items
231+
IEnumerable<ListItem> selectedItems = checkboxList.SelectedItems;
232+
233+
// Get first selected item
234+
ListItem firstItem = checkboxList.SelectedItem;
235+
236+
// Get first selected index
237+
int index = checkboxList.SelectedIndex;
238+
```
239+
240+
## Migration Notes
241+
242+
When migrating from Web Forms to Blazor:
243+
244+
1. Remove the `asp:` prefix and `runat="server"` attribute
245+
2. Add the `TItem="object"` type parameter
246+
3. Replace `AutoPostBack="true"` with the `OnSelectedIndexChanged` event handler
247+
4. Use `@bind-SelectedValues` for two-way data binding
248+
5. Remove `<asp:ListItem>` tags and define items in code-behind as `ListItemCollection`
249+
250+
### Before (Web Forms):
251+
252+
```html
253+
<asp:CheckBoxList ID="cblCategories"
254+
runat="server"
255+
RepeatDirection="Vertical"
256+
AutoPostBack="true"
257+
OnSelectedIndexChanged="Categories_Changed">
258+
<asp:ListItem Value="1" Text="Electronics" />
259+
<asp:ListItem Value="2" Text="Clothing" Selected="True" />
260+
<asp:ListItem Value="3" Text="Books" />
261+
</asp:CheckBoxList>
262+
```
263+
264+
### After (Blazor):
265+
266+
```razor
267+
<CheckBoxList TItem="object"
268+
StaticItems="categoryItems"
269+
@bind-SelectedValues="selectedCategories"
270+
OnSelectedIndexChanged="HandleCategoryChange" />
271+
272+
@code {
273+
private List<string> selectedCategories = new() { "2" };
274+
275+
private ListItemCollection categoryItems = new()
276+
{
277+
new ListItem("Electronics", "1"),
278+
new ListItem("Clothing", "2"),
279+
new ListItem("Books", "3")
280+
};
281+
282+
private void HandleCategoryChange(ChangeEventArgs e)
283+
{
284+
// Handle the change
285+
}
286+
}
287+
```
288+
289+
## See Also
290+
291+
- [CheckBox](CheckBox.md) - Single checkbox control
292+
- [DropDownList](DropDownList.md) - Single-select dropdown
293+
- [RadioButtonList](RadioButtonList.md) - Single-select radio buttons (planned)
294+
- [ListBox](ListBox.md) - Multiple selection list control (planned)

0 commit comments

Comments
 (0)