Asp.net MVC Ajax调用没有调用控制器方法

Question

我正在制作ASP.net MVC应用程序我希望如此，当用户点击链接时，它会执行ajax调用，将数据发送到控制器，然后将其他数据返回给视图。

这是我想在我的控制器中调用的方法：

public JsonResult GetImage(string url)
        {
            Image image = Image.FromFile(url, true);

            byte[] byteImage = converter.ImageToBytes(image);

            return Json(new { byteImage }, JsonRequestBehavior.AllowGet);
        }

这里是控制器位置：

08983ClassLibrary\EpostASP\Controllers\CustomerController.cs

这是我的Ajax调用：

$.ajax({
            url: "~/Controllers/CustomerController/GetImage/",
            type: 'POST',
            contentType: 'application/json',
            data: "url="+url,
            success: function (image) {
                document.getElementById("image").src = "data:image/png;base64," + image;
                showImage();
            }
        });

当我在代码中放置断点时，我可以看到它击中了ajax调用，然后踩到它从未到达控制器并且不会给出任何错误。 有任何想法吗？

Answer 1

主要问题在这里 -

url: "~/Controllers/CustomerController/GetImage/",

您看， ~是服务器端文字，换句话说，当您在ASP.net服务器端路径中使用它时，它将被当前服务器应用程序文件夹位置替换。 这是传统的ASP.Net方式。 这条线有2个错误 -

1. 这个网址永远不会有用。 因为它在JS中的字符串内部，因此ASP.net不知道它必须用服务器路径替换它。 现在出现第二个错误，即使ASP.net可以检测并转换它，它仍然无法正常工作。 由于我在2处描述的观点 -

2. 由于您使用的是ASP.net MVC，因此这不是一个好习惯。 更传统的MVC方式是创建路由并使用这些路由。 因为在ASP.net中，您可以选择直接链接到页面（.aspx，.ascx）。 但是MVC控制器动作不能像那样链接。 因此，您必须在路由配置中创建路由（检查Global.asax ），然后在此处使用该路由作为URL。 默认情况下，MVC应用程序将支持以下格式 -

   <host>/{controller}/action

   示例 -

    'localhost/Home/Index` 

请注意，我没有编写HomeController ，因为默认情况下控制器应该忽略尾随字符串Controller 。

我希望这有帮助，只是因为你正在为你现在的情况寻找一个解决方案尝试这个（我没有测试，但它应该是这样的） -

 $.ajax({
        url: "Customer/GetImage",
        type: 'POST',
        contentType: 'application/json',
        data: "url="+url,
        success: function (image) {
            document.getElementById("image").src = "data:image/png;base64," + image;
            showImage();
        }
    });

但为了安全起见，请确保使用 -

[HttpPost]
public JsonResult GetImage(string url)
{
}

更新：maproute（在评论中请求）将适用于任何这些路线。 但也可以使用不同的路由配置。 Route配置非常灵活，只需按照它的工作方式设置路由即可。 -

    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.MapRoute(
            "...",                                              // Route name
            "{controller}/{action}/{id}",                           // URL with parameters
            new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
        );

        routes.MapRoute(
            "...",                                              // Route name
            "{controller}/{action}",                           // URL with parameters
            new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
        );

        routes.MapRoute(
            "...",                                              // Route name
            "{controller}/{action}/{id}",                           // URL with parameters
            new { controller = "Customer", action = "GetImage", id = "" }  // Parameter defaults
        );
        routes.MapRoute(
            "...",                                              // Route name
            "Customer/GetImage/{id}",                           // URL with parameters
            new { controller = "Customer", action = "GetImage", id = "" }  // Parameter defaults
        );
        ..... //all of these mentioned route will land on the same url 
    }

    protected void Application_Start()
    {
        RegisterRoutes(RouteTable.Routes);
    }

Answer 2

你的ajax脚本说它正在寻找一个POST动作方法。

$.ajax({type: 'POST',

你用POST装饰了动作方法吗？

[HttpPost]
public JsonResult GetImage(string url)
{
}

另外，调整ajax数据参数

$.ajax({
    data: {
        "url": url 
        },

Answer 3

如果您使用的是chrome，您可以访问开发人员工具 - >网络选项卡，查看正在进行的所有服务器请求。 按下你的按钮，你会看到它弹出并显示响应代码，标题等。在你的情况下它会是红色的，会告诉你出了什么问题

Answer 4

如果你正在使用web api ...你的方法是从“获取”GetImages开始，所以你需要用[HttpPost]来装饰方法

Answer 5

我发现使用fiddler是了解MVC中发生的事情的最佳方式。

启动fiddler，再次运行代码并查看实际返回的内容。 最有可能（正如Yorro所提到的）你得到了404错误，而且你的json调用中没有错误处理，你不会看到错误。

Answer 6

$.ajax({
     url: '@Url.Action("GetImage", "Customer")',
    type: 'POST',
   contentType: "application/json; charset=utf-8",
    data: "url="+url,
    success: function (image) {
        document.getElementById("image").src = "data:image/png;base64," + image;
        showImage();
    }
});

Answer 7

如果使用IE，并且您的控制器第一次点击只添加...

$ .ajax（{cache：false，...