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
Updated Daily

  JQuery Popup Postcode Address Finder in .NET


This solution is best suited to a Web Application, for Office use, as it has no impact on the under laying web form.

To see demo press one of the button to demonstrate the three different levels of address searching:

Code for PHP

This functionality is also available for PHP platform
Learn more >>

Your Web Sign Up/Checkout Page

Postcode Finder Button Full with Adv
Postcode Finder Button Full
Postcode Finder Button Street
   
Company:
Line 1:
Line 2:
Line 3:
Town:
County:
Postcode:
Country:

   Please note : This demonstration is restricted to 5 uses in any one day


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


The above Postcode Finder for Full/Street Address Search functionality can be added to a C# .NET or VB .NET  capable web site in minutes, by simply dropping the supplied files into your Web project.    

Advantages

  • Uses JQuery popup, for a rich user experience
  • Popup overlaid over your web page, thus has little impact on your web page design
  • Ideal for Internal Use Web Applications
  • 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 JQuery web postcode address finder

Requirements:


Web server capable of running C# .NET or VB .NET code, which is most web servers. The page requires JQuery to display popup and perform the search which is included in the download.

PHP version of this Popup Address Finder


How to implement in 6 steps:


Step1: Download the Example Code 

Simply download the example code.   The C# .NET or VB .NET code is in the "Web Popup\JQuery NET Popup" directory of our example downloads. 

Then copy 'splpopup' directory and 'Default.aspx', into the same directory as your web page which requires the Address Finder.  We suggest you get the example working on you server to prove the server communication, data key, etc before adding to your own page. Download code

Postcode Lookup Important Note  Important: The 'splpopup' directory must be in a sub-directory of your postcode address lookup page.

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

Then on your own web page header, add the following reference to the Style sheet and JavaScript files included in our downloaded code.

This line is shown in the "Default.aspx" file included in the example download, as is the rest of the code.

Reference the JavaScript/Style files

  HTML Code in <head> section
<link rel="stylesheet" type="text/css" media="screen" href="splpopup/splsearch.aspx?css" />
<script type="text/javascript" src="splpopup/splsearch.aspx?js"></script>

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

Then add either a link, or button image, activate from JQuery code, using the following code to activate the Postcode Address Finder popup window:

Example link to activate Postcode Address Finder Window:

  HTML Code (in your .aspx page)

<input type=button value="Search"
       href="splpopup/splsearch.aspx"
       toptions="layout=dashboard,effect=clip,
       overlayClose = 1,shaded=1,
       onclose=hideBubbles(),ondisplay=initSearchform()"/>

Example button to activate Postcode Address Finder Window:

  HTML Code (in your .aspx page)

<a href="splpopup/splsearch.aspx"
       id="plsearch" value="Search"
       toptions="effect=clip,layout=dashboard, overlayClose = 1,shaded=1,
       onclose=hideBubbles(),ondisplay=initSearchform()">
   <img id="plsearch_btn" class="buttons" src="images/SPLButtons/FindAddress/button.png"
       onmouseover = "this.src ='images/SPLButtons/FindAddress/buttonhover.png'"
       onmouseout = "this.src = 'images/SPLButtons/FindAddress/button.png'"
       alt="Postcode Finder Button">
</a>

This could easily be changed to use an image button.  

Example JQuery code to activate Postcode Address Finder Window:

  JQuery Code (in your page)

<a href="splpopup/search_address.php"
$("#findAddressBut").click(function () {
var xpos = ($(document).width() / 2) - 230;
var ypos = ($(document).height() / 2) - 300; var data = {
'x': xpos,
'y': ypos,
'shaded': 1,
'overlayClose': 1,
'layout': 'dashboard',
'effect': 'clip',
'onclose': 'hideBubbles()',
'ondisplay': 'initSearchform()'
}; TopUp.display("splpopup/splsearch.aspx", data);
});
</a>

The above example shows to control the windows position.

Step 4 : Map your Address fields to Address Finder returned data

Now edit the C# .NET or VB .NET file "splsearch.cs" or "splsearch.vb", to write the correct address lines, which result from the Postcode Address Finder search, back to your target web page address fields:

  VB .NET Code (splpopup/splsearch.vb)

Dim organisation$ = "company"
Dim line1$ = "line1"
Dim line2$ = "line2"
Dim line3$ = "line3"
Dim town$ = "town"
Dim county$ = "county"
Dim postcode$ = "postcode"
Dim country$ = "country"

  C# .NET Code (splpopup/splsearch.cs)

string organisation = "company";
string line1 = "line1";
string line2 = "line2";
string line3 = "line3";
string town = "town";
string county = "county";
string postcode = "postcode";
string country = "country";

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

<input type=text name=company id=company size=45>
<input type=text name=line1 id=line1 size=45>
<input type=text name=line2 id=line2 size=45>
<input type=text name=line3 id=line3 size=45>
<input type=text name=town id=town size=45>
<input type=text name=county id=county size=45>
<input type=text name=postcode id=postcode size=45>
<input type=text name=country id=country size=45>

The Popup Address Finder uses our JSON Web service to retrieve Royal Mail UK Address data. The full address record is:

  JSON Data returned

