Skip to content

Commit 43e43f7

Browse files
authored
Merge pull request #96 from FritzAndFriends/dev
Release 0.6.0p1
2 parents 1756bed + 45580b6 commit 43e43f7

File tree

66 files changed

+1661
-206
lines changed

Some content is hidden

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

66 files changed

+1661
-206
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
*.ncrunchproject
1212
*.ncrunchsolution
1313

14+
# Project XML documentation
15+
BlazorWebFormsComponents.xml
16+
1417
# User-specific files (MonoDevelop/Xamarin Studio)
1518
*.userprefs
1619
.ionide/

README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ There are a significant number of controls in ASP.NET Web Forms, and we will foc
5050

5151
We will NOT be converting any DataSource objects, Wizard components, skins or themes. Once this first collection of 23 controls is written, we can consider additional features like modern tag formatting.
5252

53+
## Utility Features
54+
55+
There are a handful of features that augment the ASP<span></span>.NET development experience that are made available as part of this project in order to support migration efforts. These features include:
56+
57+
- [DataBinder](docs/Databinder.md)
58+
5359
## Compiling the project
5460

5561
There are three different types of .NET projects in this repository: .NET Framework, .NET Core, and .NET Standard. The sample projects are in the `/samples` folder, while the unit test project is next to the component library in the `/src` folder. From the root of the repository, you should be able to execute:

