
PatternTemplates: The fast and flexible way to set up your DataBound controls
Back
PatternTemplates are an important tool when creating a Dynamic Data user interface. They are special UserControls that defines a pattern of controls and HTML, including DynamicControls (DynamicData’s control that converts a column’s name into a FieldTemplate). Web page development frequently uses patterns, such as the HTML for a table row with two columns, where the first column contains a field name and the other is the field’s data.
ASP.NET Dynamic Data 4.0 offers “EntityTemplates”. That is a very simplistic implementation of PatternTemplates. While you can use EntityTemplates within DES Dynamic Data, you will find PatternTemplates a better toolset.
A simple case
Here is the markup of simple PatternTemplate file that defines a two column row in a table.
<tr class="Row" >
<td class="LabelColumn" style="vertical-align:top;" >
<desDD:DynamicLabel ID="DynamicLabel1" runat="server"
AssociatedControlID="DynamicControl1" CssClass="LabelControl" />
</td>
<td class="DataColumn" style="vertical-align:top;" >
<desDD:DynamicControl ID="DynamicControl1" runat="server"
PatternRequiresDataField="true" CssClass="DataControl" />
</td>
</tr>
To use a PatternTemplate, use the DynamicPattern control and specify the file name of the PatternTemplate. Also specify the desired data field names or use Automatic Scaffolding.
Here are DynamicPattern web controls that uses the above PatternTemplate, which for this example, is given the file name “TwoColumns.ascx”.
<asp:FormView id="FormView1" runat="server" DataSourceID="LinqDataSource">
<ItemTemplate>
<desDD:DynamicPattern id="DynamicPattern1" runat="server" PatternTemplateName="TwoColumns" DataField="ProductName" />
<desDD:DynamicPattern id="DynamicPattern2" runat="server" PatternTemplateName="TwoColumns" DataField="Description" />
<desDD:DynamicPattern id="DynamicPattern3" runat="server" PatternTemplateName="TwoColumns" DataField="Price" />
</ItemTemplate>
</asp:FormView>
NamedStyles: Your Pages control the formatting
Since PatternTemplates need to be used in many different situations, they should not force you to use a specific style sheet, like the above example shows. In addition, due to the layout of the page, they may need adjustments to their width and perhaps other elements. PatternTemplates let you move the definition of these things into the page that uses them.
PatternTemplates use “Named styles” to modify the class=, style=, and other HTML attributes within its web controls and HTML. Use the DynamicStylesTag control in place of an actual HTML tag to define the defaultclass=, style=, and other HTML attributes, plus the name of a Named Style that can replace them.
Here is the above PatternTemplate converted to using Named Styles.
<desDD:DynamicStylesTag runat="server" Tag="Tr" CssClass="Row" NamedStyle="Row" >
<desDD:DynamicStylesTag runat="server" Tag="Td" CssClass="LabelColumn" NamedStyle="LabelColumn" Style="vertical-align:top;" >
<desDD:DynamicLabel ID="DynamicLabel1" runat="server" AssociatedControlID="DynamicControl1" CssClass="LabelControl" />
</desDD:DynamicStylesTag>
<desDD:DynamicStylesTag runat="server" Tag="Td" CssClass="DataColumn" NamedStyle="DataColumn" Style="vertical-align:top;" >
<desDD:DynamicControl ID="DynamicControl1" runat="server" PatternRequiresDataField="true" CssClass="DataControl" />
</desDD:DynamicStylesTag>
</desDD:DynamicStylesTag>
Here is a DynamicPattern control that assigns Named Styles.
<desDD:DynamicPattern id="DynamicPattern1" runat="server" PatternTemplateName="TwoColumns" DataField="ProductName" >
<NamedStyles>
<desDD:NamedStyle Name="Row" CssClass="CustomRowStyle" />
<desDD:NamedStyle Name="LabelColumn" Style="width:150px;" />
</NamedStyles>
</desDD:DynamicPattern>
More complex cases: handling all Parts of a databound control
PatternTemplates are a much more advanced implementation of the EntityTemplates feature found in ASP.NET 4. They handle very complex cases with great ease, such as the ability to mimic all aspects of the DetailsView and GridView controls.
The more complex cases need a variety of ASP.NET markup snippets to cover the various "Parts" of a DataBound control. To accomplish this, you add a DynamicPartsPatterns control into your PatternTemplate and assign your HTML and web controls to its many Parts properties.
Here is a portion of the "DetailsView" PatternTemplate showing some of its parts.
<desDD:DynamicPartsPatterns ID="DynamicPartsPatterns1" runat="server">
<Container Tag="Table" NamedStyle="Container" CssClass="DetailsViewContainer" GenerateID="true" />
<DataRow Tag="None"/>
<DataCell Tag="Tr" NamedStyle="DataFieldRow" CssClass="DetailsViewDataFieldRow" >
<Template>
<desDD:DynamicStylesTag runat="server" Tag="Td" CssClass="DetailsViewLabelColumn" NamedStyle="LabelColumn" Style="vertical-align:top;" >
<desDD:DynamicLabel ID="DynamicLabel1" runat="server" AssociatedControlID="DynamicControl1" />
</desDD:DynamicStylesTag>
<desDD:DynamicStylesTag runat="server" Tag="Td" CssClass="DetailsViewDataColumn" NamedStyle="DataColumn" Style="vertical-align:top;" >
<desDD:DynamicControl ID="DynamicControl1" runat="server" />
</desDD:DynamicStylesTag>
</Template>
</DataCell>
<Buttons Tag="None" PatternTemplateName="DetailsViewLinkButtons" >
<NamedParts>
<desDD:ButtonsNamedPatternPart Name="LinkButtons" PatternTemplateName="DetailsViewLinkButtons" />
<desDD:ButtonsNamedPatternPart Name="Buttons" PatternTemplateName="DetailsViewButtons" />
</NamedParts>
</Buttons>
</desDD:DynamicPartsPatterns>
When you use a DynamicListView or DynamicFormView control with these complex PatternTemplates, they automatically
select the correct parts to build their HTML output.
In the above code, notice the <NamedParts> node. Each Part allows you to define a list of alternatives.
You specify the name of the Named Part in properties of the DynamicPattern, DynamicListView, and DynamicFormView controls
to use the alternative. You can also specify a Named Part on a specific data field or group of data fields.
Here is the "DetailsView" PatternTemplate used by the DynamicFormView control with the Named Part "Buttons" used for its Buttons user interface.
<desDD:DynamicFormView ID="DynamicFormView1" runat="server" DataSourceID="FormDataSource"
PatternTemplateName="DetailsView" ButtonsNamedPartName="Buttons">
</desDD:DynamicFormView>
Back
|