Find the Latitude Longitude Of Your Home with Google Maps

Q: How to find the latitude and longitude coordinates of a place when you either have the street address or the zip code or just the name of a city.

Following are steps involved:

1. Open the Google Maps website and enter the address details in the search box.

2. Zoom In the Google Maps as much as possible until you locate the place for which you need the latitude and longitude.

3. Right click that exact location on Google Maps and select “Center Map Here”

4. Click the “Link to this Page” hyperlink on Google Maps website and copy paste the URL into notepad – look for the value of ll parameter in the URL – they are the latitude and longitude coordinates of your home.,78.457553

Copy paste that value in the Google Maps Search box again to confirm the location on Google Maps.



How to Create a Mashup by Combining 3 Different APIs

This tutorial will show you how to create a mashup of three different APIs including integration with Google Maps. This idea came about when I was searching through ProgrammableWeb’s API directory for a couple APIs that complimented each other enough that I could use one to provide the other with data. What I came up with will be known as the “Beer Mashup”.

Step 1. API Discovery

While looking through ProgrammableWeb’s directory, I found an IP geolocating tool called ipLoc. It simply accepts in an IP address and returns relevant location-specific data on it such as it’s state, city, country, postal code, etc.

I then found the very cool Beer Mapping Project, which has a huge directory of bars and pubs from not only across the US, but many other countries as well. Instantly I noticed that this was a perfect compliment to ipLoc because the BeerMapping API requires a city (which we can get from the ipLoc API) to return a list of local bars and pubs.

Lastly, I also wanted to integrate Google Maps into this mashup to plot out the addresses of the bars and pubs to add a bit of interactivity to the page instead of just displaying each bar in a simple HTML list.

Step 2. Variable Initialization

I usually find it best to start PHP documents off with some of the variables that I want to set globally within the script. Here I add a line that silences PHP warning messages (Google Maps spits out many of these if you happen to try to map an invalid address) and my BeerMashup and Google Maps API keys. We will end up using these API keys when we get to their respective steps below.

	<li> error_reporting(E_ERROR|E_PARSE);  //Silence Errors</li>
	<li>//Initialize Variables</li>
	<li> $beer_api = 'YOUR_BEERMAPPING_API_KEY';</li>
	<li> $gmaps_api = 'YOUR_GOOGLEMAPS_API_KEY';</li>

Step 3. IP Geolocation Setup

The ipLoc API allows you to either specify an IP address to get data on, or use the default IP address that the script finds.

