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)
{
 ...
}

easy to research what 500 means.... your controller code is breaking. Look at request itself in browser console network tab to see that what is being sent is what you expect, then debug your controller — charlietfl, Jul 06 '14 at 16:16
I'm trying to debug, but it doesnt even get to the first line which is why I'm thinking something in the jquery is wrong but no idea what. changed to Date.Now() - thanks — Fred Johnson, Jul 06 '14 at 16:30
is this correct action and controller? ``'@Url.Action("action1", "myMethods")'`` — Ehsan Sajjad, Jul 06 '14 at 16:33
also remove single quotes of parameters : ``'ClanName'`` change it to ``ClanName`` — Ehsan Sajjad, Jul 06 '14 at 16:34
all my ajax calls use the commas. Is there a problem with this? — Fred Johnson, Jul 06 '14 at 16:35
have you decorated action with ``[HttpPost]`` as it is a post request — Ehsan Sajjad, Jul 06 '14 at 16:35
tried that, still nothing. I think it has to do with the datetime as everything else is the same format as my other ajax and controller methods — Fred Johnson, Jul 06 '14 at 16:38
for a test pass a string and change third parameter to string to check — Ehsan Sajjad, Jul 06 '14 at 16:40
commented out contentType: "application/json; charset=utf-8", and it works without the datetime, but it doesnt work with the datetime — Fred Johnson, Jul 06 '14 at 16:48

score 2 · Answer 1 · answered Jul 06 '14 at 17:01

2

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

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

answered Jul 06 '14 at 17:01

Dipon Roy

396
1
4
18

score 1 · Accepted Answer · answered Jul 06 '14 at 17:06

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.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

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.

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

3 Answers3

Linked