Jquery ajax call wont access the controller: Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Question

I keep getting Failed to load resource: the server responded with a status of 500 (Internal Server Error) indicating that the call to my controller method isnt working and I dont know why:

var user = "founder";
var clanName = "superClan";
var SuspensionDate = Date.now;
$.ajax({
            url: '@Url.Action("SuspendUserFromClan", "ChatMethods")',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: { 'ClanName': clanName, 'UserToSuspend': userToAdd, 'DateSuspendedTill': SuspensionDate },
            dataType: "json",
            traditional: true,
            success: function (data, status, xhr) {
                alert(data);
            },
            error: function () {
                alert("An error has occured!!!");
            }
        });

my controller:

public JsonResult SuspendUserFromClan(string ClanName, string UserToSuspend, DateTime DateSuspendedTill)
{
 ...
}

Answer 1

add [HttpPost] to your controller as you are doing type:"POST" from ajax

[HttpPost]
public JsonResult SuspendUserFromClan(string ClanName, string UserToSuspend, DateTime DateSuspendedTill)
{
 ...
}

Answer 2

var SuspensionDate = new Date();
$('#SuspendUser').on("click", function () {

            $.ajax({
                url: '@Url.Action("SuspendUserFromClan", "ChatMethods")',
                type: "POST",
               // contentType: "application/json; charset=utf-8",
                data: { 'ClanName': clanName, 'UserToSuspend': userToAdd, 'DateSuspendedTill': SuspensionDate.toUTCString() },
                dataType: "json",
                traditional: true,
                success: function (data, status, xhr) {
                    alert(data);
                },
                error: function () {
                    alert("An error has occured!!!");
                }
            });
        });

fixed this issue.

Answer 3

The bug is in the MVC Razor engine or somewhere else. I can explain this and recreate the bug. I was getting the error:

Failed to load resource: the server responded with a status of 500 (Internal Server -- my URL --

The odd thing was that it had just been working before I added some Razor code to my PartialView.

My partial view previously looked like (some parts omitted for brevity):

@model DataDisplay.Models.AllItems
// ....
@foreach (var item in Model)
   {
      <tr ><td>@item.ID</td><td>@item.UserName</td<td>@item.FullPath</td></tr>
   }

The simple code I added to Razor which seemed to give me an error was an if statement which made my code look like the following:

@model DataDisplay.Models.AllItems
// ....
@if (Model.Count > 0)
{
  @foreach (var item in Model)
     {
      <tr ><td>@item.ID</td><td>@item.UserName</td<td>@item.FullPath</td></tr>
     }
}

Maybe you already see the incorrect Razor code, but please continue on.

Immediately after I added that code I got the 500 error and I also got an indication (in Chrome dev tools) that there was an error in jQuery which occurs in the jQuery script on a line which looks like :

xhr.send( ( s.hasContent && s.data ) || null );

Yes, I'm calling jquery.load() to load the partialview in my current page. I searched around and found the following SO entry which lead me to my answer: Post and Get With Same signature

However, the answer that got me to the solution was the one by mohrtan .

I added the code to my controller:

[AcceptVerbs("Get", "Post")]

Then, when I ran, I got a warning when I went to build :

Warning 11 Unexpected "foreach" keyword after "@" character. Once inside code, you do not need to prefix constructs like "foreach" with "@". filename.cshtml 6 10 classname

Notice that this causes the 500 error, but is only a warning when compiling.

I removed the extra @ character from the foreach and it all ran fine.

This all seems like a Perfect Storm of errors which causes a red herring of an error so I hope this helps someone.