Building an AJAX currency converter with ASP.NET, jQuery and Google

In this tutorial we will explain how to use Google calculator feature built in their search engine, which can be used to convert currencies.
Create new web site in Visual Studio. In Default.aspx page we need to jQuery library (you can download it from jquery.com), so add:

1	<script src="jquery-1.6.2.min.js" type="text/javascript">script>

Add to page body the following html code:

1	<div style="overflow:hidden; padding:10px; width:700px; margin:10px; background:#EAEAFF; border:solid 1px #ccc;">

2	<div style="padding: 2px; margin: 2px; float: left;">

3

Amount:

4	<input id="a" maxlength="12" size="5" value="1" />

5

div>

6	<div style="padding: 2px; margin: 2px; float: left;">

7

From:

8	<select id="from">

9	<option value="AED">United Arab Emirates Dirham (AED)option>

10	<option value="ANG">Netherlands Antillean Guilder (ANG)option>

11	<option value="ARS">Argentine Peso (ARS)option>

12	<option value="AUD">Australian Dollar (AUD)option>

13	<option value="BDT">Bangladeshi Taka (BDT)option>

14	<option value="BGN">Bulgarian Lev (BGN)option>

15	<option value="BHD">Bahraini Dinar (BHD)option>

16	<option value="BND">Brunei Dollar (BND)option>

17	<option value="BOB">Bolivian Boliviano (BOB)option>

18	<option value="BRL">Brazilian Real (BRL)option>

19	<option value="BWP">Botswanan Pula (BWP)option>

20	<option value="CAD">Canadian Dollar (CAD)option>

21	<option value="CHF">Swiss Franc (CHF)option>

22	<option value="CLP">Chilean Peso (CLP)option>

23	<option value="CNY">Chinese Yuan (CNY)option>

24	<option value="COP">Colombian Peso (COP)option>

25	<option value="CRC">Costa Rican Colón (CRC)option>

26	<option value="CZK">Czech Republic Koruna (CZK)option>

27	<option value="DKK">Danish Krone (DKK)option>

28	<option value="DOP">Dominican Peso (DOP)option>

29	<option value="DZD">Algerian Dinar (DZD)option>

30	<option value="EEK">Estonian Kroon (EEK)option>

31	<option value="EGP">Egyptian Pound (EGP)option>

32	<option value="EUR">Euro (EUR)option>

33	<option value="FJD">Fijian Dollar (FJD)option>

34	<option value="GBP">British Pound Sterling (GBP)option>

35	<option value="HKD">Hong Kong Dollar (HKD)option>

36	<option value="HNL">Honduran Lempira (HNL)option>

37	<option value="HRK">Croatian Kuna (HRK)option>

38	<option value="HUF">Hungarian Forint (HUF)option>

39	<option value="IDR">Indonesian Rupiah (IDR)option>

40	<option value="ILS">Israeli New Sheqel (ILS)option>

41	<option value="INR">Indian Rupee (INR)option>

42	<option value="JMD">Jamaican Dollar (JMD)option>

43	<option value="JOD">Jordanian Dinar (JOD)option>

44	<option value="JPY">Japanese Yen (JPY)option>

45	<option value="KES">Kenyan Shilling (KES)option>

46	<option value="KRW">South Korean Won (KRW)option>

47	<option value="KWD">Kuwaiti Dinar (KWD)option>

48	<option value="KYD">Cayman Islands Dollar (KYD)option>

49	<option value="KZT">Kazakhstani Tenge (KZT)option>

50	<option value="LBP">Lebanese Pound (LBP)option>

51	<option value="LKR">Sri Lankan Rupee (LKR)option>

52	<option value="LTL">Lithuanian Litas (LTL)option>

53	<option value="LVL">Latvian Lats (LVL)option>

54	<option value="MAD">Moroccan Dirham (MAD)option>

55	<option value="MDL">Moldovan Leu (MDL)option>

56	<option value="MKD">Macedonian Denar (MKD)option>

57	<option value="MUR">Mauritian Rupee (MUR)option>

58	<option value="MVR">Maldivian Rufiyaa (MVR)option>

59	<option value="MXN">Mexican Peso (MXN)option>

60	<option value="MYR">Malaysian Ringgit (MYR)option>

61	<option value="NAD">Namibian Dollar (NAD)option>

62	<option value="NGN">Nigerian Naira (NGN)option>

63	<option value="NIO">Nicaraguan Córdoba (NIO)option>

64	<option value="NOK">Norwegian Krone (NOK)option>

65	<option value="NPR">Nepalese Rupee (NPR)option>

66	<option value="NZD">New Zealand Dollar (NZD)option>

67	<option value="OMR">Omani Rial (OMR)option>

68	<option value="PEN">Peruvian Nuevo Sol (PEN)option>

69	<option value="PGK">Papua New Guinean Kina (PGK)option>

70	<option value="PHP">Philippine Peso (PHP)option>

71	<option value="PKR">Pakistani Rupee (PKR)option>

72	<option value="PLN">Polish Zloty (PLN)option>

