AJAX 404 Error - Call to controller action .Net MVC

ajax, asp.net, asp.net-mvc, c#, javascript

Solution

Here's a working demo: https://dotnetfiddle.net/kE5Px7

I just made one change, added the `HttpPost` attribute to the action you're calling.

[HttpPost]
public JsonResult GetAllPeople()

and as suggested in the comments, the action returns this:

return Json(people);

The URL of the AJAX call remains the same: `url: '@Url.Action("GetAllPeople")'`.

Problem

I have a fairly simply .NET application with one page. The code is meant to populate a table when run by calling the relevant controller to get the code and printing it out using a script. My controller: ``` using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using techTest3.Models; namespace techTest3.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public JsonResult GetAllPeople() { TechTestEntities testTechObj = new TechTestEntities(); var people = testTechObj.People.Select(x => new { Id = x.PersonId, Name = x.FirstName, Surname = x.LastName, Valid = x.Var1, Authorised = x.Var2 }).ToList(); return Json(people, JsonRequestBehavior.AllowGet); } } } ``` My view: ``` @{ ViewBag.Title = " Showing Data Using jQuery Ajax Call JSON in ASP.NET MVC"; } <h1>Showing Data Using jQuery Ajax Call JSON in ASP.NET MVC </h1> <div> <table id = "tblEmployee" class = "tblEmployee" > <thead> <!---<img src = "~/Loading.gif" alt = "Loading" id = "imgLoading" class = "Load" />--> </thead> <tbody> </tbody> </table> </div> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script type = "text/javascript" > $(document).ready(function() { $("#tblEmployeetbodytr").remove(); $.ajax ({ type: 'POST', url: '@Url.Action("GetAllPeople")', dataType: 'json', data: {}, success: function(data) { $("#imgLoading").hide(); var items = ''; var rows = "<tr>" + "<th align='left' class='EmployeeTableTH'>Employee ID</th><th align='left' class='EmployeeTableTH'>Name</th><th align='left' class='EmployeeTableTH'>Project Name</th><th align='left' class='EmployeeTableTH'>Manager Name</th><th align='left' class='EmployeeTableTH'>City</th>" + "</tr>"; $('#tblEmployeetbody' ).append(rows); $.each(data, function(i, item) { var rows = "<tr>" + "<td class='EmployeeTableTD'>" + item.Id + "</td>" + "<td class='EmployeeTableTD'>" + item.FirstName + "</td>" + "<td class='EmployeeTableTD'>" + item.LastName + "</td>" + "<td class='EmployeeTableTD'>" + item.Var1 + "</td>" + "<td class='EmployeeTableTD'>" + item.Var2 + "</td>" + "</tr>"; $('#tblEmployeetbody').append(rows); }); }, error: function(ex) { var r = jQuery.parseJSON(response.responseText); alert("Message: " + r.Message); } }); return false; }); </script> <style type = "text/css" > </style> ``` Where TechTestEntities is the name of an edmx model that references a SQL database. When I debug the application, I get a 404 not found error. This happens with url: '<%= Url.Action("GetAllPeople", "HomeController") %>', and url: '/Controllers/HomeController/GetAllPeople', and also url: '@Url.Action("/HomeController.cs/GetAllPeople"). Is there something obvious I'm missing? Please bear in mind I'm very new to AJAX and Javascript when answering.

Original source