docs/Databinder.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# DataBinder
2+
3+
In Web Forms applications, there is a somewhat standard approach of formatting and placing data in controls by using the DataBinder object. The DataBinder would be used in ItemTemplate, AlternatingItemTemplate, and other control templates to indicate where data would be formatted and placed. [Microsoft's original documentation about the DataBinder](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.databinder?view=netframework-4.8) are available.
4+
5+
## ASP<span></span>.NET Syntax, Support and Migration
6+
7+
There are several common techniques that the DataBinder was used and various levels of support are provided:
8+
9+
| Web Forms Syntax | Description | Blazor Support |
10+
| --- | --- | --- |
11+
| `DataBinder.Eval(Container.DataItem, "PropertyName")` | Output the `PropertyName` of the current item | *Fully Supported for Container.DataItem* |
12+
| `Eval("PropertyName")` | Output the `PropertyName` of the current item | *Fully Supported when using static* |
13+
| `DataBinder.Eval(Container.DataItem, "PropertyName", "FormatString")` | Output the formatted value of `PropertyName` of the current item with the `FormatString` | *Fully Supported for Container.DataItem* |
14+
| `Eval("PropertyName", "FormatString")` | Output the formatted value of `PropertyName` of the current item with the `FormatString` | *Fully Supported when using static* |
15+
| `DataBinder.GetDataItem` | Output the item currently operated on | Not supported: Replace with calls to `@context` |
16+
| `DataBinder.GetPropertyValue(Container.DataItem, "PropertyName")` | Get the property requested as an object for further handling | Only supported when passing in `@context` for the first argument. **Recommendation**: replace with `@context.PropertyName` to directly access the property in a strongly-typed manner |
17+
18+
[Back to top](#DataBinder)
19+
20+
## Support and Migration
21+
22+
The DataBinder is not recommended by Microsoft in Web Forms for use in high-performance applications due to the amount of reflection used to output and format content. Similarly, we do not recommend long-term use of the DataBinder and have marked it with an `Obsolete` flag indicating that there are methods to easily migrate syntax to be more Razor-performance-friendly.
23+
24+
[Back to top](#DataBinder)
25+
26+
### Usage
27+
28+
To migrate your Web Forms control that is referencing the DataBinder to Blazor, start with syntax similar to the following:
29+
30+
```html
31+
<ItemTemplate>
32+
<li><%#: DataBinder.Eval(Container.DataItem, "Price", "{0:C}") %></li>
33+
</ItemTemplate>
34+
```
35+
36+
All of the databound components in this library support DataBinder syntax and can easily be converted by replacing the angle brackets with razor notation like the following:
37+
38+
```html
39+
<ItemTemplate>
40+
<li>@DataBinder.Eval(Container.DataItem, "Price", "{0:C}")</li>
41+
</ItemTemplate>
42+
```
43+
44+
That's a VERY simple conversion and its clear how we can continue to deliver the same feature and formatting using Blazor. You can even shorten the syntax to use the simple `Eval` keyword and get the same effect. Just include a `@using static` keyword near the top of your Blazor page with this syntax and you can using the shortened format of `Eval`.
45+
46+
```html
47+
@using static BlazorWebFormsComponents.DataBinder
48+
...
49+
<ItemTemplate>
50+
<li>@Eval("Price", "{0:C}")</li>
51+
</ItemTemplate>
52+
```
53+
54+
*Note:* Your Blazor application will emit compiler warnings while you continue to use the DataBinder.
55+
56+
[Back to top](#DataBinder)
57+
58+
### Moving On
59+
60+
Moving on from the DataBinder to a more performant and simple Razor syntax is quite easy using an `ItemContext` and referencing the iterated item directly. This approach has the additional benefit of providing type-safety and compiler checking on the content of your Blazor pages.
61+
62+
Our `Eval("Price")` statement above is further simplified into:
63+
64+
```html
65+
<Repeater Context="Item">
66+
...
67+
<ItemTemplate>
68+
<li>@Item.Price.ToString("C")</li>
69+
</ItemTemplate>
70+
...
71+
</Repeater>
72+
```
73+
74+
[Back to top](#DataBinder)

docs/Migration/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Namespaces and tag-prefixes are gone. You can do a Find and Replace on asp: and
3838

3939
- A simple initial site migration
4040
- Intertwined code
41+
- [DataBinder](Databinder.md)
4142
- Model-Binding
4243
- .NET Standard to the rescue!
4344
- Other considerations

samples/AfterBlazorServerSide/Pages/ComponentList.razor

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,12 @@
1818
<div class="col-md-3">
1919
<h3>Validation Controls</h3>
2020
<ul>
21-
22-
<li>CompareValidator </li>
23-
<li><a href="/ControlSamples/CustomValidator">CustomValidator</a> </li>
24-
<li>RangeValidator </li>
25-
<li><a href="/ControlSamples/RegularExpressionValidator">RegularExpressionValidator(?)</a> </li>
26-
<li><a href="/ControlSamples/RequiredFieldValidator">RequiredFieldValidator</a> </li>
27-
<li><a href="/ControlSamples/ValidationSummary">ValidationSummary </a> </li>
28-
21+
<li><a href="/ControlSamples/CompareValidator">CompareValidator</a></li>
22+
<li><a href="/ControlSamples/CustomValidator">CustomValidator</a></li>
23+
<li><a href="/ControlSamples/RangeValidator">RangeValidator</a></li>
24+
<li><a href="/ControlSamples/RegularExpressionValidator">RegularExpressionValidator(?)</a></li>
25+
<li><a href="/ControlSamples/RequiredFieldValidator">RequiredFieldValidator</a></li>
26+
<li><a href="/ControlSamples/ValidationSummary">ValidationSummary</a></li>
2927
</ul>
3028
</div>
3129

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@page "/ControlSamples/ListView/Grouping"
2+
3+
<h2>ListView Grouping Sample</h2>
4+
5+
<Nav />
6+
7+
<p>Here is a listview of 8 items grouped into 3's</p>
8+
9+
<table class="table">
10+
<thead>
11+
<tr>
12+
<td>Id</td>
13+
<td>Name</td>
14+
<td>Price</td>
15+
<td>Last Update</td>
16+
</tr>
17+
</thead>
18+
<tbody>
19+
<ListView @ref="simpleListView"
20+
runat="server"
21+
EnableViewState="false"
22+
GroupItemCount="3"
23+
Context="Item"
24+
ItemType="SharedSampleObjects.Models.Widget">
25+
<ItemTemplate>
26+
<tr>
27+
<td>@Item.Id</td>
28+
<td>@Item.Name</td>
29+
<td>@Item.Price.ToString("c")</td>
30+
<td>@Item.LastUpdate.ToString("d")</td>
31+
</tr>
32+
</ItemTemplate>
33+
<AlternatingItemTemplate>
34+
<tr class="table-dark"> <td>@Item.Id</td> <td>@Item.Name</td> <td>@Item.Price.ToString("c")</td> <td>@Item.LastUpdate.ToString("d")</td> </tr>
35+
</AlternatingItemTemplate>
36+
<GroupTemplate Context="ItemPlaceHolder">
37+
<tr><td colspan="4">GroupStart</td></tr>
38+
@ItemPlaceHolder
39+
<tr><td colspan="4">GroupEnd</td></tr>
40+
</GroupTemplate>
41+
<GroupSeparatorTemplate>
42+
<tr><td colspan="4">GroupingSeperator</td></tr>
43+
</GroupSeparatorTemplate>
44+
<EmptyDataTemplate>
45+
<tr>
46+
<td colspan="4">No widgets available</td>
47+
</tr>
48+
</EmptyDataTemplate>
49+
</ListView>
50+
</tbody>
51+
</table>
52+
53+
@code {
54+
55+
BlazorWebFormsComponents.ListView<Widget> simpleListView { get; set; }
56+
57+
protected override void OnAfterRender(bool firstRender)
58+
{
59+
60+
if (firstRender)
61+
{
62+
simpleListView.DataSource = Widget.Widgets(8);
63+
simpleListView.DataBind();
64+
}
65+
66+
//base.OnParametersSet();
67+
base.OnAfterRender(firstRender);
68+
69+
}
70+
71+
}
72+

samples/AfterBlazorServerSide/Pages/ControlSamples/ListView/Index.razor

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@page "/ControlSamples/ListView"
2+
@using static BlazorWebFormsComponents.DataBinder
3+
@using SharedSampleObjects.Models
24

35
<h2>ListView Component homepage</h2>
46

@@ -24,9 +26,9 @@
2426
<AlternatingItemTemplate>
2527
<tr class="table-dark">
2628
<td>@Item.Id</td>
27-
<td>@Item.Name</td>
28-
<td>@Item.Price.ToString("c")</td>
29-
<td>@Item.LastUpdate.ToString("d")</td>
29+
<td>@Eval("Name")</td>
30+
<td>@Eval("Price", "{0:C}")</td>
31+
<td>@Eval("LastUpdate", "{0:d}")</td>
3032
</tr>
3133
</AlternatingItemTemplate>
3234
<ItemTemplate>

samples/AfterBlazorServerSide/Pages/ControlSamples/ListView/ModelBinding.razor

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@
2121
Context="Item"
2222
SelectMethod="simpleListView_GetData"
2323
ItemType="SharedSampleObjects.Models.Widget">
24-
<LayoutTemplate>
25-
</LayoutTemplate>
2624
<AlternatingItemTemplate>
2725
<tr class="table-dark">
2826
<td>@Item.Id </td>
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div>
22
Other usage samples:
3-
<NavLink href="/ControlSamples/ListView" class="component-link" Match="NavLinkMatch.All">Simple List View </NavLink> |
4-
<NavLink href="./ControlSamples/ListView/ModelBinding" class="component-link" Match="NavLinkMatch.All">ModelBinding Sample</NavLink>
3+
<NavLink href="./ControlSamples/ListView" class="component-link" Match="NavLinkMatch.All">Simple List View </NavLink> |
4+
<NavLink href="./ControlSamples/ListView/ModelBinding" class="component-link" Match="NavLinkMatch.All">ModelBinding Sample</NavLink> |
5+
<NavLink href="./ControlSamples/ListView/Grouping" class="component-link" Match="NavLinkMatch.All">Grouping Sample</NavLink> |
56
<NavLink href="./ControlSamples/ListView/LayoutTest" class="component-link" Match="NavLinkMatch.All">Layout Test</NavLink>
67
</div>
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/ControlSamples/TreeView/ShowLines"
2+
@using static BlazorWebFormsComponents.Enums.TreeNodeTypes
3+
4+
<h2>TreeView Component homepage</h2>
5+
6+
<p>Here is a simple static tree view</p>
7+
8+
<TreeView ID="SampleTreeView" runat="server"
9+
ShowLines="true">
10+
<Nodes>
11+
<TreeNode Value="Home"
12+
NavigateUrl="/"
13+
Text="Home"
14+
Target="Content"
15+
Expanded="true">
16+
<TreeNode Value="Foo" Text="Foo"></TreeNode>
17+
<TreeNode Value="Bar" Text="Bar">
18+
<TreeNode Value="Baz" Text="Baz">
19+
<TreeNode Value="BlazorMisterMagoo" Text="BlazorMisterMagoo">
20+
21+
</TreeNode>
22+
</TreeNode>
23+
</TreeNode>
24+
<TreeNode Value="Bat" Text="Bat">
25+
<TreeNode Value="Baz" Text="Baz">
26+
<TreeNode Value="BlazorMisterMagoo" Text="BlazorMisterMagoo">
27+
28+
</TreeNode>
29+
</TreeNode>
30+
</TreeNode>
31+
</TreeNode>
32+
</Nodes>
33+
</TreeView>

0 commit comments

Comments
 (0)