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.
Call ASP.NET Web API from jQuery
(追記) (追記ここまで)
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.
Call ASP.NET Web API from jQuery
(追記) (追記ここまで)
<!DOCTYPEhtml>
<html>
<head>
<title></title>
<metacharset="utf-8"/>
<scriptsrc="Scripts/jquery-1.10.2.js"></script>
<scripttype="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>
<inputid="btn"type="button"value="Get All Employees"/>
<inputid="btnClear"type="button"value="Clear"/>
<ulid="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
16 comments:
Hii Sir You are not using any method while calling webapi how its mapping which method call. ???
Reply DeleteHe 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
Reply DeleteIn 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
Reply DeleteHi sir, when i use same method in jquery am getting undefined value instead of employees detais.
Reply Deletewhat'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???
Reply DeleteIt 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.
Reply DeleteYes Ajax call doesn't happen at all. Neither success nor error. Can you please help out.
Reply DeleteSir,If i click GetEmployees btn it shows nothing
Reply Deletemake sure to add jquery source
DeleteSir, Why should we use Index (line 17) as a parameter within function?
Reply Deleteintellisense 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.
Reply Deletechanging commented line to un-commented code in the employee controller fixed the issue.
Reply Deletecase "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 ????
Reply DeleteIt would be great if you can help share these free resources
[フレーム]