This is the third in a series of posts looking at how to integrate Dynamic Data features into an ASP.NET Web Forms website – and hence take advantage of automated client-side data annotation validation. In the last post, I showed how to connect a label to a dynamically generated TextBox using some complicated data binding code:
It works, but it’s hardly practical. Fortunately, Dynamic Data allows you to create custom templates – and that offers a much more practical solution connecting labels to our UI controls.
Dynamic Data uses conventional names and locations, so the first thing we need to do is add a new folder structure to our Web site – a DynamicData folder, with a nested FieldTemplates folder.
Next, right click on the FieldTemplates folder, select Add New Item and pick Dynamic Data Field:
Name it appropriately – in this case, I went with LabelMapper, and the wizard generated two .ascx controls for me, LabelMapper.ascx and LabelMapper_Edit.ascx:
The first version is read only, and contains a literal control (don’t worry about the red underlining – it compiles and runs despite Visual Studio not being entirely happy):
And here is the edit version:
It’s simplicity itself to connect this to our dynamic controls via the UIHint attribute. Assign the name of the .ascx control as the value of the UIHint attribute, and Dynamic Data will automatically look inside the FieldTemplates folder under the Dynamic Data folder for the matching files.
Notice that I’ve also removed not only my label, but also the default scaffolded text explaining that this is the “from” field. That’s because we’re about to customize the template so that it autogenerates the label.
The first task is to drag a label into the template, and associate it with the TextBox:
Then we need to set the text. The obvious choice for this is the name of the property we’re binding to (customizable as DisplayName via Data Annotations if the original property name is unsuitable, e.g. combines two words into one). This information is available as Column.DisplayName inside the Dynamic Data Field:
Now when we run the page, we get labels properly associated with the controls:
But there’s still a problem. The Message field should be a TextArea, not a simple TextBox. We don’t want to have to create a whole separate template for that – and we don’t have to. Simply add a public TextBoxMode property to the template’s code behind, with a default value of SingleLine:
Then add a TextMode attribute to the TextBox and bind the value to the property:
And then set the value as an attribute of the Dynamic Control:
And now we have dynamically generated controls that respect data annotations and generate the controls we want via a couple of simple attribute settings:
And the best thing is – now that we’ve created the template, we can reuse it any time we use Dynamic Data controls with standard Data View controls, and get the benefits of dynamic control generation along with well formed, accessible HTML.
For other related information, check out these courses from Learning Tree: