Get The Data By Parameter From Web-API Using jQuery AJAX

In this blog, you will learn how to get the data by parameter from Web-API, using jQuery AJAX.

In the previous article, we saw about how to get the data from Web-API, using jQuery AJAX.
Here, we are going to see, how to pass the input value to the Service method parameter, using jQuery AJAX.

Step 1 
 
Write Web-API Services in another project

Here, just write the Service to get the company details, which is based on company Id. This company Id is input just from jQuery AJAX parameter. 
  1. using System.Collections.Generic;  
  2. using System.Net;  
  3. using System.Net.Http;  
  4. using System.Web.Http;  
  5. using System.Web.Http.Description;  
  6. using TS_EF_API.Repository;  
  7. namespace TS_EF_API.Controllers {  
  8.         /// <summary>  
  9.         /// Company  
  10.         /// </summary>  
  11.         public class CompanyController: ApiController {#  
  12.                 region Global Declaration  
  13.                 private IRepository < Company > _Companyrepository = null;  
  14.                 /// <summary>  
  15.                 /// Constructor for Company Controller  
  16.                 /// </summary>  
  17.                 public CompanyController() {  
  18.                     this._Companyrepository = new Repository < Company > ();  
  19.                 }#endregion  
  20.                     /// <summary>  
  21.                     /// Get Company Detail  
  22.                     /// </summary>  
  23.                     /// <remarks>  
  24.                     /// Get Company Details  
  25.                     /// </remarks>  
  26.                     /// <param name="CompanyId"></param>  
  27.                     /// <returns code="200"></returns>  
  28.                     [ResponseType(typeof(Company))]  
  29.                     [Route("api/GetCompany")]-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - > It will call by Jquery ajax[HttpGet]  
  30.                 public HttpResponseMessage GetCompany(int CompanyId) -- -- -- -- > This companyid is the incoming parameter and the input get from jquery ajax(In Step 2: refer 7 th line it 's shows how to pass input parameter to service method. {  
  31.                             var result = _Companyrepository.GetById(CompanyId);  
  32.                             HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, result);  
  33.                             return response;  
  34.                         }#endregion   
Step 2

Write Client side jQuery AJAX to pass the input parameter (companyid) and get the details about the company.
  1. <script>  
  2. $(document).ready(function() {  
var companyID=$("#CompanyId").val();---------> just getting companyid input from user and assiging to companyid,
  1. $.ajax({  
  2.     url: 'http://localhost:3002/api/GetCompanies',  
  3.     -- -- -- -- -- -- -- -- -- -- -- -- - > It 's represent url of api  
  4.     type: 'GET',  
  5.     -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - > we need to set whether we getting / posting the data  
  6.     dataType: 'json',  
  7.     -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > type of data  
  8.     data: {  
  9.         CompanyId: companyID  
  10.     },  
  11.     -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > here we just assiging the input to CompanyID parameter,  
  12.     Left side is the parameter variable in service method,  
  13.     right side is user passing input.Here  
  14.     if you want to pass multiple parameter just use comma(, ) to pass multiple parameter(Ex: data: {  
  15.             CompanyId: companyID,  
  16.             CompanyName: "Example"  
  17.         }  
  18.         success: function(data, textStatus, xhr) {  
  19.             -- -- -- -- -- -- -- > here we can the result from data object  
  20.             console.log(data);  
  21.             -- -- -- -- - -- -- -- -- - > here you can proceed to get the data,  
  22.             if you want to get the company address means just write as data.Propertyname(Ex: data.companyaddress)  
  23.         }, error: function(xhr, textStatus, errorThrown) {  
  24.             console.log('Error in Database');  
  25.             -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - >  
  26.             if any error caught  
  27.         }  
  28.     });  
  29. }); < /script>  
I hope it helps.