Ajax call Into MVC Controller- URL Issue

Question

I've looked at the previously-posted jQuery/MVC questions and haven't found a workable answer.

I have the following JavaScript code:

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

When calling the Url the post looks like:

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

Why does it return it like this (the logic behind it) and what's a solution?

P.S.: Additional Information: %22 is the URL Encoding Reference for <<">> character

Is your Javascript in an external JS file? Or in the cshtml file? — Erik Funkenbusch, Apr 03 '12 at 07:10
I believe the fact you have @Url.Action("Search","Controller") inside single quotes is forcing JS to treat it as a string, rather than resolving the URL from the routing system. — dougajmcdonald, Apr 03 '12 at 07:11
its called from chtml,but it is written in an external file. — Mihai Labo, Apr 03 '12 at 07:11
if you dont write that script to cshtml file, then Razor tags wont be compiled. You have to write that script inside .cshtml file — Yorgo, Apr 03 '12 at 07:15

score 60 · Accepted Answer · edited Aug 10 '21 at 04:25

60

In order for this to work that JavaScript must be placed within a Razor view so that the line

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

is parsed by Razor and the real value replaced.

If you don't want to move your JavaScript into your View you could look at creating a settings object in the view and then referencing that from your JavaScript file.

e.g.

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

and in your .js file:

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

or alternatively look at levering the framework's built in Ajax methods within the HtmlHelpers which allow you to achieve the same without "polluting" your Views with JS code.

edited Aug 10 '21 at 04:25

Asef Hossini

655
8
11

answered Apr 03 '12 at 07:09

Rob Stevenson-Leggett

35,279
21
87
141

Ok. I might be a pain in the bum with this question: I have a view file that I've included the code you provided.( ). How can I reference that into an external javascript: – Mihai Labo Apr 03 '12 at 07:27
1

I just add the URLs to hidden inputs then access them from the external .js file. – xr280xr Jul 17 '15 at 21:33
Thank you. Solved after hours of frustration. – drzounds Sep 05 '18 at 02:42
I like to put the `URL` inside a data attribute of the `form`. Just a cleaner approach IMHO. – cytek04 Oct 11 '22 at 23:44

thetipsyhacker · Answer 2 · 2016-07-11T13:38:03.417

12

A good way to do it without getting the view involved may be:

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

This will try to POST to the URL:

"http://domain/Controller/Search (which is the correct URL for the action you want to use)"

edited Jul 11 '16 at 13:38

answered Jun 09 '16 at 22:02

thetipsyhacker

1,402
4
18
39

Dont forget the slash before 'Controller'. It will create an incorrect URL. byut yes, this is what I use now. – Mihai Labo Jul 11 '16 at 10:45
Unless you need server-side logic on the url, this is cleaner. Also, MVC will cast any stringified json in the data property to the acton's parameter as long as the shape of the json matches the shape of the c# object. – Paul Aug 14 '17 at 16:46
As a note, this will not work if you have to cross Area boundaries. – Spencer Sullivan Nov 22 '19 at 17:12

score 12 · Answer 3 · answered Apr 03 '12 at 07:12

12

you have an type error in example of code. You forget 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());
 }
})

;

answered Apr 03 '12 at 07:12

Yorgo

2,668
1
16
24

1

I have the currybracket but it doesn't reach that. The issue is within the Url.Action call – Mihai Labo Apr 03 '12 at 07:14

score 4 · Answer 4 · edited May 23 '17 at 12:09

Starting from Rob's answer, I am currently using the following syntax.Since the question has received a lot of attention,I decided to share it with you :

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

score 2 · Answer 5 · edited May 23 '17 at 12:02

starting from mihai-labo's answer, why not skip declaring the requrl variable altogether and put the url generating code directly in front of "url:", like:

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

score 2 · Answer 6 · answered Mar 16 '18 at 11:44

Simple way to access the Url Try this 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());
    });

Ajax call Into MVC Controller- URL Issue

6 Answers6

Linked