Ajax call returns internal 500 error

Question

Hi I am trying to execute an ajax call to the server but I seem to have no luck I keep getting back on the console an error 500 Internal server error.This is my ajax call:

    $("body").on("click", "#ok", function (e) {
    var id = $(this).attr("data-bookid");
    $.ajax({
        url: "/ProductEditor/DeleteBook",
        type:"POST",
        data: { bookId: parseInt(id) },
        success: function (data) {
            console.log(data);
        },
        error: function (data) {
            console.log(data);
        }
    });
    e.preventDefault();
})

And this is the C# code I am trying to call:

public ActionResult DeleteBook(int bookId)
{
   bookRepository.DeleteBook(bookId);
   return RedirectToAction("Books", "ProductManager");
}

While trying to debug I have noticed that the DeleteBook method is not even called.

What am I doing wrong?

EDIT I have added the [HttpPost] attribute but it still does not work

The AJAX call is fine. As the message states, it's a server error, so check your server logs. — Anthony Grist, Mar 11 '13 at 13:07
you may have a duplicate function in the backend or some syntex error — Muhammad Raheel, Mar 11 '13 at 13:08
This error will show itself as soon as you do something on error handling. See [here](http://stackoverflow.com/questions/8653712/asp-net-mvc-3-500-error-logging-not-working-on-server) and [here](http://stackoverflow.com/questions/1464531/how-do-i-use-application-error-in-asp-net-mvc) how to catch errors. — CodeCaster, Mar 11 '13 at 13:14
use fiddler to see what has logged along with 500 internal server error — Karthik Chintala, Mar 11 '13 at 13:14

scott.korin · Accepted Answer · 2016-06-10T16:09:28.913

Without more information, it's not easy to tell you what you are doing wrong.

However, the error function callback for the jQuery ajax function takes three parameters:

(jqXHR, textStatus, errorThrown)

$.ajax({
    url: "/ProductEditor/DeleteBook",
    type:"POST",
    data: { bookId: parseInt(id) },
    success: function (data) {
        console.log(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    }
});

The third parameter, errorThrown will have the HTTP response text for the call to /ProductEditor/DeleteBook. I would suggest looking at what errorThrown is showing, as well as possibly running the entire program in debug mode.

Perhaps var id = $(this).attr("data-bookid"); is incorrect, and the value of id is being set to undefined?

Also, you can use the Network tab in the F12 Development Tools in IE or Chrome, Firebug in Firefox, or Fiddler to debug ajax calls. You can watch the ajax request being sent to the server as well as the response from the server in order to see whether the correct data (bookId) is being sent in the correct format (JSON) and what the response is from the server

I also want to add you should be handling errors in your MVC actions, as @CodeCaster indicating in his comment on your question. — scott.korin, Mar 11 '13 at 13:25

score 1 · Answer 2 · answered Oct 09 '13 at 05:54

1

Your WebMethod must be static

[WebMethod(true)]
public static ActionResult DeleteBook(int bookId) 
{    
     bookRepository.DeleteBook(bookId);    
     return RedirectToAction("Books", "ProductManager"); 
}

answered Oct 09 '13 at 05:54

Daniel Caballero

86
3

score 0 · Answer 3 · answered Mar 11 '13 at 13:07

0

Add HttpPost to your method and try

[HttpPost]
public ActionResult DeleteBook(int bookId)
{
   bookRepository.DeleteBook(bookId);
   return RedirectToAction("Books", "ProductManager");
}

answered Mar 11 '13 at 13:07

K D

5,889
1
23
35

I added it but still the method does not get called – aleczandru Mar 11 '13 at 13:10
Post the Error message you are getting with 500 – K D Mar 11 '13 at 13:10

Ajax call returns internal 500 error

3 Answers3