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
– Erik Funkenbusch, Commented Apr 3, 2012 at 7: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
– dougajmcdonald, Commented Apr 3, 2012 at 7:11
its called from chtml,but it is written in an external file. — Mihai Labo
– Mihai Labo, Commented Apr 3, 2012 at 7: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
– Yorgo, Commented Apr 3, 2012 at 7:15

Asef Hossini · Accepted Answer · 2021-08-10 04:25:36Z

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, 2021 at 4:25

Asef Hossini

7631 gold badge9 silver badges11 bronze badges

answered Apr 3, 2012 at 7:09

Rob Stevenson-Leggett

35.8k21 gold badges93 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mihai Labo Over a year ago

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.( <script type="text/javascript">Your Code</script>). How can I reference that into an external javascript: <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.treeview.js")"></script>

xr280xr Over a year ago

I just add the URLs to hidden inputs then access them from the external .js file.

cytek04 Over a year ago

I like to put the URL inside a data attribute of the form. Just a cleaner approach IMHO.

Yorgo · Accepted Answer · 2012-04-03 07:12:30Z

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 3, 2012 at 7:12

Yorgo

2,6781 gold badge17 silver badges25 bronze badges

1 Comment

Mihai Labo Over a year ago

I have the currybracket but it doesn't reach that. The issue is within the Url.Action call

thetipsyhacker · Accepted Answer · 2016-07-11 13:38:03Z

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, 2016 at 13:38

answered Jun 9, 2016 at 22:02

thetipsyhacker

1,4124 gold badges20 silver badges41 bronze badges

3 Comments

Mihai Labo Over a year ago

Dont forget the slash before 'Controller'. It will create an incorrect URL. byut yes, this is what I use now.

Paul Over a year ago

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.

Spencer Sullivan Over a year ago

As a note, this will not work if you have to cross Area boundaries.

Community · Accepted Answer · 2017-05-23 12:09:41Z

4

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

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Sep 7, 2012 at 9:12

Mihai Labo

1,0822 gold badges17 silver badges40 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:02:00Z

2

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

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Mar 30, 2017 at 9:47

Mpilo Z

1191 silver badge7 bronze badges

Comments

Rehmat Ali · Accepted Answer · 2018-03-16 11:44:40Z

2

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

answered Mar 16, 2018 at 11:44

Rehmat Ali

331 silver badge8 bronze badges

Collectives™ on Stack Overflow

Ajax call Into MVC Controller- URL Issue

6 Answers 6

3 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related