Using simple javascript to call server side method in Asp.Net MVC.

How to make an api call using javaScript XMLHttpRequest() handler and how to make an httpGet and httpPost request.

 Javascript   
 

Posted: August 23, 2017. | By: mustafa

Lets see how we can make server side call using pure javacscript. Below is a javascript class to make http GET request using XMLHttpRequest() object. 

var HttpClient = function() {
 this.get = function(url, callback) {
 var httpRequest = new XMLHttpRequest();
 httpRequest.onreadystatechange = function() { 
 if (httpRequest.readyState == 4 && httpRequest.status == 200)
 callback(httpRequest.responseText);
 }

httpRequest.open( "GET", url, true ); 
 httpRequest.send( null );
 }
}

 

Usage: use httpClient object to make get call with the url passing parameter.

var client = new HttpClient();
client.get('/Home/GetItem?id=4', function(response) {
 // do something with response
});

 

Controller method: In MVC controller create ActionResult method with  HttpGet attribute to receive httpGet call with integer parameter id.

[HttpGet]
 public ActionResult GetItem(int id)
 {
 var itemId = id;
 //do some stuff
 return View();
 }

 
Similarly we can add post function to above class, we have to set request header for the Content-type and pass data while making httpPost request.

this.post = function (url, callback, data) {
 var httpRequest = new XMLHttpRequest();
 httpRequest.onreadystatechange = function () {
 if (httpRequest.readyState == 4 && httpRequest.status == 200)
 callback(httpRequest.responseText); 
 }

httpRequest.open("POST", url, true);
 httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 httpRequest.send(data);
 }

 

Usage: passing parameter, here we have set Id value 4 to send data with POST request. On sucess show some message.

var data = "Id=" + 4;
client.post('/Home/GetItem', function (response) {
console.log('done successfully.');
}, data);

 

Controller Method: In MVC controller create same Action method above GetItem with HttpPost attribute. To get the data use Request.Form with the parameter name to receive send data. 

[HttpPost]
 public ActionResult GetItem()
 {
 var itemId = Request.Form["Id"];
 //do some stuff
 return View();
 }

We have learn above how to send httpGet and httpPost request using simple javascript. It can be used while loading a widget or container data.


related posts

Back to top