web-dev-qa-db-fra.com

Appel Asp.net MVC Ajax n'appelant pas la méthode du contrôleur

Je crée une application ASP.net MVC. Et si un utilisateur clique sur un lien, il effectue un appel ajax en envoyant des données au contrôleur, puis en renvoyant d'autres données à la vue. 

C'est la méthode que je voudrais appeler dans mon contrôleur:

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

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

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

Et voici l'emplacement des contrôleurs:

08983ClassLibrary\EpostASP\Controllers\CustomerController.cs

Ceci est mon appel 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();
            }
        });

Lorsque je place mes points d'arrêt dans le code, je peux le voir toucher l'appel ajax, puis le franchir n'arrive jamais au contrôleur et ne génère aucune erreur. Des idées?

c#jqueryasp.netajaxasp.net-mvc
5
brian4342

Le problème principal est ici - 

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

Vous voyez, ~ est un littéral côté serveur. En d'autres termes, lorsque vous l'utilisez dans un chemin d'accès côté serveur ASP.net, il est remplacé par l'emplacement actuel du dossier de l'application serveur. C'était la manière traditionnelle d'ASP.Net. Cette ligne a 2 erreurs - 

  1. Cette URL ne fonctionnera jamais. Parce que c'est à l'intérieur d'une chaîne dans JS et donc ASP.net ne sait pas qu'il doit le remplacer par chemin du serveur. Vient maintenant la deuxième erreur, même si ASP.net pouvait le détecter et le convertir, cela ne fonctionnerait toujours pas. A cause du point que j'ai décrit à 2 - 

  2. Puisque vous utilisez ASP.net MVC, ce n'est pas une bonne pratique. La méthode MVC plus conventionnelle consiste à créer des itinéraires et à les utiliser. Parce que dans ASP.net, vous avez la possibilité de créer un lien direct vers une page (.aspx, .ascx). Mais les actions du contrôleur MVC ne peuvent pas être liées de la sorte. Vous devez donc créer des routes dans votre configuration de route (cochez Global.asax), puis utilisez cette route comme URL ici. Par défaut, les applications MVC prendront en charge le format suivant: 

    <Host>/{controller}/action

    exemple - 

    'localhost/Home/Index`

Notez que je n'ai pas écrit HomeController, car par défaut, les contrôleurs sont supposés ignorer la chaîne de fin Controller.

J'espère que cela vous a aidé et que si vous cherchez une solution à votre situation actuelle, essayez ceci (je n'ai pas testé, mais cela devrait être ainsi) - 

 $.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();
        }
    });

mais pour être sûr, assurez-vous d'utiliser - 

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

UPDATE: Maproute (comme demandé dans le commentaire) fonctionnera avec n’importe lequel de ces itinéraires. Mais peut aussi travailler avec différentes routes config. Route config est très très flexible, il ne vous reste plus qu'à configurer les itinéraires de la manière dont cela fonctionne pour vous. - 

    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);
    }
12
brainless coder

Votre script ajax indique qu'il recherche une méthode d'action POST.

$.ajax({type: 'POST',

Avez-vous décoré la méthode d'action avec POST?

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

Ajustez également votre paramètre de données ajax

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

Si vous utilisez Chrome, vous pouvez accéder aux outils de développement -> onglet réseau et voir toutes les demandes du serveur. Appuyez sur votre bouton et vous le verrez apparaître et vous montrera les codes de réponse, les en-têtes, etc. Dans votre cas, il sera rouge et vous dira ce qui ne va pas.

3
BrendanMcKee

Si vous utilisez une api Web ... Votre méthode commence par "Get" GetImages, vous devez donc la décorer avec [HttpPost]

0
zero7

J'ai constaté que l'utilisation de violoneux est le meilleur moyen de voir ce qui se passe dans MVC. 

Lancez le violoniste, relancez le code et voyez ce qui est vraiment revenu. Très probablement (comme mentionné par Yorro), c'est que vous avez une erreur 404 et que vous n'avez aucune gestion d'erreur dans votre appel json, vous ne verrez jamais l'erreur.

0
MercifulGiraffe
$.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();
    }
});
0
Sk Asraf

Si vous utilisez IE et que votre contrôleur frappe pour la première fois, ajoutez seulement ...

$ .ajax ({ cache: false, ...

0
Kenmeister