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.

Get 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.

using System.Collections.Generic;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using TS_EF_API.Repository;
namespace TS_EF_API.Controllers {
/// <summary>
/// Company
/// </summary>
public class CompanyController: ApiController {#
region Global Declaration
private IRepository < Company > _Companyrepository = null;
/// <summary>
/// Constructor for Company Controller
/// </summary>
public CompanyController() {
this._Companyrepository = new Repository < Company > ();
}#endregion
/// <summary>
/// Get Company Detail
/// </summary>
/// <remarks>
/// Get Company Details
/// </remarks>
/// <param name="CompanyId"></param>
/// <returns code="200"></returns>
[ResponseType(typeof(Company))]
[Route("api/GetCompany")]-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - > It will call by Jquery ajax[HttpGet]
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. {
var result = _Companyrepository.GetById(CompanyId);
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, result);
return response;
}#endregion

Step 2

Write Client side jQuery AJAX to pass the input parameter (companyid) and get the details about the company.

<script>
$(document).ready(function() {

var companyID=$("#CompanyId").val();---------> just getting companyid input from user and assiging to companyid,

$.ajax({
url: 'http://localhost:3002/api/GetCompanies',
-- -- -- -- -- -- -- -- -- -- -- -- - > It 's represent url of api
type: 'GET',
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - > we need to set whether we getting / posting the data
dataType: 'json',
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > type of data
data: {
CompanyId: companyID
},
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > here we just assiging the input to CompanyID parameter,
Left side is the parameter variable in service method,
right side is user passing input.Here
if you want to pass multiple parameter just use comma(, ) to pass multiple parameter(Ex: data: {
CompanyId: companyID,
CompanyName: "Example"
}
success: function(data, textStatus, xhr) {
-- -- -- -- -- -- -- > here we can the result from data object
console.log(data);
-- -- -- -- - -- -- -- -- - > here you can proceed to get the data,
if you want to get the company address means just write as data.Propertyname(Ex: data.companyaddress)
}, error: function(xhr, textStatus, errorThrown) {
console.log('Error in Database');
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - >
if any error caught
}
});
}); < /script>

I hope it helps.