web-dev-qa-db-fra.com

Appel Ajax dans le contrôleur MVC - numéro d'URL

J'ai consulté les questions jQuery/MVC précédemment publiées et je n'ai pas trouvé de réponse valable.

J'ai le code JavaScript suivant:

$.ajax({
 type: "POST",
 url: '@Url.Action("Search","Controller")',
 data: "{queryString:'" + searchVal + "'}",
 contentType: "application/json; charset=utf-8",
 dataType: "html",
 success: function (data) {
 alert("here" + data.d.toString());
 }
});

Lorsque vous appelez l'URL, le message ressemble à ceci: 

NetworkError: 500 Internal Server Error - <a href="http://localhost/Web/Navigation/@Url.Action(%22Search%22,%22Chat%22)"></a>

Quelqu'un pourrait-il m'expliquer, s'il vous plaît, pourquoi le retourne-t-il comme ceci (la logique qui le sous-tend) et me propose-t-il une solution valable? Merci d'avance!
P.S .: Informations complémentaires:% 22 est la référence de codage d'URL pour le caractère << ">> 

javascriptjqueryajaxasp.net-mvc-3
18
Mihai Labo

Pour que cela fonctionne, Javascript doit être placé dans une vue Razor afin que la ligne

@Url.Action("Action","Controller")

est analysé par Razor et la valeur réelle remplacée.

Si vous ne souhaitez pas déplacer votre code Javascript dans votre vue, vous pouvez créer un objet de paramètres dans la vue, puis le référencer à partir de votre fichier Javascript.

par exemple.

var MyAppUrlSettings = {
    MyUsefulUrl : '@Url.Action("Action","Controller")'
}

et dans votre fichier .js

$.ajax({
 type: "POST",
 url: MyAppUrlSettings.MyUsefulUrl,
 data: "{queryString:'" + searchVal + "'}",
 contentType: "application/json; charset=utf-8",
 dataType: "html",
 success: function (data) {
 alert("here" + data.d.toString());
});

vous pouvez également utiliser les méthodes built in Ajax du framework dans HtmlHelpers, qui vous permettent de réaliser la même chose sans "polluer" vos vues avec du code JS.

54
Rob Stevenson-Leggett

vous avez une erreur de type dans l'exemple de code. Vous oubliez curlybracket after success

$.ajax({
 type: "POST",
 url: '@Url.Action("Search","Controller")',
 data: "{queryString:'" + searchVal + "'}",
 contentType: "application/json; charset=utf-8",
 dataType: "html",
 success: function (data) {
     alert("here" + data.d.toString());
 }
})

;

9
Yorgo

Un bon moyen de le faire sans avoir la vue impliquée peut être:

$.ajax({
    type: "POST",
    url: '/Controller/Search',
    data: { queryString: searchVal },
    success: function (data) {
      alert("here" + data.d.toString());
    }
});

Ceci essayera de POST à l'URL:

"http: // domaine/contrôleur/recherche (l'URL correcte pour l'action que vous souhaitez utiliser)" 

6
Sicypher

À partir de Rob's answer, j'utilise actuellement la syntaxe suivante. Comme la question a suscité beaucoup d'attention, j'ai décidé de la partager avec vous:

var requrl = '@Url.Action("Action", "Controller", null, Request.Url.Scheme, null)';
  $.ajax({
   type: "POST",
   url: requrl,
   data: "{queryString:'" + searchVal + "'}",
   contentType: "application/json; charset=utf-8",
   dataType: "html",
   success: function (data) {
   alert("here" + data.d.toString());
   }
  });
3
Mihai Labo

Un moyen simple d'accéder à l'URL Essayez ce code

 $.ajax({
     type: "POST",
      url: '/Controller/Search', 
     data: "{queryString:'" + searchVal + "'}",
     contentType: "application/json; charset=utf-8",
     dataType: "html",
     success: function (data) {
     alert("here" + data.d.toString());
    });
0
Rehmat Ali

à partir de mihai-labo answer, pourquoi ne pas sauter la déclaration de la variable requrl et placer le code générant l'url directement devant "url:", comme: 

 $.ajax({
    type: "POST",
    url: '@Url.Action("Action", "Controller", null, Request.Url.Scheme, null)',
    data: "{queryString:'" + searchVal + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "html",
    success: function (data) {
        alert("here" + data.d.toString());
    }
});
0
Mpilo Z