Language preference:

Phase 4: Source code files

What to look for

We've used several techniques inside of our Web Forms to change their layout and style sheets.

To accomplish this, we've created some new Page Template files.

Changes made to Orders.

  • ~/BLD Templates/CustomPages_Phase4/Orders/List.aspx uses the <ItemTemplate> node of the BLDListView control.
  • The BLDListView uses the default Pattern Template, GridView.ascx. It creates a <table> tag around the contents by default. That doesn't work for our free-form layout. Instead, we use the NamedPart called "Div" which gives a <div> tag container. You can see this in the ContainerNamedPart property of BLDListView and the Name Part definition in the ~/BLD Templates/PatternTemplates/GridView.ascx file in the <Container Tag="Table" > node.

Changes made to Products.
See the files in ~/BLD Templates/CustomPages_Phase4/Products.

  • The Product Detail, Edit, and Insert views are using BLDDataField controls to provide full control over their layout.
  • Product Edit and Insert also use a BLDPatternForDataFields control to draw a group of DataFields by using the DetailsView.ascx Pattern Template.
  • The Product List uses the GridView.ascx Pattern Template to show a subset of available DataFields.
  • Named Styles are used extensively.
<%Page Language="C#" MasterPageFile="~/BLD Templates/Content/PageTemplates_Phase4.master"
   ValidateRequest="False" Trace="false" %>
<%Register TagPrefix="act" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e) { } protected void ResolveDataField(object sender, ResolveDataFieldEventArgs args) { switch (args.DataField) { case "CustomerFullAddress": args.DataFieldDescriptor = new CustomerFullAddressDataFieldDescriptor(); break; case "ShippingFullAddress": args.DataFieldDescriptor = new ShippingFullAddressDataFieldDescriptor(); break; } } public class CustomerFullAddressDataFieldDescriptor : BaseCustomDataFieldDescriptor { public CustomerFullAddressDataFieldDescriptor() : base("CustomerFullAddress", typeof(string), true) { ShowAsHTML(); this.SetDisplayName("Customer Address"); } public override object GetValue(object entity, object host) { PeterBlum.WithDataAnnotations.Customer vCustomer = ((PeterBlum.WithDataAnnotations.Order)entity).Customer; StringBuilder vSB = new StringBuilder(); if (!String.IsNullOrEmpty(vCustomer.Address)) { vSB.Append(vCustomer.Address); vSB.Append("<br />"); } if (!String.IsNullOrEmpty(vCustomer.City)) { vSB.Append(vCustomer.City); vSB.Append(", "); } if (!String.IsNullOrEmpty(vCustomer.Region)) { vSB.Append(vCustomer.Region); vSB.Append(" "); } if (!String.IsNullOrEmpty(vCustomer.PostalCode)) { vSB.Append(vCustomer.PostalCode); vSB.Append("<br />"); } return vSB.ToString(); } } public class ShippingFullAddressDataFieldDescriptor : BaseCustomDataFieldDescriptor { public ShippingFullAddressDataFieldDescriptor() : base("ShippingFullAddress", typeof(string), true) { ShowAsHTML(); this.SetDisplayName("Shipping Address"); } public override object GetValue(object entity, object host) { PeterBlum.WithDataAnnotations.Order vOrder = (PeterBlum.WithDataAnnotations.Order)entity; StringBuilder vSB = new StringBuilder(); if (!String.IsNullOrEmpty(vOrder.ShipAddress)) { vSB.Append(vOrder.ShipAddress); vSB.Append("<br />"); } if (!String.IsNullOrEmpty(vOrder.ShipCity)) { vSB.Append(vOrder.ShipCity); vSB.Append(", "); } if (!String.IsNullOrEmpty(vOrder.ShipRegion)) { vSB.Append(vOrder.ShipRegion); vSB.Append(" "); } if (!String.IsNullOrEmpty(vOrder.ShipPostalCode)) { vSB.Append(vOrder.ShipPostalCode); vSB.Append("<br />"); } return vSB.ToString(); } } protected void RecordsList_ItemCreated(object sender, ListViewItemEventArgs e) { Control vRowContainer = e.Item.FindControl("Container"); if (vRowContainer != null) { if (((ListView)sender).SelectedIndex == e.Item.DataItemIndex) ((HtmlGenericControl)vRowContainer).Attributes.Add("class", "GridViewSelectedRow"); else { bool vUseAlt = e.Item.DataItemIndex % 2 != 0; ((HtmlGenericControl)vRowContainer).Attributes.Add("class", vUseAlt ? "GridViewAlternativeRow" : "GridViewDataRow"); } } }
</script> <asp:Content ID="headContent" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="server"> <des:BLDPageManager ID="BLDPageManager1" runat="server" AutoLoadForeignKeys="true" OnResolveDataField="ResolveDataField"> <Adapters> <des:BLDListViewAdapter DataBoundControlID="RecordsList" ValidationSummaryControlID="ValidationSummary1" SupportsEditActions="True" SupportsInsertActions="True" NoRecordsUsesInsertMode="false" ActionsUseRouting="true" /> </Adapters> <FilterManager ExpandedClear="true" /> </des:BLDPageManager> <h2 class="BLDPT_ActionTitle"> Orders</h2> <asp:ScriptManagerProxy runat="server" ID="ScriptManagerProxy1" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <des:ValidationSummary ID="ValidationSummary1" runat="server" InAJAXUpdate="True" HeaderText="List of validation errors" RelatedControlID="AfterValSum" RelatedControl_InvisiblePreservesSpace="false" /> <des:LocalizableLabel ID="AfterValSum" runat="server"><br/><br/></des:LocalizableLabel> <des:BLDPatternForFilterFields ID="Filters" runat="server" PatternTemplateName="Filters Rows Format" > <NamedStyles> <des:NamedStyle Name="Container" style="width:800px;" /> <des:NamedStyle Name="ButtonRow" style="text-align:right;font-size:10pt;padding-top:5px;padding-bottom:5px;width:400px;" /> </NamedStyles> </des:BLDPatternForFilterFields> <des:BLDListView ID="RecordsList" runat="server" DataSourceID="RecordsListDataSource" onitemcreated="RecordsList_ItemCreated" ShowHeaderRow="false" ContainerNamedPart="Div"> <ItemTemplate> <div id="Container" runat="server" style="width:800px;max-width:1200px;text-align:center;"> <table class="GridViewContainer" style="background-color: #FCFDFE; margin-top:15px;width:770px;display:inline-table;text-align:left;"> <tr class="GridViewDataRow"> <td style="font-weight:bold;padding-left:10px;"> <des:BLDLabel id="CustomerNameLabel" runat="server" AssociatedControlID="CustomerName" Text="Customer" /> </td> <td class="GridViewDataCell"> <des:BLDDataField id="CustomerName" runat="server" DataField="Customer.CompanyName" /> </td> <td style="font-weight:bold;padding-left:10px;"> <des:BLDLabel id="OrderDateLabel" runat="server" AssociatedControlID="OrderDate" /> </td> <td class="GridViewDataCell"> <des:BLDDataField id="OrderDate" runat="server" DataField="OrderDate" /> </td> <td style="font-weight:bold;padding-left:10px;"> <des:BLDLabel id="EmployeeLabel" runat="server" AssociatedControlID="Employee" /> </td> <td class="GridViewDataCell"> <des:BLDDataField id="Employee" runat="server" DataField="Employee" /> </td> </tr> <tr> <td style="font-weight:bold;padding-left:10px;"> <des:BLDLabel id="CustomerIDLabel" runat="server" AssociatedControlID="CustomerID" /> </td> <td class="GridViewDataCell"> <des:BLDDataField id="CustomerID" runat="server" DataField="CustomerID" /> </td> <td style="font-weight:bold;padding-left:10px;"> <des:BLDLabel id="ProductsTotalWithShippingLabel" runat="server" AssociatedControlID="ProductsTotalWithShipping" LabelSource="ShortDisplayName" Text="Total" /> </td> <td class="GridViewDataCell"> <des:BLDDataField id="ProductsTotalWithShipping" runat="server" DataField="ProductsTotalWithShipping" /> </td> <td colspan="2"> </td> </tr> </table> <asp:Panel id="DetailsPanel" runat="server" Style="padding: 0px 0px 0px 0px;"> <fieldset style="display:inline;width:45%;text-align:left;line-height:1.3em;margin-top:15px;margin-bottom:15px;margin-right:7px; background-color: #FCFDFE;"> <legend>Billing Address</legend> <des:BLDDataField id="CustomerFullAddress" runat="server" DataField="CustomerFullAddress" /> </fieldset> <fieldset style="display:inline;width:45%;text-align:left;line-height:1.3em;margin-top:15px;margin-bottom:15px;margin-left:7px; background-color: #FCFDFE;"> <legend>Shipping Address</legend> <des:BLDDataField id="ShippingFullAddress" runat="server" DataField="ShippingFullAddress" /> </fieldset> <br/> <fieldset style="line-height:1.3em;display:inline;width:45%;text-align:left;margin-right:7px; "> <legend>Cost</legend> <des:BLDPatternForDataFields id="CostFields" runat="server" PatternTemplateName="DetailsView" AutoGenerateButtons="None" PartsToGenerate="DetailViewNoHeaderFooter" > <ItemsInPattern> <des:DataFieldInPattern DataField="ProductsTotal" Label-Text="Subtotal" /> <des:DataFieldInPattern DataField="Freight" /> <des:DataFieldInPattern DataField="ProductsTotalWithShipping" Label-Text="Total" /> <des:DataFieldInPattern DataField="ShipName" /> </ItemsInPattern> <NamedStyles> <des:NamedStyle Name="Container" style="width:100%" /> </NamedStyles> </des:BLDPatternForDataFields> </fieldset> <fieldset style="line-height:1.3em;display:inline;width:45%;text-align:left;margin-left:7px; "> <legend>Shipping</legend> <des:BLDPatternForDataFields id="ShippingFields" runat="server" PatternTemplateName="DetailsView" AutoGenerateButtons="None" PartsToGenerate="DetailViewNoHeaderFooter" > <ItemsInPattern> <des:DataFieldInPattern DataField="ShipVia" Label-Text="Shipping method" /> <des:DataFieldInPattern DataField="Shipper" /> <des:DataFieldInPattern DataField="RequiredDate" /> <des:DataFieldInPattern DataField="ShippedDate" /> </ItemsInPattern> <NamedStyles> <des:NamedStyle Name="Container" style="width:100%" /> </NamedStyles> </des:BLDPatternForDataFields> <%-- <des:BLDLabel id="ProductsTotalWithShippingLabel2" runat="server" AssociatedControlID="ProductsTotalWithShipping" /> <des:BLDDataField id="ProductsTotalWithShipping2" runat="server" DataField="ProductsTotalWithShipping" /> <br/> --%> </fieldset> </asp:Panel> <asp:Panel id="DetailsPanelToggleArea" runat="server" style="float:left;padding-left:15px;padding-top:5px;"> <asp:Image id="DetailsPanelToggle" runat="server" /> <asp:Label id="DetailsPanelLabel" runat="server" Font-Size="Smaller" /> </asp:Panel> <act:CollapsiblePanelExtender runat="server" id="DetailsPanelExtender" TargetControlID="DetailsPanel" CollapseControlID="DetailsPanelToggleArea" ExpandControlID="DetailsPanelToggleArea" CollapsedText="Click to show details" ExpandedText="Click to hide details" ImageControlID="DetailsPanelToggle" TextLabelID="DetailsPanelLabel" CollapsedImage="~/Images/expand.jpg" ExpandedImage="~/Images/collapse.jpg" CollapsedSize="0" ScrollContents="False" SuppressPostBack="True" Collapsed="true" /> <div style="text-align:right;padding: 5px 15px 5px 5px" class="GridViewButtonsCell"> <des:BLDDataButtons id="DataButtons" runat="server" ShowDetailsButton="No" ShowSelectButton="false" /> </div> </div> </ItemTemplate> <namedstyles> <des:NamedStyle Name="Container" CssClass="GridViewContainer" Style="width:800px;" /> </namedstyles> </des:BLDListView> <des:BLDWidgetsView ID="BLDWidgets1" runat="server" PageSize="5" PagedControlID="RecordsList" ContainerTagAttributes-Height="1.6em" ContainerTagAttributes-Width="786px"> <Widgets> <des:PreviousPagerWidget ContainerTagUsage="OpeningTag" ContainerTagAttributes-Style="float:left;" /> <des:InfoPagerWidget/> <des:NextPagerWidget ContainerTagUsage="ClosingTag" /> <des:NewCommandButtonWidget ContainerTagAttributes-Style="float:right;" ImageUrl="~/BLD Templates/Content/Images/plus.gif" Text="Insert new item" LinkButtonLayout="ImageOutside" /> </Widgets> </des:BLDWidgetsView> <des:EntityDAODataSource ID="RecordsListDataSource" runat="server" EnableUpdate="false" EnableInsert="false" EnableDelete="true" EntityTypeFromRouting="true" > <EntityFilters> <des:FilterTemplatesEntityFilter ControlID="Filters" /> <des:UIDataFieldsFinderEntityFilter/> </EntityFilters> </des:EntityDAODataSource> </ContentTemplate> </asp:UpdatePanel> </asp:Content>