【问题标题】:AJAX 404 Error - Call to controller action .Net MVCAJAX 404 错误 - 调用控制器操作.Net MVC
【发布时间】:2017-10-02 00:16:58
【问题描述】:

我有一个相当简单的.NET 应用程序,只有一页。

代码旨在在运行时通过调用相关控制器来获取代码并使用脚本将其打印出来来填充表格。

我的控制器:

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);
    }  

}
}

我的看法:

@{
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> 

其中 TechTestEntities 是引用 SQL 数据库的 edmx 模型的名称。

当我调试应用程序时,我收到 404 not found 错误。这发生在 url: '' 和 url: '/Controllers/HomeController/GetAllPeople' 以及 url: '@Url.Action("/HomeController .cs/GetAllPeople”)。

我有什么明显的遗漏吗?请记住,我在回答时对 AJAX 和 Javascript 非常陌生。

【问题讨论】:

  • 你需要用[HttpPost]装饰GetAllPeople动作,否则它只会响应GET请求
  • 在助手@Url.Action("GetAllPeople", "Home")中删除“控制器”一词
  • 另外,由于 JSON 控制器标记为 HttpPost 返回 JsonResult,请改为删除 JsonRequestBehavior.AllowGetreturn Json(people)
  • 谢谢,我试试看!
  • 尝试所有建议后仍然出现 404 错误 - 调试转到 /Home/index,并且“GetAllPeople”、“Home”或“GetAllPeople, HomeController”都不起作用。

标签: javascript c# asp.net ajax asp.net-mvc


【解决方案1】:

这是一个工作演示:https://dotnetfiddle.net/kE5Px7

我刚刚做了一项更改,将HttpPost 属性添加到您正在调用的操作中。

[HttpPost]
public JsonResult GetAllPeople()

按照 cmets 中的建议,该操作返回:

return Json(people);

AJAX 调用的 URL 保持不变:url: '@Url.Action("GetAllPeople")'

【讨论】:

  • 我的还是有问题,但我会看看这个例子,谢谢。
  • 你在代码中分享的观点……是Index.cshtml
  • 是的,是的。这是启动页面
  • 谢谢,明白了!它需要 write 调用,确保要添加的表与类名匹配,并确保字段名正确。
【解决方案2】:

您只需要做的一项更改就是将 HomeController 更改为 Home。我们在调用中仅使用控制器名称。例如 '/Home/GetAllPeople' 。写 '/Controllers/HomeController/GetAllPeople' 是错误的。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-01-24
    • 1970-01-01
    • 2014-08-03
    • 1970-01-01
    • 2015-12-27
    • 2015-02-14
    • 2013-07-07
    • 2020-11-28
    相关资源
    最近更新 更多