11- Calling the web api method without parameter
2• If you do not have parameter in your web API method then you no need to pass the data parameter inside AJAX function.
3• The URL parameter of ajax function must match with the Route attribute of web api method.
4
5o Your web api controller action method.
6
7 [HttpGet]
8 [Route("student/Get")]
9 public IEnumerable<string> Get()
10 {
11 return new string[] { "student1", "student2" };
12 }
13
14o Your ajax function
15$('#btnBindDropDown').on('click', function () {
16 $('#btnBindDropDown').click(function () {
17 $.ajax({
18 type: 'GET',
19 url: 'student/Get',
20 contentType: 'application/json; charset=utf-8',
21 dataType: 'json',
22 success: function (data) {
23 alert('data is ' + data);
24 },
25 error: function () {
26 alert("INSIDE FAILURE");
27 }
28 });
29 });
30
31 });
32
332- Now calling the web api method with parameter
34
35
36o Your web api controller action method.
37
38 [HttpGet]
39 [Route("student/GetWithId")]
40 public int Get(int Id)
41 {
42 return Id;
43 }
44
45o Your ajax function
46
47• The Id property must match with web api method parameter.
48
49
50$.ajax({
51 type: 'GET',
52 url: 'student/GetWithId',
53 data: { Id: 101 },
54 contentType: 'application/json; charset=utf-8',
55 dataType: 'json',
56 success: function (data) {
57 alert('data is ' + data);
58 },
59 error: function () {
60 alert("INSIDE FAILURE");
61 }
62 });
63
643- calling the web api method by passing object
65
66o Your web api controller action method.
67
68 [HttpPost]
69 [Route("api/student/names1")]
70 public Employee GetEmployee(Employee employee)
71 {
72 employee.Id = 101;
73 employee.Name = "Kaushal";
74 return employee;
75 }
76
77o Your ajax function
78• The object name ‘employee’ must match with the web api method parameter
79• The URL name can be anything , But both should match.
80i.e Route attribute of web api method and URL parameter of ajax function.
81• If you are passing object then you will use JSON.stringfy function.
82• If webApi method is not returning anything then the parameter dataType: 'json',
83Is optinal. This parameter is required if webapi method is returning something and you want to do something with the returned data.
84
85$('#btnBindDropDown').click(function ()
86 {
87 var employee = { Id: 101, Name: "Love singh" };
88 $.ajax({
89 type: 'POST',
90 url: 'api/student/names1',
91 data: JSON.stringify(employee),
92 contentType: 'application/json; charset=utf-8',
93 dataType: 'json',
94 success: function (data) {
95 alert('data is ' + data);
96 },
97 error: function () {
98 alert("INSIDE FAILURE");
99 }
100 });
101
102 });
103
1BY LOVE
21- Calling the web api method without parameter
3• If you do not have parameter in your web API method then you no need to pass the data parameter inside AJAX function.
4• The URL parameter of ajax function must match with the Route attribute of web api method.
5
6o Your web api controller action method.
7
8 [HttpGet]
9 [Route("student/Get")]
10 public IEnumerable<string> Get()
11 {
12 return new string[] { "student1", "student2" };
13 }
14
15o Your ajax function
16$('#btnBindDropDown').on('click', function () {
17 $('#btnBindDropDown').click(function () {
18 $.ajax({
19 type: 'GET',
20 url: 'student/Get',
21 contentType: 'application/json; charset=utf-8',
22 dataType: 'json',
23 success: function (data) {
24 alert('data is ' + data);
25 },
26 error: function () {
27 alert("INSIDE FAILURE");
28 }
29 });
30 });
31
32 });
33
342- Now calling the web api method with parameter
35
36
37o Your web api controller action method.
38
39 [HttpGet]
40 [Route("student/GetWithId")]
41 public int Get(int Id)
42 {
43 return Id;
44 }
45
46o Your ajax function
47
48• The Id property must match with web api method parameter.
49
50
51$.ajax({
52 type: 'GET',
53 url: 'student/GetWithId',
54 data: { Id: 101 },
55 contentType: 'application/json; charset=utf-8',
56 dataType: 'json',
57 success: function (data) {
58 alert('data is ' + data);
59 },
60 error: function () {
61 alert("INSIDE FAILURE");
62 }
63 });
64
653- calling the web api method by passing object
66
67o Your web api controller action method.
68
69 [HttpPost]
70 [Route("api/student/names1")]
71 public Employee GetEmployee(Employee employee)
72 {
73 employee.Id = 101;
74 employee.Name = "Kaushal";
75 return employee;
76 }
77
78o Your ajax function
79• The object name ‘employee’ must match with the web api method parameter
80• The URL name can be anything , But both should match.
81i.e Route attribute of web api method and URL parameter of ajax function.
82• If you are passing object then you will use JSON.stringfy function.
83• If webApi method is not returning anything then the parameter dataType: 'json',
84Is optinal. This parameter is required if webapi method is returning something and you want to do something with the returned data.
85
86$('#btnBindDropDown').click(function ()
87 {
88 var employee = { Id: 101, Name: "Love singh" };
89 $.ajax({
90 type: 'POST',
91 url: 'api/student/names1',
92 data: JSON.stringify(employee),
93 contentType: 'application/json; charset=utf-8',
94 dataType: 'json',
95 success: function (data) {
96 alert('data is ' + data);
97 },
98 error: function () {
99 alert("INSIDE FAILURE");
100 }
101 });
102
103 });