Calling Local ASMX SERVICE using
JQUERY:
1)
First Creating Local Web service:
Add
a new Asmx template say MyService.asmx, Now add a service reference tohttp://www.webservicex.net/CurrencyConvertor.asmx.Which
is used to get conversion
rate
from one currency to Other say from USD to INR.
Change C# Part of Asmx with following
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
[System.ComponentModel.ToolboxItem(false)]
public
class MyService
: System.Web.Services.WebService {
public MyService () {
//Uncomment the following line if using
designed components
//InitializeComponent();
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string
GetConvertionRate(string from, string to)
{
ProxyCurrencyConvertor.CurrencyConvertorSoapClient
client = new ProxyCurrencyConvertor.CurrencyConvertorSoapClient();
ProxyCurrencyConvertor.Currency
frmEnum = (ProxyCurrencyConvertor.Currency) Enum.Parse(typeof(ProxyCurrencyConvertor.Currency), from);
ProxyCurrencyConvertor.Currency
toEnum = (ProxyCurrencyConvertor.Currency) Enum.Parse(typeof(ProxyCurrencyConvertor.Currency), to);
ConversionObject obj = new ConversionObject();
obj.FROM = from;
obj.TO = to;
obj.ConversionRate = client.ConversionRate(frmEnum, toEnum);
System.Web.Script.Serialization.JavaScriptSerializer
Serializer = new JavaScriptSerializer();
return Serializer.Serialize(obj);
}
}
public
class ConversionObject
{
public string
FROM
{
get;
set;
}
public string
TO
{
get;
set;
}
public double
ConversionRate
{
get;
set;
}
}
2)
Creating ASPX Page to use aspx
Create
a aspx page in which add
Textboxes
1)
TxtFrom
2)
TxtTo
3)
TxtResult
Button
1) BtnGetTheResult
Change it’s onclient click property as
OnClientClick="return GetMeResultByAjax()"
4)
Calling ASMX service using JQUERY
& Displaying response in aspx
Add script tag to head of our aspx page
<script type="text/javascript">
function GetMeResultByAjax(){
var
frm = $('#TxtFrom').val();
var
to = $('#TxtTo').val();
var
data_to_post = "{from:'" + frm + "',to:'" + to + "'}";
$.ajax({
type: "POST",
url: "MyService.asmx/GetConvertionRate",
data: data_to_post,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: processSuccess,
error: processError
});
return
false;
}
function
processSuccess(data, status, req) {
var
req_text = '';
var
req_value = ''
if
(status == "success") {
json_object =
JSON.parse(req.responseText);
$.each(json_object, function (key, element) {
if (key == 'd') {
req_text = element;
req_value =
JSON.parse(req_text).ConversionRate
}
});
$("#TxtResult").val(req_value);
}
}
function
processError(data, status, req) {
alert("Failure:" + req.responseText + " " + status);
}
</script>
Explanation:
On JavaScript onclick event of button “BtnGetTheResult” method “GetMeResultByAjax” get called Here in
method
a) data to be posted is created as JSON string
b) $.ajax is jquery api to do ajax
c) In $.ajax we are sending data as json string
d) If ajax call succeed function “processSuccess”
in which we are extracting required output.
Screenshot:
