Search This Blog

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 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 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.
Screenshot: