ajax requesting POST error status code 500

Question

i have a controller that have a methods for my ajax request

$(document).on('click', '#btnSave', function (e) {
    var array = {
        some data
    };

    $.ajax({
        url: window.location.origin + "/Page/ManageEmployee/Index/DataInsert",
        type: "POST",
        data: array,
        
        success: function (response) {
            var result = $(response).find('#body').html();
            console.log(response);
            $('#body').html(response);
        },
        error: function (xhr, status, error_m) {
            alert(status + error_m);
        }
    });
});

this is my ajax code, i have three ajax code all of them are the same way of requesting ajax request, the differences only are in the url.

for actiona name Delete

url: window.location.origin + "/Page/ManageEmployee/Index/Delete"

for action name Insert_Something

url: window.location.origin + "/Page/ManageEmployee/Index/Insert_Something"

for DataInsert Actiona Name in the controller that did not work or error

url: window.location.origin + "/Page/ManageEmployee/Index/DataInsert"

This the code of my controller in the project

I put a debugger on the method that does not run and when executing the program or system it didnt jump in the DataInsert method, because there is an ajax error:

"Failed to load resource: the server responded with a status of 500 ()"

[HttpPost]
public ActionResult Delete(int index)
{
 //this method run
}
                
[HttpPost]
public ActionResult Insert_Something(ModelClass data)
{
 //this method run
}

[HttpPost]
public ActionResult DataInsert(ModelClass data)
{
 //this method doesn't run
}

The Question or My problem is:

how can i fix the error in requesting a post method into my controller, or what seems the problem because the other ajax request works but the ajax with url: DataInsert not work

Additional: Im new to using the ASP.NET MVC so my code structure or the way I work things might be weird to others, just learning this framework by relying on the post in internet, yt and some free resources in the internet. If something you can advise or give tips to make my structure be better or best practices i can change to improve my code.

Answer 1

Im new to using the ASP.NET MVC so my code structure or the way I work things might be weird to others, just learning this framework by relying on the post in internet, yt and some free resources in the internet. If something you can advise or give tips to make my structure be better or best practices i can change to improve my code.

Based on your shared code snippet and according to your route defination, its quite obvious that, your ajax URL is incorrect. The way you have configured the route which generating invalid URL for reaching the API controller endpoint.

Request Model:

public class ModelClass
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Controller:

Let's say, you have following API controller:

[Route("api/[controller]")]
[ApiController]
public class ManageEmployeeController : ControllerBase
{

    [HttpPost]
    [Route("Insert_Something")]
    public async Task<IActionResult> Insert_Something(ModelClass searchModel)
    {

        return Ok(searchModel);
    }
}

Ajax Request Format:

In order to submit request to above controller, you should decorate your ajax request as following:

$(document).on('click', '#btnSave', function (e) {

    const array = { Id: 1, Name: "Test Name" };
    var data = JSON.stringify(array);
    $.ajax({
        url: '/Api/ManageEmployee/Insert_Something',
        type: 'POST',
        data: data,
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            console.log(result);
        },
        error: function (e) {
        }
    });
});

Note: Also window.location.origin +'/Api/ManageEmployee/Insert_Something' also correct.

Output:

Note: If you have any specific requirement for custom route configuration, please refer to this official document.