Suggested Videos
Part 10 - Custom method names in ASP.NET Web API
Part 11 - ASP.NET Web API query string parameters
Part 12 - FromBody and FromUri in Web API
In this video we will discuss how to call ASP.NET Web API Service using jQuery.
When "Get All Employees" button is clicked we want to retrieve all the employees and display their fullname in unordered list. When "Clear" button is clicked we want to clear the employees from the list.
In our case both the client (i.e the HTML page that contains the ajax code) and the asp.net web api service are in the same project so it worked without any problem. If they are present in different projects then this wouldn't work.
In our next video we will discuss
Part 10 - Custom method names in ASP.NET Web API
Part 11 - ASP.NET Web API query string parameters
Part 12 - FromBody and FromUri in Web API
In this video we will discuss how to call ASP.NET Web API Service using jQuery.
When "Get All Employees" button is clicked we want to retrieve all the employees and display their fullname in unordered list. When "Clear" button is clicked we want to clear the employees from the list.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var
ulEmployees = $('#ulEmployees');
$('#btn').click(function
() {
$.ajax({
type: 'GET',
url: "api/employees/",
dataType: 'json',
success: function (data) {
ulEmployees.empty();
$.each(data, function (index, val) {
var fullName = val.FirstName + ' ' + val.LastName;
ulEmployees.append('<li>' + fullName + '</li>');
});
}
});
});
$('#btnClear').click(function () {
ulEmployees.empty();
});
});
</script>
</head>
<body>
<div>
<input id="btn" type="button" value="Get All Employees" />
<input id="btnClear" type="button" value="Clear" />
<ul id="ulEmployees" />
</div>
</body>
</html>
In our case both the client (i.e the HTML page that contains the ajax code) and the asp.net web api service are in the same project so it worked without any problem. If they are present in different projects then this wouldn't work.
In our next video we will discuss
- Why the AJAX call wouldn't work if the client and service are in different projects
- How to make it work
Hii Sir You are not using any method while calling webapi how its mapping which method call. ???
ReplyDeleteHe is calling Web Api method api/Employee using GET. That means It will invoke HTTPGet Employee Action method.
DeletejQuery get method is being used to to call the webapi
ReplyDeleteIn web api http verb get is mapped to a method in specified controller that has the name get and in this way you need not to specify the function in ajax calling
ReplyDeleteHi sir, when i use same method in jquery am getting undefined value instead of employees detais.
ReplyDeletewhat's problem for this please let me know sir.
if you have added new CamelCasePropertyNamesContractResolver() as ContractResolver use firstName and lastName
DeleteAm not getting the required data when i click the GetallEmployee button is there any ajax is not working???
ReplyDeleteIt works fine for me. Error has not come. Thanks Kudvenkat Sir.
DeleteYou check your jquery code. Are you placed # symbol inside $('#btn') and $('#btnClear') ?
I was getting "undefined value" as well but that issue was resolved after commenting "config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();" in WebApiConfig.cs file under App_Start folder.
ReplyDeleteYes Ajax call doesn't happen at all. Neither success nor error. Can you please help out.
ReplyDeleteSir,If i click GetEmployees btn it shows nothing
ReplyDeletemake sure to add jquery source
DeleteSir, Why should we use Index (line 17) as a parameter within function?
ReplyDeleteintellisense on the index says: "index is declared but its value is never read."
With THANKS
You must follow previous videos of this tutorial to work this program well.
ReplyDeletechanging commented line to un-commented code in the employee controller fixed the issue.
ReplyDeletecase "all":
return Request.CreateResponse(entities.Employees1.ToList());
//return Request.CreateResponse(HttpStatusCode.OK, entities.Employees1.ToList());
can anyone explain the url " url: "api/employees/"," i am confusing where we get this url and how ????
ReplyDelete