73	<option value="PYG">Paraguayan Guarani (PYG)option>

74	<option value="QAR">Qatari Rial (QAR)option>

75	<option value="RON">Romanian Leu (RON)option>

76	<option value="RSD">Serbian Dinar (RSD)option>

77	<option value="RUB">Russian Ruble (RUB)option>

78	<option value="SAR">Saudi Riyal (SAR)option>

79	<option value="SCR">Seychellois Rupee (SCR)option>

80	<option value="SEK">Swedish Krona (SEK)option>

81	<option value="SGD">Singapore Dollar (SGD)option>

82	<option value="SKK">Slovak Koruna (SKK)option>

83	<option value="SLL">Sierra Leonean Leone (SLL)option>

84	<option value="SVC">Salvadoran Colón (SVC)option>

85	<option value="THB">Thai Baht (THB)option>

86	<option value="TND">Tunisian Dinar (TND)option>

87	<option value="TRY">Turkish Lira (TRY)option>

88	<option value="TTD">Trinidad and Tobago Dollar (TTD)option>

89	<option value="TWD">New Taiwan Dollar (TWD)option>

90	<option value="TZS">Tanzanian Shilling (TZS)option>

91	<option value="UAH">Ukrainian Hryvnia (UAH)option>

92	<option value="UGX">Ugandan Shilling (UGX)option>

93	<option value="USD">US Dollar (USD)option>

94	<option value="UYU">Uruguayan Peso (UYU)option>

95	<option value="UZS">Uzbekistan Som (UZS)option>

96	<option value="VEF">Venezuelan Bolívar (VEF)option>

97	<option value="VND">Vietnamese Dong (VND)option>

98	<option value="XOF">CFA Franc BCEAO (XOF)option>

99	<option value="YER">Yemeni Rial (YER)option>

100	<option value="ZAR">South African Rand (ZAR)option>

101	<option value="ZMK">Zambian Kwacha (ZMK)option>

102

select>

103

div>

104	<div style="padding: 2px; margin: 2px;">

105

to:

106	<select id="to">

107	<option value="AED">United Arab Emirates Dirham (AED)option>

108	<option value="ANG">Netherlands Antillean Guilder (ANG)option>

109	<option value="ARS">Argentine Peso (ARS)option>

110	<option value="AUD">Australian Dollar (AUD)option>

111	<option value="BDT">Bangladeshi Taka (BDT)option>

112	<option value="BGN">Bulgarian Lev (BGN)option>

113	<option value="BHD">Bahraini Dinar (BHD)option>

114	<option value="BND">Brunei Dollar (BND)option>

115	<option value="BOB">Bolivian Boliviano (BOB)option>

116	<option value="BRL">Brazilian Real (BRL)option>

117	<option value="BWP">Botswanan Pula (BWP)option>

118	<option value="CAD">Canadian Dollar (CAD)option>

119	<option value="CHF">Swiss Franc (CHF)option>

120	<option value="CLP">Chilean Peso (CLP)option>

121	<option value="CNY">Chinese Yuan (CNY)option>

122	<option value="COP">Colombian Peso (COP)option>

123	<option value="CRC">Costa Rican Colón (CRC)option>

124	<option value="CZK">Czech Republic Koruna (CZK)option>

125	<option value="DKK">Danish Krone (DKK)option>

126	<option value="DOP">Dominican Peso (DOP)option>

127	<option value="DZD">Algerian Dinar (DZD)option>

128	<option value="EEK">Estonian Kroon (EEK)option>

129	<option value="EGP">Egyptian Pound (EGP)option>

130	<option value="EUR">Euro (EUR)option>

131	<option value="FJD">Fijian Dollar (FJD)option>

132	<option value="GBP">British Pound Sterling (GBP)option>

133	<option value="HKD">Hong Kong Dollar (HKD)option>

134	<option value="HNL">Honduran Lempira (HNL)option>

135	<option value="HRK">Croatian Kuna (HRK)option>

136	<option value="HUF">Hungarian Forint (HUF)option>

137	<option value="IDR">Indonesian Rupiah (IDR)option>

138	<option value="ILS">Israeli New Sheqel (ILS)option>

139	<option value="INR">Indian Rupee (INR)option>

140	<option value="JMD">Jamaican Dollar (JMD)option>

141	<option value="JOD">Jordanian Dinar (JOD)option>

142	<option value="JPY">Japanese Yen (JPY)option>

143	<option value="KES">Kenyan Shilling (KES)option>

144	<option value="KRW">South Korean Won (KRW)option>

145	<option value="KWD">Kuwaiti Dinar (KWD)option>

146	<option value="KYD">Cayman Islands Dollar (KYD)option>

147	<option value="KZT">Kazakhstani Tenge (KZT)option>

148	<option value="LBP">Lebanese Pound (LBP)option>

149	<option value="LKR">Sri Lankan Rupee (LKR)option>

150	<option value="LTL">Lithuanian Litas (LTL)option>

151	<option value="LVL">Latvian Lats (LVL)option>

152	<option value="MAD">Moroccan Dirham (MAD)option>

