DataBinder MVP Implementation #85 (#95)

* Completed initial implementation of Eval and DataBinder (#85)

* Added DataBinder doc

Author: csharpfritz

.gitignore

@@ -11,6 +11,9 @@
 *.ncrunchproject
 *.ncrunchsolution
 
+# Project XML documentation
+BlazorWebFormsComponents.xml
+
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs
 .ionide/

README.md

@@ -50,6 +50,12 @@ There are a significant number of controls in ASP.NET Web Forms, and we will foc
 
 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.
 
+## Utility Features
+
+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:
+
+  - [DataBinder](docs/Databinder.md)
+
 ## Compiling the project
 
 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

@@ -0,0 +1,74 @@
+# DataBinder
+
+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.
+
+## ASP<span></span>.NET Syntax, Support and Migration
+
+There are several common techniques that the DataBinder was used and various levels of support are provided:
+
+| Web Forms Syntax | Description | Blazor Support |
+| --- | --- | --- |
+| `DataBinder.Eval(Container.DataItem, "PropertyName")` | Output the `PropertyName` of the current item | *Fully Supported for Container.DataItem* |
+| `Eval("PropertyName")` | Output the `PropertyName` of the current item | *Fully Supported when using static* |
+| `DataBinder.Eval(Container.DataItem, "PropertyName", "FormatString")` | Output the formatted value of `PropertyName` of the current item with the `FormatString` | *Fully Supported for Container.DataItem* |
+| `Eval("PropertyName", "FormatString")` | Output the formatted value of `PropertyName` of the current item with the `FormatString` | *Fully Supported when using static* |
+| `DataBinder.GetDataItem` | Output the item currently operated on | Not supported: Replace with calls to `@context` |
+| `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 |
+
+[Back to top](#DataBinder)
+
+## Support and Migration
+
+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.
+
+[Back to top](#DataBinder)
+
+### Usage
+
+To migrate your Web Forms control that is referencing the DataBinder to Blazor, start with syntax similar to the following:
+
+```html
+<ItemTemplate>
+  <li><%#: DataBinder.Eval(Container.DataItem, "Price", "{0:C}") %></li>
+</ItemTemplate>
+```
+
+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:
+
+```html
+<ItemTemplate>
+  <li>@DataBinder.Eval(Container.DataItem, "Price", "{0:C}")</li>
+</ItemTemplate>
+```
+
+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`.
+
+```html
+@using static BlazorWebFormsComponents.DataBinder
+...
+<ItemTemplate>
+  <li>@Eval("Price", "{0:C}")</li>
+</ItemTemplate>
+```
+
+*Note:* Your Blazor application will emit compiler warnings while you continue to use the DataBinder.
+
+[Back to top](#DataBinder)
+
+### Moving On
+
+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.
+
+Our `Eval("Price")` statement above is further simplified into:
+
+```html
+<Repeater Context="Item">
+...
+    <ItemTemplate>
+      <li>@Item.Price.ToString("C")</li>
+    </ItemTemplate>
+...
+</Repeater>
+```
+
+[Back to top](#DataBinder)

docs/Migration/README.md

@@ -38,6 +38,7 @@ Namespaces and tag-prefixes are gone.  You can do a Find and Replace on asp: and
 
 - A simple initial site migration
 - Intertwined code
+- [DataBinder](Databinder.md)
 - Model-Binding
 - .NET Standard to the rescue!
 - Other considerations

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

@@ -1,4 +1,6 @@
 @page "/ControlSamples/ListView"
+@using static BlazorWebFormsComponents.DataBinder
+@using SharedSampleObjects.Models
 
 <h2>ListView Component homepage</h2>
 
@@ -24,9 +26,9 @@
 			<AlternatingItemTemplate>
 				<tr class="table-dark">
 					<td>@Item.Id</td>
-					<td>@Item.Name</td>
-					<td>@Item.Price.ToString("c")</td>
-					<td>@Item.LastUpdate.ToString("d")</td>
+					<td>@Eval("Name")</td>
+					<td>@Eval("Price", "{0:C}")</td>
+					<td>@Eval("LastUpdate", "{0:d}")</td>
 				</tr>
 			</AlternatingItemTemplate>
 			<ItemTemplate>

samples/BeforeWebForms/ControlSamples/ListView/Default.aspx

@@ -31,7 +31,7 @@
         </LayoutTemplate>
         <AlternatingItemTemplate>
             <tr class="table-dark">
-                <td><%# Item.Id %></td>
+                <td><%# DataBinder.Eval(Container.DataItem, "Id", "{0:C}") %></td>
                 <td><%# Item.Name %></td>
                 <td><%# Item.Price.ToString("c") %></td>
                 <td><%# Item.LastUpdate.ToString("d") %></td>

src/BlazorWebFormsComponents.Test/DataBinder/Eval_SimpleDataList.razor

@@ -0,0 +1,33 @@
+@inherits TestComponentBase
+@using static BlazorWebFormsComponents.Enums.RepeatLayout
+@using static BlazorWebFormsComponents.Enums.DataListEnum
+
+
+<Fixture Test="FirstTest">
+	<ComponentUnderTest>
+		<DataList Items="Widget.SimpleWidgetList"
+							ItemType="Widget"
+							RepeatLayout="Flow">
+			<HeaderTemplate>My Widget List</HeaderTemplate>
+			<ItemTemplate>@DataBinder.Eval("Name")</ItemTemplate>
+		</DataList>
+	</ComponentUnderTest>
+</Fixture>
+
+
+@code {
+
+	void FirstTest()
+	{
+
+		var cut = GetComponentUnderTest();
+
+		cut.FindAll("span").Count().ShouldBe(5);
+		cut.FindAll("span").Skip(1).First().TextContent.ShouldBe("My Widget List");
+
+		cut.Find("span").HasAttribute("title").ShouldBeFalse();
+
+	}
+
+
+}

src/BlazorWebFormsComponents.Test/DataBinder/Eval_SimpleListView.razor

@@ -0,0 +1,31 @@
+@inherits TestComponentBase
+@using static BlazorWebFormsComponents.DataBinder
+
+<Fixture Test="FirstTest">
+	<ComponentUnderTest>
+		<ListView Items="Widget.SimpleWidgetList"
+							ItemType="Widget">
+			<ItemTemplate><span>@Eval("Name")</span><span>@Eval("Price", "{0:C}")</span></ItemTemplate>
+		</ListView>
+	</ComponentUnderTest>
+</Fixture>
+
+
+@code {
+
+	void FirstTest()
+	{
+
+		var cut = GetComponentUnderTest();
+		Console.WriteLine(cut.Markup);
+
+		var spans = cut.FindAll("span");
+
+		var theWidget = Widget.SimpleWidgetList[0];
+
+		spans[0].TextContent.ShouldBe(theWidget.Name);
+		spans[1].TextContent.ShouldBe(theWidget.Price.ToString("C"));
+
+	}
+
+}

src/BlazorWebFormsComponents.Test/DataBinder/Eval_SimpleRepeater.razor

@@ -0,0 +1,27 @@
+@inherits TestComponentBase
+
+<Fixture Test="FirstTest">
+	<ComponentUnderTest>
+		<Repeater Items="Widget.SimpleWidgetList"
+							ItemType="Widget">
+			<ItemTemplate><span>@DataBinder.Eval("Name")</span></ItemTemplate>
+			<SeparatorTemplate><hr/></SeparatorTemplate>
+		</Repeater>
+	</ComponentUnderTest>
+</Fixture>
+
+
+@code {
+
+	void FirstTest()
+	{
+
+		var cut = GetComponentUnderTest();
+
+		cut.FindAll("span").Count().ShouldBe(3);
+		cut.FindAll("hr").Count().ShouldBe(3);
+
+	}
+
+
+}

src/BlazorWebFormsComponents/BaseDataBindingComponent.cs

@@ -19,7 +19,6 @@ public abstract class BaseDataBindingComponent : BaseWebFormsComponent
 
 		#endregion
 
-
 	}
 
 }