{
   "found":"1",
   "credits_display_text":"Evaluation expires 3 Apr 2011",
   "accountadminpage":"https://www.simplylookupadmin.co.uk/WebAccountLogin.aspx?
                     doid=1&amp;coid=3333305462&amp;Pay=yes",
   "errormessage":"",
   "id":"31567757_2957290S_F",
   "organisation":"Tesco",
   "line1":"Barford Road",
   "line2":"",
   "line3":"",
   "town":"St. Neots",
   "county":"Cambridgeshire",
   "postcode":"PE19 2SA",
   "country":"England",
   "rawpostcode":"PE192SA",
   "deliverypointsuffix":"1N",
   "nohouseholds":"1",
   "smallorg":"Y",
   "pobox":"",
   "mailsortcode":"66140",
   "udprn":"50394326"
}

   Other fields of interest:

Name Description
id Is only used for our internal use
deliverypointsuffix This code can be added to the postcode to give a unique reference to each Delivery Point (letterbox) in a Postcode.  Although the UDPRN number is a better source of unique ID.
nohouseholds Number of house holds at this postcode address
smallorg Y = Small Organisation
pobox PO Box number if PO Box address
rawpostcode Postcode in its raw state.  7 chars long
mailsortcode The Royal Mail offer discount if mail is sorted by this code
udprn is a unique 8 digit code assigned to each addressable property (Delivery Point).
unique gives the unique portion of the address record, in the above example "44".
spare This is for future use. It will contain "|" separated data

see Additional Data Returned by Postcode Finder API for more information

Step 5 : 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 "splsearch.cs" or "splsearch.vb" files. This key will enable your account, for a 30 day evaluation period, for one postcode area. 

Identify your account:

  VB .NET Code (splpopup/splsearch.vb)

Dim dataKey$ = "Your Data Key goes here"
  C# .NET Code (splpopup/splsearch.cs)

string dataKey = "Your Data Key goes here";

Step 6 : Select the type of Postcode Address Finder

The JQuery Postcode Finder can provide Full Address, with or without Advanced search or Street\Thoroughfare. This can be set in the "splsearch.vb" or "splsearch.cs" file.

Select Search Type:

  VB .NET Code (splpopup/splsearch.vb)

Dim typeOfSearch$ = "FULL"
  C# .NET Code (splpopup/splsearch.cs)

string typeOfSearch = "FULL";
Mode Description
FULL Full Address Search - You simply enter the postcode and search. A list of addresses, for that postcode, is then presented for selection.
FULLADV As above + Advanced Search function, which allows for address searching based on partial address words.
Note: This is for Internal Use only, as members of the public would not want this level of searching. It is disabled for live External Use licenses.
STREET
Thoroughfare/Street Address - Simply returns the address record, less the Organisation name, Building name or number. The user then has to manually enter the Building Name/Number.

Enter Postcode "ZZ99" to use test data.   Test postcodes for various address formats.


Optional Popup Address Finder Customisation


Customise appearance by change Styles

Edit the styles in the “splpopup\assets\css\style.css” files if need be.

Only load JQuery if need be

in "splsearch.vb" or "splsearch.cs" if top_up (see http://www.gettopup.com/ for more information) library is already included in your web page, remove "assets/js/jquery/all.js" and "assets/js/top_up-min.js" from the array in the Page_Load sub

Turn On/Off the bubble help

in "splsearch.vb" or "splsearch.cs" simply edit:

  VB .NET Code (splpopup/splsearch.vb)

'  Bubble Help parameters
'  bubbleHelp = -1; Do not show bubble help
'  bubbleHelp = 0; Always show bubble help
'  bubbleHelp = N; N - positive integer;
'  Show bubble help N first runs
'  bubbleHelpDuration = N; N - positive integer
'  Bubble help duration in seconds
Dim bubbleHelp& = 0
Dim bubbleHelpDuration& = 3
  C# .NET Code (splpopup/splsearch.cs)

// Bubble Help parameters
// bubbleHelp = -1; Do not show bubble help
// bubbleHelp = 0; Always show bubble help
// bubbleHelp = N; N - positive integer;
// Show bubble help N first runs
// bubbleHelpDuration = N; N - positive integer
// Bubble help duration in seconds
//
long bubbleHelp = 0;
long bubbleHelpDuration = 3;

Show license details

Usually you want to hide the license details from the end user, but when used for Internal Use, you may want to show the user count. To turn this on:

  VB .NET Code (splpopup/splsearch.vb)

' Show license status at bottom of window
' showLicenseStatus = 1; Show status after each search
' showLicenseStatus = 0; Hide status

Dim showLicenseStatus& = 1
  C# .NET Code (splpopup/splsearch.cs)

// Show license status at bottom of window
// showLicenseStatus = 1; Show status after each search
// showLicenseStatus = 0; Hide status
//

long showLicenseStatus = 1;

To use with two address sections on one page

  1. Copy file “splsearch.aspx”, call it “splsearch2.aspx”.
  2. Now edit field mappings, in new aspx file, to point to second section of address fields on your form
  3. Add the find button on second address section but make it call “splsearch2.aspx”.

How it Works


When page is loaded, the reference to the "splpopup/splsearch.aspx?css" and "splpopup/splsearch.aspx?js" loads the style sheets and JavaScript listed in the Page_Load sub of page "splsearch.vb" or "splsearch.cs". This speeds up the loading of multiple style sheets and JavaScript files.

When the user presses the [Find Address] button, the popup is displayed.

The popup shown is basically derived from htm files in the "splpopup/assets" directory, which is loaded by the Page_Load sub of page "splsearch.vb" or "splsearch.cs".

When the user presses search then the  “splsearch.aspx” is used to call our data server to relay the JSON data back to the clients calling page, which is then displayed by the client side Javascript. 


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

[More information on AJAX]

[More information on AJAX Programming]

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