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
    }

XMLHttpRequest object - msdn.microsoft.com/en-us/library/ms535874(v=vs.85).aspx — rageit
– rageit, Commented Feb 23, 2017 at 18:06

Amir H. Bagheri · Accepted Answer · 2017-02-23 18:07:13Z

4

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

answered Feb 23, 2017 at 18:07

Amir H. Bagheri

1,4061 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BFG · Accepted Answer · 2017-02-23 19:59:18Z

1

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);

        }

     };
}

edited Feb 23, 2017 at 19:59

answered Feb 23, 2017 at 18:19

BFG

7938 silver badges19 bronze badges

2 Comments

Alma Over a year ago

I have this: function SortData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { } }; xhttp.open("POST", "Home/SortByColumn", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("sortCriteria=FullName"); xhttp.send(); } it is working and send the variable but I am getting this error: Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED. in console

BFG Over a year ago

I think the issue here is that you are calling xhttp.send(); twice. Once with the data to send, and once without parameters. In my example, I added a comment saying to use xhttp.send(params); if you had to submit something and to use xhttp.send(); if you didnt need to submit anything. Don't use both one after the other :) I'll edit my answer

Collectives™ on Stack Overflow

Call MVC Controller Method from TypeScript/JavaScript without jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related