Ajax appel Into MVC Controller – Url Issue

J'ai examiné les questions jQuery / MVC précédemment posées et je n'ai pas trouvé de réponse viable.

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, la publication ressemble à:

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

Quelqu'un pourrait-il m'expliquer pourquoi il le retourne comme ça (la logique derrière) et m'offrez une solution valide. Merci d'avance!
PS: Informations supplémentaires:% 22 est la référence d'encodage URL pour le caractère << ">>

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 est remplacée.

Si vous ne souhaitez pas déplacer votre Javascript dans votre vue, vous pouvez regarder la création d'un objet de configuration dans la vue, puis faire référence à celle 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()); });

Ou encore envisager de tirer parti des méthodes Ajax intégrées au cadre dans les HtmlHelpers qui vous permettent d'atteindre les mêmes résultats sans «polluer» vos vues avec le code JS.

Vous avez une erreur de type dans l'exemple du code. Vous oubliez le curlybracket après le 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()); } })

;

Une bonne façon de le faire sans que l'on s'intéresse soit:

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

Cela tentera de POSTER sur l'URL:

" Http: // domain / Controller / Search (qui est l'URL correcte pour l'action que vous souhaitez utiliser)"

À partir de la réponse de Rob , j'utilise actuellement la syntaxe suivante. Puisque la question a beaucoup attiré l'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()); } });

À partir de la réponse de mihai-labo , pourquoi ne pas ignorer la totalité de la variable requrl et mettre le code de génération d'URL directement en face de "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()); } });