Wednesday, October 30, 2013

How to Consume Web API in JQUERY ajax

How to Consume Web API in JQUERY ajax


1) Create a HTML Page/ASPX Page etc.,

2) Add following input elements and 4 buttons for POST,DELETE,PUT,GET

3) Div Element to display all results   


        <b>Id:</b><input type="text" value="" id="txtId" /><br />
        <b>cusomer Name:</b><input type="text" value="" id="txtName" /><br />
        <b>Date Joined:</b><input type="date" value="" id="doj" /><br />
        <b>EmailID:</b><input type="email" value="" id="txtEmail" /><br />
        <b>Mobile:</b><input type="text" value="" id="txtMobile" /><br />
       
        <input type="button" value="POST" onclick="javascript: CustomerWebApi('POST')" />&nbsp;&nbsp;
        <input type="button" value="PUT" onclick="javascript: CustomerWebApi('PUT')" />&nbsp;&nbsp;
        <input type="button" value="DELETE" onclick="javascript: CustomerWebApi('DELETE')" />&nbsp;&nbsp;
        <input type="button" value="GET" onclick="javascript: CustomerWebApi('GET')" />&nbsp;&nbsp;
        <br />
        <div id="cusomersTbl"></div>

4) Add JQUERY Ajax function to do CRUD operations on Web API


        <script type="text/javascript">
            function CustomerWebApi(verb) {
                var customerJson = getmyjson(verb);
                alert(customerJson+getUrl(verb));
                var rquest=$.ajax({
                    type: verb,
                    url: getUrl(verb),
                    async: true,
                    data: getmyjson(verb),
                    dataType:"json"
                });

                rquest.done(function(customer)
                {
                    alert(customer);
                    DisplayData(customer);
                });

                rquest.fail(function (jqXHR, textStatus) {
                    alert(textStatus+jqXHR.statusCode);
                });
            }

            function getUrl(verb) {
                var URL="http://localhost:42340/api/customer";
                if (verb == "DELETE" || verb == "PUT") URL = URL + "/" + document.getElementById("txtId").value;
                return URL;
            }

            function getmyjson(verb) {
                var jsonCustomer="";
                if (verb == "POST" || verb == "PUT") {

                    var isoDate = new Date($("#doj").val()).toISOString();
                    var customer = {
                        custId: $("#txtId").val(),
                        Name: $("#txtName").val(),
                        DOJ:isoDate,
                        szEmailID:$("#txtEmail").val(),
                        Mobile:$("#txtMobile").val()
                    }
                    return customer;
                }
                else if (verb == "GET" || verb == "DELETE");

                return jsonCustomer;
            }

            function DisplayData(customers) {
                var divE = document.getElementById("cusomersTbl");
                for (i = 0; i < customers.length; i++) {
                    divE.innerHTML += customers[i].custId + " " + customers[i].Name + "<br/>";
                }

            }

        </script>


Here is the Output