ASP.NET Postcode Lookup Customisation

Our ASP.NET Postcode Lookup control gives you a very quick way to add our postcode software to your website - just drag & drop it on, set up your username & password details and away you go. If you haven't already, you might want to read an earlier blog post about getting set up with the basics.

What about if you need to customise how the postcode lookup control displays the various labels, text boxes, buttons and other controls it needs? You may well need to do this to get the control to fit in with the natural flow of the rest of your data entry form.

The postcode lookup control is fully templated, so you can be in complete control of the look and feel of your form. For an example, we'll add a postcode lookup control to the default web application and customise it to appear in a table with the labels for each field in the left hand column and the text fields themselves in the right hand column.

Here we've just added the postcode lookup control to the bottom of the page. To start customising how it looks, click the ">" icon in the top-right of the control and click the "Conver to Template" link.

Switch to Source view and you'll see the full code used to display each "stage" of the control.

A different template is used to create the display for each stage. The available templates are:

1. PostcodeTemplate - the control shows postcode and building number fields and a Find Address button. This is the starting point for the control.
2. StreetTemplate - the control shows town, street and building number fields and a Find Address button. The control shows this stage if the user clicks the "I don't know my postcode" link.
3. CandidateTemplate - the control shows a list of addresses to choose from. The control shows this stage after the user clicks a Find Address button and more than one address matches the search.
4. AddressDisplayTemplate - the control shows the details of the selected address. The control shows this stage after the user selects an individual address.

Within each template you can enter any text and create any additional controls you like. To ensure that the postcode lookup control continues functioning as designed, you must not delete or rename any of the text box or button controls that are already within the templates, but you can move them around as required.

To start moving the controls into a table layout, add the table start and end tags around the postcode lookup control:

<table>
  <data8:AddressCapture ID="AddressCapture1" runat="server">
  ...
  </data8:AddressCapture>
</table>

Within each template you can now quickly convert the existing paragraph layout to a table layout by replacing <p> with <tr><td>, <br /> with </td><td> and </p> with </td></tr>. For example, the PostcodeTemplate code becomes:

<tr>
  <td>
    <asp:Label runat="server">Postcode: </asp:Label>
    <asp:LinkButton ID="UnknownPostcodeLinkButton" runat="server" CausesValidation="False">I don&#39;t know my postcode</asp:LinkButton>
  </td>
  <td>
    <asp:TextBox ID="PostcodeTextBox" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator runat="server" ControlToValidate="PostcodeTextBox" Display="Dynamic" ErrorMessage="You must enter a postcode" SetFocusOnError="True" ValidationGroup="AddressCapture1"></asp:RequiredFieldValidator>
  </td>
</tr>
<tr>
  <td>
    <asp:Label runat="server">House Name or Number: </asp:Label>
  </td>
  <td>
    <asp:TextBox ID="HouseTextBox" runat="server"></asp:TextBox>
  </td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>
    <asp:Button ID="FindAddressButton" runat="server" Text="Find Address" ValidationGroup="AddressCapture1" />
  </td>
</tr>

Repeat this process for each of the other templates. When you switch back into Design view, your postcode lookup control will now appear with the new layout.

To check how the postcode lookup control looks for each template, click the ">" button again and select the appropriate stage.