Pattern Templates are an important tool when creating a BLD user interface. They are special UserControls that defines a pattern of controls and HTML, including BLDDataFields (BLD’s control that converts a column’s name into a Field Template). 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.

A simple case

Here is the markup of simple Pattern Template file that defines a two column row in a table.

<tr class="Row" >
   <td class="LabelColumn" style="vertical-align:top;" >
     <des:BLDLabel ID="BLDLabel1" runat="server" 
        AssociatedControlID="BLDDataField1" CssClass="LabelControl" />
   </td>
   <td class="DataColumn" style="vertical-align:top;" >
     <des:BLDDataField ID="BLDDataField1" runat="server"
         PatternRequiresDataField="true" CssClass="DataControl" />
   </td>
</tr>

To use this Pattern Template, add the BLDPatternForDataField control. Specify the file name of the Pattern Template and the desired field name.

Here are BLDPatternForDataField web controls that uses the above Pattern Template, which for this example, is given the file name “Two Fields Stacked.ascx”.

<asp:FormView id="FormView1" runat="server" DataSourceID="DataSource1">
<ItemTemplate>
  <des:BLDPatternForDataField id="BLDPatternForDataFields1" runat="server"
    PatternTemplateName="Two Fields Stacked" DataField="ProductName" />
  <des:BLDPatternForDataField id="BLDPatternForDataFields2" runat="server"
    PatternTemplateName="Two Fields Stacked" DataField="Description" />
  <des:BLDPatternForDataField id="BLDPatternForDataFields3" runat="server"
    PatternTemplateName="Two Fields Stacked" DataField="Price" />
</ItemTemplate>
</asp:FormView>

Named Styles: Your Pages control the formatting

Since Pattern Templates 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.

Pattern Templates use “Named styles” to override the default styles assigned to its web controls and HTML. Use the HtmlTag control instead of an actual HTML tag. It creates the tag and knows how to replace the default style with those supplied by Named Styles.

Here is the above Pattern Template converted to using Named Styles.

<des:HtmlTag runat="server" Tag="Tr" CssClass="Row" NamedStyle="Row" >
   <des:HtmlTag runat="server" Tag="Td" CssClass="LabelColumn" NamedStyle="LabelColumn" Style="vertical-align:top;" >
     <des:BLDLabel ID="BLDLabel1" runat="server" AssociatedControlID="BLDDataField1" CssClass="LabelControl" />
   </des:HtmlTag>
   <des:HtmlTag runat="server" Tag="Td" CssClass="DataColumn" NamedStyle="DataColumn" Style="vertical-align:top;" >
     <des:BLDDataField ID="BLDDataField1" runat="server" PatternRequiresDataField="true" CssClass="DataControl" />
   </des:HtmlTag>
</des:HtmlTag>

Here is a BLDPatternForDataField control that assigns Named Styles.

<des:BLDPatternForDataField id="BLDPatternForDataFields1" runat="server" 
      PatternTemplateName="Two Fields Stacked" DataField="ProductName" >
   <NamedStyles>
     <des:NamedStyle Name="Row" CssClass="CustomRowStyle" />
     <des:NamedStyle Name="LabelColumn" Style="width:150px;" />
   </NamedStyles>
</des:BLDPatternForDataFields>

More complex cases: handling all Parts of a DataBound control

Pattern Templates 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 BLDPartsPatternTemplate control into your Pattern Template and assign your HTML and web controls to its many Parts properties.

Here is a portion of the "DetailsView" Pattern Template showing some of its parts.

<des:BLDPartsPatternTemplate ID="BLDPartsPatternTemplate1" runat="server">
   <Container Tag="Table" NamedStyle="Container" CssClass="DetailsViewContainer" GenerateID="true" />
   <DataRow Tag="None"/>
   <DataCell Tag="Tr" NamedStyle="DataFieldRow" CssClass="DetailsViewDataFieldRow" >
    <Template>
      <des:HtmlTag runat="server" Tag="Td" CssClass="DetailsViewLabelColumn" NamedStyle="LabelColumn" Style="vertical-align:top;" >
        <des:BLDLabel ID="BLDLabel1" runat="server" AssociatedControlID="BLDDataField1" />
      </des:HtmlTag>
      <des:HtmlTag runat="server" Tag="Td" CssClass="DetailsViewDataColumn" NamedStyle="DataColumn" Style="vertical-align:top;" >
        <des:BLDDataField ID="BLDDataField1" runat="server" />
      </des:HtmlTag>
    </Template>
   </DataCell>
   <Buttons Tag="None" PatternTemplateName="DetailsViewLinkButtons" >
    <NamedParts>
      <des:ButtonsNamedPatternPart Name="LinkButtons" PatternTemplateName="DetailsViewLinkButtons" />
      <des:ButtonsNamedPatternPart Name="Buttons" PatternTemplateName="DetailsViewButtons" />
    </NamedParts>
   </Buttons>
</des:BLDPartsPatternTemplate>

Use the BLDListView, BLDFormView, or BLDPatternForDataFields web controls when working with a Parts Pattern Template.

In the above code, notice the <NamedParts> node of <Buttons>. Each Part allows you to define a list of alternatives. You specify the name of the Named Part in properties of the BLDPatternForDataFields, BLDListView, and BLDFormView 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" Pattern Template used by the BLDFormView control with the Named Part "Buttons" used for its Buttons user interface.

<des:BLDFormView ID="BLDFormView1" runat="server" DataSourceID="DataSource1" 
  PatternTemplateName="DetailsView" ButtonsNamedPartName="Buttons">
</des:BLDFormView>