.NET : AJAX Premises Level

The AJAX Postcode Lookup for Premises Address search functionality can be added to a Classic ASP capable web site in minutes, by simply dropping the supplied files into your Web project.

Download code:

Click her to download code

All code examples on the web site are subject to copyright ComTek Accounts Ltd 2007

Requirements:

Web server capable of running ASP.NET code.
Does NOT require Microsoft Version of AJAX to be loaded

Integration in 7 easy steps:

Step1: Download the Example Code

Simply download the example code. The code is in the "AJAX ASP NET Full Address" directory of our example downloads. Then copy, into the same directory as your web page which requires Address Lookup, "SPL_AJAX_Full.js", "SPLGetFullAddress1.aspx" and "SPLGetFullAddress2.aspx" files.

Step 2 : Add reference to our JavaScript file to your page

Then on your own web page header, add the following reference to the JavaScript file your copied. This line is show in the "index.html" file included in the example download, as is the rest of the code.

The following is an example of getting Premises Address data. It simply returns demo data, but is actually calling our live server to retrieve the data:

Step 3 : Add a Link, button or image to activate Postcode Lookup

Then add either a link, using the following code to activate the Postcode Lookup Web address selection list:

Example link to activate Postcode Lookup Window:

<a href= "javascript:SPLGetAddressData(document.getElementById('postcode').value)">Lookup Address from link</a>

Example Button to activate Postcode Lookup Window:

This could easily be changed to use a image button.

Note: In the above example the Postcode Text field must have an ID of "postcode"

Step 4 : Copy Style for Text

When the inline selection box is shown for the user to select the address, the following style statements should be added to the header of the page to control the size of the selection box and the text which appear below it.

Customise combo/text style

<STYLE type="text/css">
.SPLAddressListSt{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 0;
margin-bottom: 0;
width: 80mm;}
.SPLAddressListStBottomLine{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
.SPLAddressListStErrorLine{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
.SPLAddressListLicenseLine{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center
margin-top: 0;
margin-bottom: 0;
}
</STYLE>

where:
SPLAddressListSt is the style of the address selection box
SPLAddressListStBottomLine is the style of the line below selection box
SPLAddressListStErrorLine is the style of text which appears if Postcode is not found
SPLAddressListLicenseLine is the style for the License information. This is only shown if using "Internal License" to show number of Users, etc

Of course the above style code can be placed in your own style sheet.

Step 5 : Place DIV tag where Inline Combo Box should appear

The inline address selection list is shown where you define the SPLSearchArea DIV tag. Basically our Postcode Lookup Server provides the HTML to display the list box in the DIV tag, which is populated by the AJAX call.

Combo placement

In this case in a two column table

Step 6 : Map your Address fields

Now edit the JavaScript at the end of file "SPL_AJAX_Full.js", to write the correct address lines, which result from the Postcode Address Lookup function, back to your target web page fields:

Example address field mappings:

document.getElementById("postcode").value=POSTCODE;
document.getElementById("line1").value=LINE1;
document.getElementById("line2").value=LINE2;
document.getElementById("line3").value=LINE3;
document.getElementById("town").value=TOWN;
document.getElementById("county").value=COUNTY;
document.getElementById("country").value=COUNTRY;
document.getElementById("company").value=COMP;

The example code also shows how to write the address information back to a "Memo" type field.

The UK Address data returned by the call is similar to our Postcode XML Web service. The full address record is:

<record>
<id>11570840_0E</id>
<organisation>Comtek</organisation>
<line1>44 Victoria Road</line1>
<line2></line2>
<line3></line3>
<town>Wisbech</town>
<county>Cambridgeshire</county>
<postcode>PE13 2QL</postcode>
<country>England</country>
<deliverypointsuffix>NA</deliverypointsuffix>
<nohouseholds>NA</nohouseholds>
<smallorg>NA</smallorg>
<pobox>NA</pobox>
<rawpostcode>PE132QL</rawpostcode>
<mailsortcode>NA</mailsortcode>
<udprn>NA</udprn>
<unique>NA</unique>
<extra>NA</extra>
</record>

Step 7 : Specify the Data Key

Open an account with us. Within seconds you will then receive a data key, by e-mail, which should be put in "SPLGetFullAddress1.aspx" and "SPLGetFullAddress2.aspx" files. This key will enable your account, for a 30 day evaluation period, for one postcode area.

Identify your account:

Dim datakey$ = "PUT YOUR DATA KEY HERE";

Enter Postcode "ZZ99" to use test data

Optional customisation

The text below the selection box can be changed by editing the following line in the "SPLGetFullAddress1.aspx" file:

Change text (line 74):

XMLService += "&text=Please%20Select%20Address";

set to

XMLService += "";

to suppress text

Number of Lines in Combo Box:

To change the number of lines in the selection box edit line 73

XMLService += "&lines=8";

Show License information (for Internal Use):

Set to showlic=1 to show License status:

XMLService += "&showlic=1";

How it Works

When the customer presses the [Find] button, then the function SPLGetAddressData is called, passing the Postcode entered in your Postcode field. This then calls the SPLGetFullAddressStep1.aspx page with the Postcode in the parameters, using the xmlHttp object created when the page was opened on the browser. This xmlHttp object provides AJAX (Asynchronous JavaScript and XML) to perform a Asynchronous call the SPLGetFullAddressStep1.aspx page, without a complete page refresh.

The SPLGetFullAddressStep1.aspx code on your web server then calls our Postcode lookup web server for the address information, adding your account information, etc. This means the client browser never sees your account information.

When the SPLGetFullAddressStep1.aspx page receives address information from our Postcode lookup server it simply relays it back to the web page (your page with address fields on the customers computer) on the client computer.

The result of SPLGetFullAddressStep1.aspx is then handled by the JavaScript function SPLhandleRequestStateChange which calls SPLhandleServerResponse when fully complete.

Function SPLhandleServerResponse then reads the XML, if it DOES NOT contain tag "<line1>" then it writes the response to the DIV SPLSearchArea on your web page. The response contains all the HTML to display the selection list, thus the list appears on your web page on the client computer, in the DIV tag.

When the user clicks on an address line then the function SPLAddressChange gets called, with the ID of the line selected. This function then calls SPLGetFullAddressStep2.aspx and writes nothing to the DIV tag SPLSearchArea to hide the address selection list.

The web page SPLGetFullAddressStep2.aspx on your server then again relays the address information from our Postcode lookup server to the client page on the customers computer.

Function SPLhandleServerResponse then reads the XML returned, if it DOES contain tag "<line1>" then it writes the address information to your address fields on your web page. Thus the address has been written to your web page.

Why do you have to have extra pages on your server?

Reason 1

Some browsers, especially if the client has turned up the security settings, may stop the client web page talking to a server from different domain. So by adding a page into your web domain, to relay the query to our Postcode address lookup server, removes this security problem.

Reason 2

Hides your account information from the Client Web Browser

This example could easily be converted to any other server side language, since the ASP pages are simply used to relay XML data from our server. The clients side JavaScript would remain the same.