如何从Controller返回模型对象至Ajax方法？当前触发错误回调

Hey there! Let's figure out why your Ajax call is hitting the error callback instead of successfully receiving the model object from your Controller. Here are the most common fixes and best practices to get this working smoothly:

1. Ensure Your Controller Method Returns the Right Type #

First, make sure your Controller method is set up to return serialized JSON data that Ajax can parse.

For ASP.NET MVC: #

Use JsonResult and add the appropriate HTTP verb attribute (match your Ajax request method):

[HttpPost] // Or [HttpGet] if your Ajax uses GET
public JsonResult GetMyModel()
{
    // Create or fetch your model object
    var myModel = new YourCustomModel
    {
        Id = 1,
        Name = "Sample Data",
        IsActive = true
    };

    // Return the model as JSON
    return Json(myModel);
}

For ASP.NET Core: #

You can use IActionResult with Ok() or Json()—both work, but Ok() is more conventional for successful responses:

[HttpPost]
public IActionResult GetMyModel()
{
    var myModel = new YourCustomModel
    {
        Id = 1,
        Name = "Sample Data",
        IsActive = true
    };

    return Ok(myModel); // Automatically serializes to JSON
    // Or return Json(myModel); if you need custom serialization settings
}

2. Fix Your Ajax Request Configuration #

Most errors happen because the Ajax request isn't configured to match what the Controller expects. Double-check these settings:

$.ajax({
    url: '/YourControllerName/GetMyModel', // Make sure this route is correct!
    method: 'POST', // Must match the [HttpPost] attribute on your Controller method
    contentType: 'application/json; charset=utf-8', // Important if sending JSON data (optional if sending form data)
    dataType: 'json', // Tell jQuery to expect a JSON response
    // If you need to send data to the Controller, include it here (stringify if sending JSON)
    // data: JSON.stringify({ param1: "value1" }),
    success: function(response) {
        // Now you can use your model object!
        console.log("Received model:", response);
        alert("Model Name: " + response.Name);
    },
    error: function(xhr, status, error) {
        // Debug tip: Print the server's error response to see what's wrong
        console.log("Error Details:", xhr.responseText);
    }
});

Key checks here:

• method: Match the HTTP verb attribute on your Controller (e.g., [HttpPost] ↔ method: 'POST').
• url: Verify the route points to the correct Controller and action method. Use route names if you're using attribute routing.
• dataType: Setting this to json ensures jQuery parses the response into a JavaScript object automatically.

3. Handle Serialization Issues (Common Pitfall!) #

If your model has circular references (e.g., a parent object referencing a child that references the parent), the JSON serializer will throw an error, triggering the Ajax error callback.

Fix for ASP.NET MVC: #

Add this to your Global.asax.cs to ignore circular references:

protected void Application_Start()
{
    // Other startup code...
    JsonConvert.DefaultSettings = () => new JsonSerializerSettings
    {
        ReferenceLoopHandling = ReferenceLoopHandling.Ignore
    };
}

Fix for ASP.NET Core: #

Configure JSON serialization in your Program.cs (or Startup.cs):

builder.Services.AddControllersWithViews()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles;
    });

4. Check for Authorization/Filter Interceptions #

If your Controller method uses [Authorize] or custom action filters, your Ajax request might be getting blocked (e.g., returning a 401 Unauthorized error).

• If using cookie-based auth, add xhrFields: { withCredentials: true } to your Ajax request to send authentication cookies:

  $.ajax({
      // ... other settings
      xhrFields: { withCredentials: true },
      // ...
  });
  

• For token-based auth, include the token in the request headers:

  $.ajax({
      // ... other settings
      headers: {
          'Authorization': 'Bearer ' + yourAuthToken
      },
      // ...
  });
  

5. Debug the Error to Find Exact Issues #

If you're still stuck, use the error callback to get details from the server:

error: function(xhr, status, error) {
    console.log("Status Code:", xhr.status); // e.g., 500 = Server error, 404 = Route not found
    console.log("Server Response:", xhr.responseText); // This will show the actual exception message from the Controller
}

This will tell you exactly why the request failed—whether it's a missing route, serialization error, or permission issue.

内容的提问来源于stack exchange，提问作者Karuna