For Web Site:
Compare Web Solutions
Simple HTML Popup Widget
AJAX Full Address Finder
using PHP
using .NET
AJAX UK Street Finder
using PHP
using .NET
Popup Address Finder
using PHP
using .NET
Example Downloads
Request a Quote and Brochure
Features:
Competitive pricing
No set-up Charges
Over 99.99% Availability
Free Trial Software
Free Technical Support
Try before you buy
Local or Internet Data
Reseller Opportunities
    Postcode finder using data supplied by royal mail

Explain more…
Home >> For Web >> Ajax Full Address Finder using .NET

  Web AJAX Full Address Finder using .NET:

Using this Full Address Web Postcode Finder, the user:

  1. enters a postcode
  2. presses [Find Address] button
  3. selects their own address from selection list
  4. After selection, users address is populated in your web form

 

 

PHP Version
This functionality is also available for PHP platform
Learn more >>
Street Address
Street Address version of this
Learn more >>

Your Web Sign Up/Checkout Page

Postcode: Postcode Finder Button
Company:
Line 1:
Line 2:
Line 3:
Town:
County:
Country:

   Please note : This demonstration uses demonstration data unlike the live system


The above functionality can be installed in minutes in 5 easy steps:

The above Postcode Lookup for Full Address Search functionality can be added to a ASP.NET capable web site in minutes, by simply dropping the supplied files into your Web project. It is available in ASP.NET or C#.    

Advantages

  • Uses AJAX to populate web page, for a smooth customer experience
  • "Out of the box" Postcode Address Search solution
  • Gives almost total control of style
  • Adapts to a call from Mobile Device
  • Very little programming required. 
  • Your SimplyPostcode™ account codes are hidden from client
  • Quick to install, Simply add two files into your Web site
  • Will run on most Web servers
  • Not blocked by Pop-up blockers
  • No Data Administration Cost for you
  • Up to date Royal Mail data. Daily updates applied from our reliable web servers
  • Special test postcodes to test your .NET AJAX web postcode address finder

Requirements:

Web server capable of running ASP.NET code in VB/C#.   See version for PHP

Does NOT require Microsoft Version of AJAX to be loaded


How to implement in 7 steps:

Step 1 Sign up for 30 day trial

Simply use the "Sign Up for Trial" link at top right of this page to open a trial account.   We will then send you a data key, which is used to identify your account, when using the following service.

Step 2: Download the Example Code 

Simply download the example code.  The code is in the "AJAX/AJAX ASP NET Full Address VB" or "AJAX/AJAX ASP NET Full Address C#" 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.  Download code

If you wish to have two Full address postcode seaches on one web page, then please use the example in the “AJAX/AJAX ASP NET Full Address 2 Addresses VB” or "AJAX/AJAX ASP NET Full Address 2 Addresses C#" directory. It is significantly different from the single address fill example.

Step 3 : 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 showen in the "index.html" file included in the example download, as is the rest of the code.

Reference the JavaScript file

  HTML Code in <head> in section
<script type="text/javascript" src="SPL_AJAX_Full.js"></script>

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

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

Example link to activate Postcode Lookup Window:

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

Example button to activate Postcode Lookup Window:

  HTML Code (in your page)
<input type=button value="Lookup Address" 
onClick= "javascript:SPLGetAddressData(document.getElementById('postcode').value)">

This could easily be changed to use an image button.  

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

Step 5 : 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 appears below it.

  HTML Code (in your page or style sheet)
<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 6 : 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.

  HTML Code (in your page)
<tr>
   <td></td>
   <td>
      <div id="SPLSearchArea" />
   </td>
</tr>

In this case in a two column table

Step 7 : 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 Lookup, back to your target web page address fields:

  JavaScript Code (SPL_AJAX_Full.js)
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;

Where the fields on your web page all have ID'd expressed:

<input type=text name=line1 id=line1 size=45>
<input type=text name=line2 id=line2 size=45>
etc.

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

  XML Data returned
 <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>2N</deliverypointsuffix>
   <nohouseholds>1</nohouseholds>
   <smallorg>N</smallorg>
   <pobox></pobox>
   <rawpostcode>PE132QL</rawpostcode>
   <mailsortcode>18962</mailsortcode>
   <udprn>19147292</udprn>
   <unique>44</unique>
   <spare></spare>
</record>

This type of license returns:

  • ID
  • CompanyName
  • Line1
  • Line2
  • Line3
  • Town
  • CountyState
  • PostZipCode
  • Country "England","Wales","Northern Ireland","Isle of Man","Channel Islands","Scotland"
  • Other special data

When using ASP Text boxes

Simply run up your page. Right click on page, select view source, and find the ID that ASP has assigned to your ASP Textbox controls.

Probably “MainContent_” is added to start and “ASP” at end if ID you have designated. Thus we could edit the writeback section to read:

  JavaScript Code (SPL_AJAX_Full.js)
document.getElementById("MainContent_postcodeASP").value = POSTCODE;
document.getElementById("MainContent_line1ASP").value = LINE1;
document.getElementById("MainContent_line2ASP").value = LINE2;
document.getElementById("MainContent_line3ASP").value = LINE3;
document.getElementById("MainContent_townASP").value = TOWN;
document.getElementById("MainContent_countyASP").value = COUNTY;
document.getElementById("MainContent_countryASP").value = COUNTRY;

Please note, if a major structure change, liek change in Master Page may change the ID's, but otherwise it should remain the same.


Step 8 : 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:

  ASP.NET Code (SPLGetFullAddress1.aspx and SPLGetFullAddress2.aspx)
Dim DataKey$ = "PUT YOUR DATA KEY HERE"

Step 9 Testing

Final step is to test search software. Enter Postcode "ZZ99" to use test data or use our special test postcodes.


Optional customisation

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

Change text:

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

set to 

XMLService += "&text=

to suppress text

Mobile "select address" message

When run on a mobile device the address listbox does not expand, due to the way mobile devices work. Instead the address listbox becomes a selection box, and in that selection box are the words “Please select address”. This can be altered by using:

XMLService += "&textmob=Please%20Select%20Address"

Number of Lines in List Box:

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

XMLService += "&lines=8"

Use Drop down list:

To use a drop down list, instead of selection list, simply set:

XMLService += "&lines=0"

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 SPLGetFullAddress1.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 SPLGetFullAddress1.aspx page, without a complete page refresh.

The SPLGetFullAddress1.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 SPLGetFullAddress1.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 SPLGetFullAddress1.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 SPLGetFullAddress2.aspx and writes nothing to the DIV tag SPLSearchArea to hide the address selection list.

The web page SPLGetFullAddress2.aspx on your server then again relays the address information from our Postcode address 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.


Related "Web Site Postcode Finder" topics

Simple HTML Popup JQuery Popup Address Finder
AJAX Full Address Finder AJAX UK Street Finder Software
Download Example Code Request a Quote and Brochure
Open a 30 day evaluation account