How to Make Effective Ajax Calls to an ASP.NET MVC Controller?

A complete guide to making Ajax requests to ASP.NET MVC controllers using jQuery

This article will guide you on how to use jQuery to initiate Ajax requests to ASP.NET MVC controllers, including the implementation of controllers and views, as well as client-server communication.

Controller operation

Your controller should define actions for handling Ajax requests. In the following example, FirstAjax is an operation that responds with data in JSON format:

<code class="language-csharp">public ActionResult FirstAjax()
{
    return Json("chamara", JsonRequestBehavior.AllowGet);
}</code>

View

The

view initializes jQuery and makes an Ajax request to the FirstAjax action. The request includes a success handler that displays the response in an alert box:

<code class="language-javascript">$(document).ready(function () {
    var serviceURL = '/AjaxTest/FirstAjax';

    $.ajax({
        type: "POST",
        url: serviceURL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {     
        alert(data);
    }

    function errorFunc() {
        alert('error');
    }
});</code>

Improvement plan

Note that the data attribute in the original Ajax request causes problems because your controller does not expect any parameters. Removing this attribute and using the @Url.Action method will solve the problem:

<code class="language-javascript">$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});</code>

For POST requests that include data, you need to modify the controller action to accept the parameters and modify the Ajax request to include the data:

<code class="language-csharp">// 控制器
[HttpPost]
public ActionResult FirstAjax(string a)
{
    return Json("chamara", JsonRequestBehavior.AllowGet);
}

// 视图
$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});</code>

The above is the detailed content of How to Make Effective Ajax Calls to an ASP.NET MVC Controller?. For more information, please follow other related articles on the PHP Chinese website!