c# - Call MVC Controller Method from TypeScriptJavaScript without jquery - Stack Overflow

admin管理员组

文章数量:1389758

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
    }

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
    }

• javascript
• c#
• asp-mvc
• typescript

Share Improve this question Follow asked Feb 23, 2017 at 18:04 AlmaAlma 4,4401313 gold badges4646 silver badges8787 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./xml/ajax_intro.asp

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

        }

     };
}

本文标签： cCall MVC Controller Method from TypeScriptJavaScript without jqueryStack Overflow