Sunday, December 29, 2013

Calling Local ASMX SERVICE using JQUERY:

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 to 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 = "")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyService : System.Web.Services.WebService {

    public MyService () {
        //Uncomment the following line if using designed components

    [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

    public string TO

    public double ConversionRate

2)      Creating ASPX Page to use aspx
Create a aspx page in which add
1)       TxtFrom
2)       TxtTo
3)       TxtResult

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 + "'}";

               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

            function processError(data, status, req) {
                alert("Failure:" + req.responseText + " " + status);

On JavaScript onclick event of buttonBtnGetTheResult”  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.