javascript - call controller action from .cshtml page with jquery - Stack Overflow

admin管理员组

文章数量:1401790

I am trying to call a controller action from a jquery UI dialog. What I have currently is this:

.html("<p><textarea name=\"TextMessage\" id=\"textItems\" rows=\"10\" cols=\"72\" /><br /><br /><input type=\"button\" style=\"float:right;\" id=\"submitData\" onclick=\"Test()\" value=\"Submit\" /></p>");

The script I am using to call the controller action is this one:

<script type="text/javascript">
    function Test() {
        $ajax({
            url: '<%= Url.Action("GetData", "Report") %>',
            success: function (data) {
                alert(data);
            }
        });
    };
</script>

And the controller action is this:

[HttpGet]
        public JsonResult GetData()
        {
            return Json("success", JsonRequestBehavior.AllowGet);
        }

I would like to know if I am doing something wrong, I am trying to get this to work but without any success. When I am trying directly to start the controller via http://localhost:1322/Report/GetData it works fine, so that means that the script is not setup properly.

I am trying to call a controller action from a jquery UI dialog. What I have currently is this:

.html("<p><textarea name=\"TextMessage\" id=\"textItems\" rows=\"10\" cols=\"72\" /><br /><br /><input type=\"button\" style=\"float:right;\" id=\"submitData\" onclick=\"Test()\" value=\"Submit\" /></p>");

The script I am using to call the controller action is this one:

<script type="text/javascript">
    function Test() {
        $ajax({
            url: '<%= Url.Action("GetData", "Report") %>',
            success: function (data) {
                alert(data);
            }
        });
    };
</script>

And the controller action is this:

[HttpGet]
        public JsonResult GetData()
        {
            return Json("success", JsonRequestBehavior.AllowGet);
        }

I would like to know if I am doing something wrong, I am trying to get this to work but without any success. When I am trying directly to start the controller via http://localhost:1322/Report/GetData it works fine, so that means that the script is not setup properly.

• javascript
• jquery
• asp-mvc-3
• jquery-ui
• razor

Share Improve this question Follow edited May 22, 2020 at 13:58 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Feb 17, 2012 at 15:16 LazialeLaziale 8,2354848 gold badges155155 silver badges271271 bronze badges 9

• If you are returning JSON, you need to set the dataType: 'json' property. You should also include and "error: function(..." in your ajax call. – ron tornambe Commented Feb 17, 2012 at 15:25
• It seems that you are missing the closing bracket on the Test function, but that may just be a typo. – Drew Gaynor Commented Feb 17, 2012 at 15:29
• @JackieChiles I updated the test function, see if it's ok, doesn't do anything as well – Laziale Commented Feb 17, 2012 at 15:35
• @rontornambe Is it possible to give me an example, that would help me a lot. Thx in advance – Laziale Commented Feb 17, 2012 at 15:36
• @Laziale: When you say that you are able to "start the controller directly," do you mean by navigating to that URL (in a browser), or do you mean that it works if you set that URL as the url parameter of the AJAX call? With your edit you now have a trailing semicolon after the closing bracket on Test, by the way. – Drew Gaynor Commented Feb 17, 2012 at 15:38

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 2

You should try:

url:'@Url.Action("GetData", "Report")'

MVC will automatically add "Controller" to the end of the second parameter when it is looking for the controller.

Edit:

This code may work:

function Test() {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: '@Url.Action("GetData", "Report")',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            alert(data);
        },
        error: function(xhr, status, error) {
            alert(error);
        }
    });
}

Edit 2:

Changed to use Razor syntax so that this code will work with Razor/MVC3.

You are using MVC-2 syntax on Url.Action. This should work:

function Test() {
  $.ajax(
    {
      url: '@Url.Action("GetData", "Report")',
      dataType: 'json',
      success: function (data) {
        alert(data);
      },
      error: function (x, err, desc) {
        alert(desc);
      }
    }
  );
};

Because you are calling an action method that is returning a json object you can use the jQuery.getJSON() method.

<script type="text/javascript">
    function Test() {
        $.getJSON(
            '@this.Url.Action("GetData", "Report")',
            function (data) {
                alert(data);
            }
        });
    };
</script>

You may try jsaction too: http://jsaction.codeplex.

We can call Controller method using Javascript / Jquery very easily as follows:

Suppose following is the Controller method to be called returning an array of some class objects. Let the class is 'A'

public JsonResult SubMenu_Click(string param1, string param2)

    {
       A[] arr = null;
        try
        {
            Processing...
           Get Result and fill arr.

        }
        catch { }


        return Json(arr , JsonRequestBehavior.AllowGet);

    }

Following is the plex type (class)

public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

}

Now it was turn to call above controller method by JQUERY. Following is the Jquery function to call the controller method.

function callControllerMethod(value1 , value2) {
    var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1  &param2=value2'
    $.getJSON(strMethodUrl, receieveResponse);
}


function receieveResponse(response) {

    if (response != null) {
        for (var i = 0; i < response.length; i++) {
           alert(response[i].property1);
        }
    }
}

In the above Jquery function 'callControllerMethod' we develop controller method url and put that in a variable named 'strMehodUrl' and call getJSON method of Jquery API.

receieveResponse is the callback function receiving the response or return value of the controllers method.

Here we made use of JSON , since we can't make use of the C# class object

directly into the javascript function , so we converted the result (arr) in controller method into JSON object as follows:

Json(arr , JsonRequestBehavior.AllowGet);

and returned that Json object.

Now in callback function of the Javascript / JQuery we can make use of this resultant JSON object and work accordingly to show response data on UI.

For more detail click here

本文标签： javascriptcall controller action from cshtml page with jqueryStack Overflow