Consume RESTful Service using jQuery

Posted by Mandlaa under WCF on 3/30/2015 | Points: 10 | Views : 490 | Status : [Member] | Replies : 1
I am developed one WCFrestfull its showing correct result,
But I want to consume using JQuery but its not working,
This is the code i am writing for consume the service using JQuery
Plz correct my code where is mistake?


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ConsumeWCF_RES.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function () {
$('#tbDetails').hide();

$('#btnGetAllEmployee').click(function () {
$.ajax({
type: "GET",
url: "http://localhost:46465/Service.svc/GetAllEmployee",
contentType: 'json',
dataType: 'json',
success: function (data) {
$.each(data, function (key, value) {
var jsonData = JSON.stringify(value);
var objData = $.parseJSON(jsonData);

var EmpNo = objData.EmpNo;
var EmpName = objData.EmpName;
var DeptNo = objData.DeptNo;
var Salary = objData.Salary;

$('<tr><td>' + EmpNo + '</td><td>' + EmpName + '</td><td>' + DeptNo + '</td><td>' + Salary + '</td><td>').appendTo('#tbDetails');
});
$('#tbDetails').show();
},
error: function (xhr) {
alert(xhr.responseText);
}
});

});

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btnGetAllEmployee" value="Get All Employee" />

<table id="tbDetails" cellpadding="5" cellspacing="5" style="border: solid 5px red;">
<thead style="background-color: skyblue; color: White; font-weight: bold">
<tr style="border: solid 1px #000000">
<td width="15%">EmpNo</td>
<td width="15%">EmpName</td>
<td width="15%">DeptNo</td>
<td>Salary</td>
</tr>
</thead>
<tbody>
</tbody>
</table>

</div>
</form>
</body>
</html>





Responses

Posted by: Rajnilari2015 on: 3/30/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 25

Up
0
Down
Hi, sometimes back I have written a step by step tutorial on "CRUD Operation using Web API and MVC4". It is available in dotnetfunda. You can find it here http://www.dotnetfunda.com/articles/show/2340/crud-operation-using-web-api-and-mvc4.

It has the sample code attached and the JQuery Ajax for performing the CRUD. That should help you. However, here is the code for

GET (All the records

$.ajax({

url: 'http://localhost:41207/api/employee',
type: 'GET',
dataType: 'json',
success: function (data) {
WriteResponses(data);
},
error: function (x, y, z) {
alert(x + '\n' + y + '\n' + z);
}
});


GET (for single records)

function GetSingleEmployee() {

jQuery.support.cors = true;
var empId = $('#txtSingleEmployeeId').val();

$.ajax({
url: 'http://localhost:41207/api/employee/' + empId,
type: 'GET',
dataType: 'json',
success: function (data) {
WriteResponseForSingleEmployee(data);
},
error: function (x, y, z) {
alert('The Employee not found in the List for the given ID');
}
});


POST

function AddEmployee() {

var employee = {
id: $('#txtEmployeeId').val(),
name: $('#txtEmployeeName').val(),
gender: $('#optGender').val(),
age: $('#txtEmployeeAge').val(),
salary: $('#txtEmployeeSalary').val()
};

$.ajax({
url: 'http://localhost:41207/api/employee/',
type: 'POST',
data: JSON.stringify(employee),
contentType: "application/json;charset=utf-8",
success: function (data) {
alert('Employee added Successfully');
GetAllEmployees();
},
error: function () {
alert('Employee not Added');
}
});
}



For PUT

function UpdateEmployee() {

var employee = {
id: $('#txtEmployeeId').val(),
name: $('#txtEmployeeName').val(),
gender: $('#optGender').val(),
age: $('#txtEmployeeAge').val(),
salary: $('#txtEmployeeSalary').val()
};

$.ajax({
url: 'http://localhost:41207/api/employee/' + $('#txtEmployeeId').val(),
type: 'PUT',
data: JSON.stringify(employee),
contentType: "application/json;charset=utf-8",
success: function (data) {
alert('Employee updated Successfully');
GetAllEmployees();
},
error: function () {
alert('Employee could not be updated');
}
});
}


For DELETE

function DeleteEmployee() {


jQuery.support.cors = true;
var id = $('#txtEmpId').val()

$.ajax({
url: 'http://localhost:41207/api/employee/' + id,
type: 'DELETE',
contentType: "application/json;charset=utf-8",
success: function (data) {
WriteResponsesForAllEmployees(data);
},
error: function (x, y, z) {
alert(x + '\n' + y + '\n' + z);
}
});
}

 Download source file

--
Thanks & Regards,
RNA Team

Mandlaa, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response