153	<option value="MDL">Moldovan Leu (MDL)option>

154	<option value="MKD">Macedonian Denar (MKD)option>

155	<option value="MUR">Mauritian Rupee (MUR)option>

156	<option value="MVR">Maldivian Rufiyaa (MVR)option>

157	<option value="MXN">Mexican Peso (MXN)option>

158	<option value="MYR">Malaysian Ringgit (MYR)option>

159	<option value="NAD">Namibian Dollar (NAD)option>

160	<option value="NGN">Nigerian Naira (NGN)option>

161	<option value="NIO">Nicaraguan Córdoba (NIO)option>

162	<option value="NOK">Norwegian Krone (NOK)option>

163	<option value="NPR">Nepalese Rupee (NPR)option>

164	<option value="NZD">New Zealand Dollar (NZD)option>

165	<option value="OMR">Omani Rial (OMR)option>

166	<option value="PEN">Peruvian Nuevo Sol (PEN)option>

167	<option value="PGK">Papua New Guinean Kina (PGK)option>

168	<option value="PHP">Philippine Peso (PHP)option>

169	<option value="PKR">Pakistani Rupee (PKR)option>

170	<option value="PLN">Polish Zloty (PLN)option>

171	<option value="PYG">Paraguayan Guarani (PYG)option>

172	<option value="QAR">Qatari Rial (QAR)option>

173	<option value="RON">Romanian Leu (RON)option>

174	<option value="RSD">Serbian Dinar (RSD)option>

175	<option value="RUB">Russian Ruble (RUB)option>

176	<option value="SAR">Saudi Riyal (SAR)option>

177	<option value="SCR">Seychellois Rupee (SCR)option>

178	<option value="SEK">Swedish Krona (SEK)option>

179	<option value="SGD">Singapore Dollar (SGD)option>

180	<option value="SKK">Slovak Koruna (SKK)option>

181	<option value="SLL">Sierra Leonean Leone (SLL)option>

182	<option value="SVC">Salvadoran Colón (SVC)option>

183	<option value="THB">Thai Baht (THB)option>

184	<option value="TND">Tunisian Dinar (TND)option>

185	<option value="TRY">Turkish Lira (TRY)option>

186	<option value="TTD">Trinidad and Tobago Dollar (TTD)option>

187	<option value="TWD">New Taiwan Dollar (TWD)option>

188	<option value="TZS">Tanzanian Shilling (TZS)option>

189	<option value="UAH">Ukrainian Hryvnia (UAH)option>

190	<option value="UGX">Ugandan Shilling (UGX)option>

191	<option value="USD">US Dollar (USD)option>

192	<option value="UYU">Uruguayan Peso (UYU)option>

193	<option value="UZS">Uzbekistan Som (UZS)option>

194	<option value="VEF">Venezuelan Bolívar (VEF)option>

195	<option value="VND">Vietnamese Dong (VND)option>

196	<option value="XOF">CFA Franc BCEAO (XOF)option>

197	<option value="YER">Yemeni Rial (YER)option>

198	<option value="ZAR">South African Rand (ZAR)option>

199	<option value="ZMK">Zambian Kwacha (ZMK)option>

200

select>

201

div>

202

<br />

203	<div style="padding: 2px; margin: 2px; float: left;">

204	<input id="submit" type="button" value="Convert" />

205

div>

206	<div id="results" style="padding: 2px; margin: 5px;">

207

div>

208

div>

Now, we have input field to type amount and two drop downs with currencies and button to call web service function which calculate the differences of currencies and fill result in div with name “results”.
Now add jQuery code to handle button event to call web service and filling result data vie AJAX:

1	$(document).ready(function() {

2	$('#submit').click(function() {

3	var amount = $('#a').val();

4	var from = $('#from').val();

5	var to = $('#to').val();

6	var params = "http://www.google.com/finance/converter?a=" + amount + "&from=" + from + "&to=" + to;

7

8	$.ajax({ type: "POST",

9	url: "WebService.asmx/Convert",

10	data: "{amount:" + amount + ",fromCurrency:'" + from + "',toCurrency:'" + to + "'}",

11	contentType: "application/json; charset=utf-8",

12	dataType: "json",

13	success: function(data) {

14	$('#results').html(data.d);

15

}

16

});

17

});

18

});

Then, the last thing to do is create web service and declare function which take three parameter (Amount, From Currency, To Currency) and return the decimal.

view sourceprint?

1	[WebMethod]

2	public decimal Convert(decimal amount, string fromCurrency, string toCurrency)

3

{

4	WebClient web = new WebClient();

5	string url = string.Format("http://www.google.com/ig/calculator?hl=en&q={2}{0}%3D%3F{1}", fromCurrency.ToUpper(), toCurrency.ToUpper(), amount);

6	string response = web.DownloadString(url);

7	Regex regex = new Regex("rhs: \\\"(\\d*.\\d*)");

8	decimal rate = System.Convert.ToDecimal(regex.Match(response).Groups[1].Value);

9	return rate;

10

}