Default Version:
Static Version (IP address is hardcoded):

  1. //Set Location
  2. //Visitor IP Address
  3. $ip = getenv(“REMOTE_ADDR”);
  4. //via IPLoc
  5. $iploc = file_get_contents(“$ip/json/&#8221;);  //Format: JSON
  6. $ipdata = json_decode($iploc, true);

After a little testing, I realized that the default version of the ipLoc API was finding the location (Scottsdale, AZ, USA) of my hosting provider’s server rather than my home computer’s IP location (Pittsburgh, PA, USA). To circumvent this, I decided to use the static IP version of the API (Line 2 above) and passed in the IP address that is detected by the getenv(“REMOTE_ADDR”) php variable.

After checking if the data has been successfully returned as a decoded json formatted string, we need to extract only the specific data we want to pass to the BeerMapping API, which is the city and state.

  1. // Error checking
  2. if ($ipdata[‘city’]) {
  3. $city = $ipdata[‘city’];
  4. $state = $ipdata[‘region’];
  5. $location = $city .”, “. $state;
  6. } else {
  7. $err = “No location data returned for your IP address: “. $ip;
  8. }

Step 4. Integrating Google Maps

This step needs to be done now because the next step will add the location points to Google Maps – and Google Maps has to be initialized before any of that can happen.

To make the Google Maps integration as easy and painless as possible, I’ve enlisted the help of a great PHP class called Phoogle from System Seven Designs. This class takes care of all the Google Maps API heavy lifting for us while just allowing us to worry about the data.

All we need to do to get this to work is to first include the class file we downloaded: phoogle.php, then set some basic map parameters such as the height, width, zoom level and your Google Maps API key. (Get one of those here).

  1. //Phoogle – GoogleMaps PHP Class
  2. require_once ‘phoogle.php’;
  3. $map = new PhoogleMap();
  4. $map->setAPIKey($gmaps_api); //Using the variable we set in Step 2
  5. $map->setHeight(450);
  6. $map->setWidth(750);
  7. $map->zoomLevel = 6;
  8. $map->showType = false;

Step 5. BeerMapping API

Since we have the combined city and state in the variable $location from Step 3, we have everything we need to pull data from the BeerMapping API. Of course we also need one of their API keys, which can be requested here (about a 30 seconds process, start to finish).

A BeerMapping API call looks like this according to their examples:
Real Example:,pa

After substituting our variables in for the API Key (Step 2) and Location (Step 3), our BeerMapping API call now looks like this:
Our Example:$beer_api/$location

After a little playing around with this API, I found that the location can’t have any spaces. So the below code first gets rid of the space bewtween the “city, state” format. Then it replaces all other spaces within the location with underscores “_”.

  1. //Format Location for use with API
  2. $locationF = str_replace(“, “, “,”, $location); // Remove space before “State”
  3. $locationF = str_replace(” “, “_”, $locationF); // Replace space with underscore in “City” name

Their data can only be returned in xml format, so we can easily extract the data returned by this call with thesimplexml_load_file PHP function.

  1. //BeerMapping – Format: XML
  2. $beerdata = simplexml_load_file (“$beer_api/$locationF&#8221;);

As the image shows, we first load the whole file into the variable $beerdata. After checking to see if we returned any results…

  1. // Error checking
  2. $beererr = $beerdata->location->id; //$beererr will be 0 if there were no locations returned
  3. if ($beererr == ‘0’) {
  4. $err = “No breweries were found in “. $location;
  5. } else {

…the next step is to cycle through each bar/pub returned in the call, extracting all the data we need to pass into Google Maps (Step 4).

  1. $breweries = $beerdata->location;
  2. $barcount = count($breweries); //How Many?
  3. foreach ($breweries as $brewery) {
  4. $name = $brewery->name;
  5. $link = $brewery->reviewlink;
  6. $street = $brewery->street;
  7. $city = $brewery->city;
  8. $state = $brewery->state;
  9. $zip = $brewery->zip;
  10. $phone = $brewery->phone;
  11. //Location Point set for the Google Maps API
  12. $map->addAddress(“$street $city $state $zip”, “<a href=’$link’ title=’$name BeerMap’>$name</a><br/>$street<br />$city, $state $zip<br />Phone: $phone”);
  13. }
  14. }
  15. ?>

Line 1 above sets the structure location of the “locations”. Line 2 counts the amount of “locations” the API result returned. The remaining lines use a foreach loop to cycle though each “location” and pull out it’s address information. Line 14 sets a “point” for each brewery on our Google Map.

Step 6. HTML Generation

After finishing all the PHP code that we’ve created, we can now work on displaying it. The first few lines shown below are standard in any HTML document, but after that we get back to using PHP. We first check to see if the variable $err is FALSE – which would mean that the $err variable is empty, or that we never received an error. If we never got an error, we spit out the Google Map, otherwise we spit out an error message.

  1. <html xmlns=””&gt;
  2. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “”&gt;
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
  5. <link rel=”stylesheet” type=”text/css” href=”styles.css” />
  6. <title>Bars Near <?php echo $location; ?></title>
  7. </head>
  8. <body>
  9. <div class=”wrapper”>
  10. <div class=”header”>
  11. <img class=”logo” src=”images/logo.png” alt=”The Beer Mashup” />
  12. <p class=”footer”>Developed by <a href=””>Chris Cagle</a> for <a href=””>NETTUTS</a></p&gt;
  13. <div class=”mapdiv”>
  14. <?php
  15. if (!$err) {
  16. echo “<div>”;
  17. $map->printGoogleJS();
  18. $map->showMap();
  19. echo “<h3>”. $location .” <span>(“. $barcount .” Bars)</span></h3>”;
  20. } else {
  21. echo “<p class=\”error\”><b>”. $err .”</b></p>”;;
  22. }
  23. ?>
  24. </div>
  25. </div>
  26. </div>
  27. </body>
  28. </html>

After adding in some text and CSS and you now have a great looking web page that displays all the bars and pubs within the vicinity of the location of whoever is viewing the web page.

View the demo of the page as it stands now. The mashup is working great now, but we have one more improvement that will make all the difference when it comes to UI.

Step 7. Changing the Code to Allow Locations to be Input by the Visitor

At this point, our page works just fine but there is one small caveat: The visitor can only view bars from his or her current location. What if the visitor wants research bars in a different town rather than the one our IP API returned for him or her? Any visitor would want the ability to specify the location to research in.

To allow this, we will have a simple form that will accept in a city and state from the visitor then reload the page for the given location and skip the ipLoc API call completely. We will insert this code right before our<div class=”mapdiv”> line in Step 6.

  1. <form method=”post” id=”form” action=”beermashup2.php”>
  2. <span>location: (ex. New Orleans, LA)</span>
  3. <input type=”text” value=”” name=”loc” id=”loc” /><br class=”clear” />
  4. <input type=”submit” id=”submitted” value=”SEARCH” name=”submitted” />
  5. </form>

In order to make this work, we will need to wrap the code we made in the ipLoc step (Step 3) in an if-statement that checks if the form was submitted or not. If the form *was not* submitted (which will happen each time the page is initially loaded), then it will use the ipLoc IP geolocation code. If the form *was* submitted, it will take what the user submitted and set our $location variable to that.

  1. //Set Location
  2. if ( isset($_POST[‘loc’]) ) {
  3. //via user input
  4. $location = $_POST[‘loc’];
  5. } else {
  6. //Visitor IP Address
  7. $ip = getenv(“REMOTE_ADDR”);
  8. //via IPLoc
  9. $iploc = file_get_contents(“$ip/json/&#8221;);  //Format: JSON
  10. $ipdata = json_decode($iploc, true);
  11. // Error checking
  12. if ($ipdata[‘city’]) {
  13. $city = $ipdata[‘city’];
  14. $state = $ipdata[‘region’];
  15. $location = $city .”, “. $state;
  16. } else {
  17. $err = “No location data returned for your IP address: “. $ip;
  18. }

Step 8. Putting it all Together

View the demo of the final application.

You can view the source code of the final project (which is pretty much just the steps above pushed together) and see how I ended up combining 3 separate APIs into one application. Take a stroll for yourself through the API directory over at ProgrammableWeb and see what you can come up with on your own. Working with APIs is my new obsession because it is exciting to be able to create something new and useful from someone else’s data. If this tutorial has helped you mashup a couple of APIs, post them here – I would love to see them.

This is How You Use the Google Maps API – screencast

So your client emails you and asks, “Can you put one of those flashy maps on my contact page so that users can actually see our building from a satellite’s view?”. You’ve used Google maps many times, but there is only one problem: you have no idea how to use the API. Well get out your spoon and dig in!

Step 1: Obtain a Unique API Key

If you were to download the source code that is provided with this article, you would find that it doesn’t work on your website. The reason is because Google requires all users to obtain a unique “API key” for each site that implements Google maps.

Never fear. It’s 100% free and takes about thirty seconds to sign up. First, visit Google’s sign up page and enter the url of your website. Don’t worry about adding a specific path. The root url will cover every page that is part of that domain. Agree to the terms and conditions and click “Generate API”.

Generate Key

That’s it! The page that you’ve been redirected to contains your unique key as well as a sample page – to serve as a crash course. Your key will look something like:


You’ll also find a script path that will look like:

Yours will be different from mine because it will contain your own specific key value. Copy this and paste it into the head portion of your document.

Sign Up Complete

You might want to bookmark the link to the API documentation. You’ll undoubtedly be referencing it as your skills progress.

Step 2: Setting Up Your HTML

For the sake of simplicity, we’ll create a bare bones layout. Add the following within the body element of your document.

  1. <div id=”myMap” style=”width: 600px; height: 400px;”></div>

In a real world situation, you should move the styling to an external file (like I did in the video). The height and width values will by used by the API to determine the dimensions of your map. Don’t worry, nothing will be clipped off.

Step 3: Javascript

Next, add the following to your Javascript file. Review it a bit and then continue on.

  1. $(function() { // when the document is ready to be manipulated.
  2. if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map’s
  3. var map = document.getElementById(“myMap”); // Get div element
  4. var m = new GMap2(map); // new instance of the GMap2 class and pass in our div location.
  5. m.setCenter(new GLatLng(36.158887, -86.782056), 13); // pass in latitude, longitude, and zoom level.
  6. }
  7. else {alert(“Your browser is not worthy.”);}
  8. });

To take this code line by line:

  • When the document is ready to be manipulated, run the code within.This is a jQuery syntax, but jQuery isn’t required in the least. You could also simply add an “onLoad()” attribute to your body element – though this is messy.
  • If the browser that the user is accessing the map from isn’t compatible with the API, then show an alert (see bottom). Otherwise, run the code within.
  • Create a variable called “map” and tell it to find the div that will contain the map.
  • Next, create a variable called “m” and make it equal to a new instance of the “GMap2″ class. Within the parenthesis, pass in the “map” variable that you just created previously
  • Finally, set a center point so that the map knows what to show. To do this, we create a new instance of the “GLatLng” class and pass in the latitude and longitude values. You can go here to grab the appropriate values. In my case, I’ve set the coordinates to my home town. After that, you can optionally input a zoom level – which I’ve set to the standard ’13′.

This code alone will give you a basic map that might be completely appropriate for your needs. However, if you’d like to also implement “zoom” and “map mode” features, read on.

Step 4: Refining Our Map

There are literally dozens of features that you can add to your map. We’ll go over a few of them. First, we’ll implement a zoom bar that will allows the users to incrementally zoom in or out.

  1. m.addControl(new GLargeMapControl())

Here, we’re taking our map and are adding a new control called “GLargeMapControl”.

Next, let’s add a feature that will allow the users to choose which map mode they desire – Normal, Satellite View, or a hybrid.

  1. var c = new GMapTypeControl(); // switch map modes
  2. m.addControl(c);
  • Create a variable called “c” and make it equal to a new instance of the “GMapTypeControl” class.
  • Add a new control, and pass in “c”.

If you refresh your browser, you’ll see that the user nows has the option to choose his viewing mode. But what if you want to set the default mode? In such instances, you would use “setMapType”.

  1. m.setMapType(G_SATELLITE_MAP);

When defining the default mode, you have three choices.


You’re Finished!

That wasn’t too hard, was it? There are a few specific class names that you’ll need to memorize, or jot down for later reference. But other than that, it’s strikingly simple to implement such an advanced map into your websites.



Encrypting Connection Strings in web.config file


ASP.NET stores all the configuration information in plain text files called web.config and machine.config files. We store all vital information including database connection strings, user names, passwords for the databases. Thus you end up storing all sensitive information in vulnerable plain text files which is nothing but security compromise.

Taking a clue, Microsoft has provided the capability to encrypt sensitive information in configuration files including connection strings in ASP.NET 2.0. With this new capability you can easily encrypt sections of configuration files which makes your application secure.

This new capability brings it with performance overhead that occurs when you encrypt or decrypt sections of web.config files. So use it sparingly. That means be judgmental and judicious when you decide to encrypt data.

ASP.NET 2.0 introduced Protected Configuration model that allows you to encrypt data using two Protected Configuration Providers. They are:

  • RSAProtectedConfigurationProvider: This is the default provider and uses the RSA Public Key Encryption algorithm to encrypt and decrypt data.
  • DataProtectionConfigurationProvider: This provider uses Windows Data Protection Application Programming Interface (DPAPI) to encrypt and decrypt data.

Let’s explore this new capability of encrypting and decrypting of connection strings in web.config files using above two providers available in ASP.NET 2.0.

Programmatic Encryption/Decryption

Take web.config file which contains valid connection string from some existing project. Bellow is an example of configuration section.

<add name=”NorthwindConnectionString” connectionString=”Data Source=ARAS02-XP;Initial Catalog=Northwind;User ID=sa”
providerName=”System.Data.SqlClient” />
<compilation debug=”true”/>
<authentication mode=”Windows”/>
<pages theme=”Theme1″ />

You can observe <connectionStrings> section in above sample which contains connection string information.

Add new form to your existing project and add the below method EncryptConnString() to code behind of the form. We will use RSAProtectedConfigurationProvider model to encrypt the connection strings. We will try to analyze this magic piece of code. Let’s start with namespaces. The System.configuration namespace contains classes which deal with the configuration information associated with client applications and ASP.NET applications. The System.Web.Configuration.WebConfigurationManager class is the preferred way to provide programmatic access to configuration files of ASP.NET web applications. You can use one of open methods provided by WebConfigurationManager that return configuration object which in turn provides the required methods and properties to handle the underlying configuration files. The GetSection method of configuration object returns the connectionStrings section object for the web.config file.

using System.Web.Configuration;
using System.Web.Security;
using System.Configuration;

public void EncryptConnString()

Configuration config = WebConfigurationManager.OpenWebConfiguration(Request.ApplicationPath);
ConfigurationSection section = config.GetSection(“connectionStrings”);
if (!section.SectionInformation.IsProtected)

Encrypting Connection string using RSAProtectedConfigurationProvider model

You can observe in below listing that connectionStrings section is encrypted when we execute above method using RsaProctectedConfigurationProvider model.

<connectionStrings configProtectionProvider=”RsaProtectedConfigurationProvider”>
<EncryptedData Type=”;
<EncryptionMethod Algorithm=”” /&gt;
<KeyInfo xmlns=””&gt;
<EncryptedKey xmlns=””&gt;
<EncryptionMethod Algorithm=”″ /&gt;
<KeyInfo xmlns=””&gt;
<KeyName>Rsa Key</KeyName>
<CipherValue>NQPKYTuUVO5SWpxXdBUpoMKYYUmEBBuAw8LXe+DxMYrkMzzAJsUVw6uZZLJXWa9ipAEx hvS2hhkGx7MHkpustn+IT+PpuxtIKSDFkumZdA/3kcaHuSO74M75Qt+BmW42v/KWNwVv 7umXLz78ka4jDeY/yf2BMpkcs35TkSS9PVM=</CipherValue>
<CipherValue>MVKe6xdu6h4DqGHmzuzeBqaWcL+m+Rl0EHi9uwQAqhZ9N56HzGgC66cXEiDJ8IGaSCrAYm 7z2ERQYKwjMyTJMkiJ3cSk7CSgqxfrT3+7+DzzKMkB489AmADfxtRyt3JE0bWIclhsHgLn YthS6mMiXTusSzRIcPMESb+ZAIkyCTPt6+2BxDNimgFX42Xt7abvNinknaUk
uJYKr7tgOzVfS00IesVA/jou1t8FTjM14b9YGvHPtBDq00Jm/cD9iGtP2OM6RnhLgy+MUr 3NPiuWutsEcUGELfOwkMvKQ6Igsg6eqae4c0dZlg==</CipherValue>

Similarly, we can encrypt connectionStrings information using DataProtectionConfigurationProvider model. Use the same above method and replace parameter for ProtectSection method with DataProtectionConfigurationProvider as shown below.


<connectionStrings configProtectionProvider=”DataProtectionConfigurationProvider”>
<CipherValue>AQAAANCMnd8BFdERjHoAwE/Cl+sBAAAAcHu0TgBbIEyfG1RWWqIDSgQAAAACAAAAAAADZg AAqAAAABAAAACSAX+UlFBbL2xUT1mYruSgAAAAAASAAACgAAAAEAAAAODHdp8b3SFHl8S6 yVQ/Ydu4AQAAitMpkAI8SjZc349E63yEAV/mVQzOv29H2mXvz2j+2kg8FTGYV95xySZrUH ICx/i5hBq//iQNc1v/Jp0xLxJf6+K/nSQwJTnGWBn3555HJHKU8yAeQCN9Iw/6YWs/q6oV GpPwMmoSe6jS+5bHzThxQrpUqxVXB4aHKeVnAfjcdj5bIBKe9jaZ0kP31UVlB9TB5z+94G a6LNWuWWcZf/iAfrZ/EZMkEcGJE20Reb3XSm/e+LN1di2YyRxXVYV+b6MDTi7DgHC7ilZs g+/81jCn2UtW4k74wKDXrTjAS3LgWxBdFEUPnwSKbKF+/DF24MVECZ6t7oyxoPH7OqaxR/ IDnPLxHAqtd8eT9VKmzouULpQBwrO6echS1MJL8zmvCNMsLz1JnyBlwxYvst8tQs+5MCIn dQ1K9615hLiwP/JIUy9T3Hk1pCn37m8tEV+meRguS1yIOXMQ3nsPUI5d1C+Nt4068EecEk uoWujCEUHu9JcpZa2KVsnSYLix5MOEvqGPtbSMmTt7TE7leicEpEn6Hm3LWYQE2N85Skpt x5AN/Pfuwl42fMzzs07ZhRFtLDwku/a2/ZQahHIUAAAAdOITPi1vY6agWisqaA6+H/qOoc s=</CipherValue>
<compilation debug=”true”/>
<authentication mode=”Windows”/>
<pages theme=”Theme1″ />

Encrypted Connection String using DataProtectionConfigurationProvider

You can in the similar way decrypt connection strings information using below method.

public void DecryptConnString()
Configuration config =WebConfigurationManager.OpenWebConfiguration(Request.ApplicationPath);
ConfigurationSection section = config.GetSection(“connectionStrings”);
if (section.SectionInformation.IsProtected)

Remember, we cannot encrypt all sections of web.config file using this above programmatic approach. There are few sections which need some additional steps before we can encrypt them with above approach.

  • <processModel>
  • <runtime>
  • <mscorlib>
  • <startup>
  • <system.runtime.remoting>
  • <configProtectedData>
  • <satelliteassemblies>
  • <cryptographySettings>
  • <cryptoNameMapping>
  • <cryptoClasses>

In order to encrypt these configuration sections you must encrypt the value and store it in the registry. There’s an aspnet_setreg.exe command-line tool to help along with this process.

Encryption/Decryption using aspnet_regiis.exe command line tool

You can also encrypt and decrypt sections in the Web.config file using the aspnet_regiis.exe command-line tool, which can be found in the <WINDOWSDIR>\Microsoft.Net\Framework\version directory. To encrypt a section of the Web.config using the DPAPI machine key with this command-line tool, use following command.

aspnet_regiis.exe -pe “connectionStrings” -app “/YourWebSiteName” –prov “DataProtectionConfigurationProvider”

To decrypt connectionStrings section using this tool, you can specify following command in aspnet_iisreg.exe tool.

aspnet_regiis.exe -pd “connectionStrings” -app “/YouWebSiteName”

Even though, ASP.NET is configured to reject all HTTP requests for resources with .config extension, but, if the malicious user gains access to web server’s file system then sensitive information in configuration file will be disclosed. Fortunately, ASP.NET 2.0 mitigates this problem by introducing encryption schemes for configuration files. You can either encrypt/decrypt configuration files including Web.config and Machine.config either programmatically or using aspnet_regiis.exe tool.





Encrypting and Decrypting a C# string

The .NET C# library provides all the basic elements for encrypting a string with a passphrase and decrypting it later. Doing this however requires a few steps in between. This post show a simple set of routines to help you do just that. We use the TripleDES encryption suite to do the actual encryption, with a little help from the MD5 hash sum generator.

The complete source code is listed below, but lets have a little look at how it works first.


The problem

I want to take a string, and then encrypt it using a password. The result should be a Base64 encoded string that I can store somewhere relatively safe.

01.// The message to encrypt.
02.string Msg = "This world is round, not flat, don't believe them!";
03.string Password = "secret";
05.string EncryptedString = EncryptString(Msg, Password);
06.string DecryptedString = DecryptString(EncryptedString, Password);
08.Console.WriteLine("Message: {0}",Msg);
09.Console.WriteLine("Password: {0}",Password);
10.Console.WriteLine("Encrypted string: {0}",EncryptedString);
11.Console.WriteLine("Decrypted string: {0}",DecryptedString);

In the EncryptString function we apply the TripleDES algorithm with a 128 bit key. But first we need to turn the above passphrase (’secret’) into a 128 bit key. One useful coincidence is that the MD5 hash algorithm accepts a set of bytes of any length and turns them into a 128 bit hash. So by running the password through the MD5 hashing algorithm we create our key.

1.// Step 1. We hash the passphrase using MD5
2.// We use the MD5 hash generator as the result is a 128 bit byte array
3.// which is a valid length for the TripleDES encoder we use below
5.MD5CryptoServiceProvider HashProvider = new MD5CryptoServiceProvider();
6.byte[] TDESKey = HashProvider.ComputeHash(UTF8.GetBytes(Passphrase));

The TripleDES algorithm itself turns a byte array into an encrypted byte array. So we first need to convert our C# message string (which is Unicode encoded) into a byte array through the System.Text.UTF8Encoding encoder.

The key is used to initialize the TripleDES algorithm. In addition we need to specify that we will only encode something once (CipherMode.ECB) and because its unlikely that our source string fits into a single TripleDES block we need to specify how we want to pad any remaining bytes (PaddingMode.PKCS7).

1.// Step 2. Create a new TripleDESCryptoServiceProvider object
2.TripleDESCryptoServiceProvider TDESAlgorithm = new TripleDESCryptoServiceProvider();
4.// Step 3. Setup the encoder
5.TDESAlgorithm.Key = TDESKey;
6.TDESAlgorithm.Mode = CipherMode.ECB;
7.TDESAlgorithm.Padding = PaddingMode.PKCS7;

The encrypted byte array is finally converted into a Base64 encoded string for easy storage. The DecryptString function is very similar to the encryption function, except that it turns the Base64 encoded encrypted message back into the original UTF8 string.

Drawbacks to the above method

To keep the code above straightforward we made use of the fact that an MD5 hash is exactly 128 bits in length. The C# TripleDES code accepts three possible key lengths: 64 bit, 128 bit and 192 bit. Only 192 bit keys are truly TripleDES, the 128 bit key length we obtain from the MD5 hash is only sufficient for Double DES. According to Wikipedia, that would make its real key strength only equivalent to 80 bits.

The Source code

001.using System;
002.using System.Text;
003.using System.Security.Cryptography;
005.namespace EncryptStringSample
007.class MainClass
010.public static string EncryptString(string Message, string Passphrase)
012.byte[] Results;
013.System.Text.UTF8Encoding UTF8 = new System.Text.UTF8Encoding();
015.// Step 1. We hash the passphrase using MD5
016.// We use the MD5 hash generator as the result is a 128 bit byte array
017.// which is a valid length for the TripleDES encoder we use below
019.MD5CryptoServiceProvider HashProvider = new MD5CryptoServiceProvider();
020.byte[] TDESKey = HashProvider.ComputeHash(UTF8.GetBytes(Passphrase));
022.// Step 2. Create a new TripleDESCryptoServiceProvider object
023.TripleDESCryptoServiceProvider TDESAlgorithm = new TripleDESCryptoServiceProvider();
025.// Step 3. Setup the encoder
026.TDESAlgorithm.Key = TDESKey;
027.TDESAlgorithm.Mode = CipherMode.ECB;
028.TDESAlgorithm.Padding = PaddingMode.PKCS7;
030.// Step 4. Convert the input string to a byte[]
031.byte[] DataToEncrypt = UTF8.GetBytes(Message);
033.// Step 5. Attempt to encrypt the string
036.ICryptoTransform Encryptor = TDESAlgorithm.CreateEncryptor();
037.Results = Encryptor.TransformFinalBlock(DataToEncrypt, 0, DataToEncrypt.Length);
041.// Clear the TripleDes and Hashprovider services of any sensitive information
046.// Step 6. Return the encrypted string as a base64 encoded string
047.return Convert.ToBase64String(Results);
050.public static string DecryptString(string Message, string Passphrase)
052.byte[] Results;
053.System.Text.UTF8Encoding UTF8 = new System.Text.UTF8Encoding();
055.// Step 1. We hash the passphrase using MD5
056.// We use the MD5 hash generator as the result is a 128 bit byte array
057.// which is a valid length for the TripleDES encoder we use below
059.MD5CryptoServiceProvider HashProvider = new MD5CryptoServiceProvider();
060.byte[] TDESKey = HashProvider.ComputeHash(UTF8.GetBytes(Passphrase));
062.// Step 2. Create a new TripleDESCryptoServiceProvider object
063.TripleDESCryptoServiceProvider TDESAlgorithm = new TripleDESCryptoServiceProvider();
065.// Step 3. Setup the decoder
066.TDESAlgorithm.Key = TDESKey;
067.TDESAlgorithm.Mode = CipherMode.ECB;
068.TDESAlgorithm.Padding = PaddingMode.PKCS7;
070.// Step 4. Convert the input string to a byte[]
071.byte[] DataToDecrypt = Convert.FromBase64String(Message);
073.// Step 5. Attempt to decrypt the string
076.ICryptoTransform Decryptor = TDESAlgorithm.CreateDecryptor();
077.Results = Decryptor.TransformFinalBlock(DataToDecrypt, 0, DataToDecrypt.Length);
081.// Clear the TripleDes and Hashprovider services of any sensitive information
086.// Step 6. Return the decrypted string in UTF8 format
087.return UTF8.GetString( Results );
090.public static void Main(string[] args)
092.// The message to encrypt.
093.string Msg = "This world is round, not flat, don't believe them!";
094.string Password = "secret";
096.string EncryptedString = EncryptString(Msg, Password);
097.string DecryptedString = DecryptString(EncryptedString, Password);
099.Console.WriteLine("Message: {0}",Msg);
100.Console.WriteLine("Password: {0}",Password);
101.Console.WriteLine("Encrypted string: {0}",EncryptedString);
102.Console.WriteLine("Decrypted string: {0}",DecryptedString);


ASP.NET MVC: Using Ajax, Json and PartialViews

While working on a new ASP.NET MVC project, I had a simple objective: add a new record and refresh my View. After sifting through several sites I found several resources that lead me to accomplish my goal.

I’ve compiled my result into a new sample MVC Application that I created in Visual Studio that you can download here. I’ll explain what I did using that as my reference. It’s a trimmed down version of what I did on the actual project, but it will get the point across.

Let’s assume we want to have a View that lists some People from our data source. I started out by creating a Person data model:

public class Person
  public Guid Id { get; set; }
  public String FirstName { get; set; }
  public String LastName { get; set; }

  public Person()
    Id = Guid.NewGuid();

Next, I created some ViewModels so that I can work with strongly typed Views:

public class PersonIndexViewModel
    public PersonListViewModel PersonListModel { get; set; }

    public AddPersonViewModel AddPersonModel { get; set; }

  public class PersonListViewModel
    public List PersonList { get; set; }

  public class AddPersonViewModel
    public String FirstName { get; set; }
    public String LastName { get; set; }

Next, I added a People folder in my Views folder and created a strongly typed Index View on my PersonIndexViewModel. I started out with building a table and doing a foreach to display each Person object. I moved that into a PartialView (.ascx) by creating a ParitialView in my Views/Shared folder (This blog post is very helpful for showing you how to use PartialViews). I called that PersonList.ascx and that is a strongly typed partial view on my PersonListViewModel.

Now, I can update my View to display that PartialView with this code:

<% Html.RenderPartial("PersonList", Model.PersonListModel); %>

Next, I want to be able to perform a delete action to remove a Person from the DB. You’ll notice I’m using an Ajax.ActionLink in my PersonList PartialView so that I can perform the delete with Ajax.

<%= Ajax.ActionLink("delete", "JsonDelete", "People",
new { Id = person.Id },
new AjaxOptions { Confirm = "Are you sure you want to Delete this Person? This action cannot be undone.",
HttpMethod = "Delete",
OnComplete = "JsonDelete_OnComplete" })%>

In the ActionLink, I specify the Action I want to call, pass the Person.Id and in the AjaxOptions I defined a JavaScript method that should be called on complete. In my People Controller I can now add the JsonDelete method:

public JsonResult JsonDelete(Guid Id)
  // call your Repository to delete the Person
  bool result = _personList.Remove(toDelete);

  // return a Json Object, you could define a new class
  return Json(new
    Success = result,
    Message = result ? "The person has been deleted!" : "Error!"

You would call your Repository to delete that Person and then return a new Json Object. What I did was define a couple of properties that I will reference from the JavaScript function to give feedback to the user. Here is the JavaScript function:

function JsonDelete_OnComplete(context) {

  var JsonDelete = context.get_response().get_object();

  if (JsonDelete.Success) {


I found this link that showed me how to use “context.get_response().get_object();” to get the Json Object in JavaScript.

Now that I can delete, the next logical step would be the ability to add a new Person. I’ll start out by creating a new form that uses my AddPersonViewModel Model:

<% using (Ajax.BeginForm("JsonAdd", "People", new AjaxOptions { OnComplete = "JsonAdd_OnComplete" }))
  <legend>Add a Person</legend>
  <%= Html.LabelFor(model => model.AddPersonModel.FirstName)%>:
  <%= Html.TextBoxFor(model => model.AddPersonModel.FirstName, new { @class = "firstname" })%>
  <%= Html.ValidationMessageFor(model => model.AddPersonModel.FirstName)%>

  <%= Html.LabelFor(model => model.AddPersonModel.LastName)%>:
  <%= Html.TextBoxFor(model => model.AddPersonModel.LastName, new { @class = "lastname" })%>
  <%= Html.ValidationMessageFor(model => model.AddPersonModel.LastName)%>

  <input id="AddBtn" name="AddBtn" type="submit" value="Add" />
<% } %>

Again, I use the Ajax.BeginForm to set the Action to call and define a JavaScript function to call on complete. To my Controller I add:

public JsonResult JsonAdd(AddPersonViewModel AddPersonModel)

  Person newPerson = new Person
    FirstName = AddPersonModel.FirstName,
    LastName = AddPersonModel.LastName

  // call your Repository to add the new Person

  // return a Json Object, you could define a new class
  return Json(new
    Success = true,
    Message = "The person has been added!",
    PartialViewHtml = RenderPartialViewToString("PersonList", new PersonListViewModel {PersonList = _personList})

One important thing here is the method “RenderPartialViewToString”. I ran across this which was a tremendous resource in solving my problem here, which was returning a Json Object with a rendered PartialView so that I could use JavaScript/jQuery to update the page.

The post I referenced above showed where you needed to create a base Controller to inherit from and that Controller defines the methods which will return a PartialView as an HTML string:

public abstract class BaseController : Controller
    protected string RenderPartialViewToString()
      return RenderPartialViewToString(null, null);

    protected string RenderPartialViewToString(string viewName)
      return RenderPartialViewToString(viewName, null);

    protected string RenderPartialViewToString(object model)
      return RenderPartialViewToString(null, model);

    protected string RenderPartialViewToString(string viewName, object model)
      if (string.IsNullOrEmpty(viewName))
        viewName = ControllerContext.RouteData.GetRequiredString("action");

      ViewData.Model = model;

      using (StringWriter sw = new StringWriter())
        ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
        ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
        viewResult.View.Render(viewContext, sw);

        return sw.GetStringBuilder().ToString();

Now with my JavaScript function is called, I can again reference my Json Object and then update the page:

function JsonAdd_OnComplete(context) {

  var JsonAdd = context.get_response().get_object();

  if (JsonAdd.Success) {


With this line:


I have a div tag that surrounds my Html.RenderPartial call and I can use jQuery to just replace the HTML. Remember JsonAdd.PartialViewHtml contains the entire HTML of the newly rendered PartialView that we called from the Controller:

return Json(new
  Success = true,
  Message = "The person has been added!",
  PartialViewHtml = RenderPartialViewToString("PersonList", new PersonListViewModel {PersonList = _personList})

That just about sums it up how to use Ajax, jQuery, Json, and PartialViews in an effective manor in an ASP.NET MVC application.