Call MVC Controller Method from TypeScript/JavaScript without jquery

Question

Is it possible to call MVC Controller Method with Ajax call in Type Script/JavaScript without Jquery? if not How I can Call Controller Method from JavaScript/Type Script file?

Consider a method that is calling Controller method to sort and send a sort column to it:

This is function in ts file:

 function SortData()
  {
     .... call Controller method and send sortCriteria (FullName) to it

   }

and this is Controller method:

   [Route("sortbycolumn")]
    public ActionResult SortByColumn(string sortCriteria)
    {
       .... Do the sort retun back json result
    }

Answer 1

Of course you can. In fact, jQuery is library based on javascript and it is not an independent language. Here is what you have to do:

function SortData(){
  // Every ajax call is an XMLHttpRequest
  var xhttp = new XMLHttpRequest();

  // It means that your request is processed asynchronously. 
  // So we need to define the method that has to be run once the response is received,
  xhttp.onreadystatechange = function() {

    // status 200 means that your request has been processed successfully.

    if (this.readyState == 4 && this.status == 200) {
      // Change your html here
    }
  };
  // Setting your request
  xhttp.open("POST", "mycontroller/myaction", true);

  // Send your request when everything is set.
  xhttp.send();
}

If you need more to know, check out this link: https://www.w3schools.com/xml/ajax_intro.asp

Answer 2

I've included an example of a GET and a POST + submitting/receiving data using vanilla JS & AJAX below.

For further info, give this a read.

Good luck.

function SortData() {

    var data;

    //Post Example
    var xhttp = new XMLHttpRequest();

    xhttp.open("POST", "/Controller/Action", true);
    xhttp.setRequestHeader("Content-Type", "application/json");

    //There are two options for using xhttp.send(): Only keep the ONE that applies to you

    //Option 1: Submit data to the server
    xhttp.send(JSON.stringify(params));

    //OR

    //Option 2: Nothing to submit to the server
    xhttp.send(); 

    xhttp.onload = function(response) {

        if(response.target.status == 200) {

            data = JSON.parse(response.target.response);

        }

     };

     //Get Example
     var xhttp = new XMLHttpRequest();

     xhttp.open("GET", "/Controller/Action", true);
     xhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    //There are two options for using xhttp.send(): Only keep the ONE that applies to you

    //Option 1: Submit data to the server
    xhttp.send(JSON.stringify(params));

    //OR

    //Option 2: Nothing to submit to the server
    xhttp.send();

     xhttp.onload = function(response) {

        if(response.target.status == 200) {

            data = JSON.parse(response.target.response);

        }

     };
}