Asp.Net WebApi $.get works in Development but fails when deployed to IIS

Question

I have the following simple jquery get statement that calls a WebApi on my server:

$.get('api/DataAPI?tenantId=1&datatype="Contacts"&actionname="ActiveOnly"', GetDataRetrieved);

This works fine in visual studio. I checked the network traffic in chrome and it shows the following request created:

http://localhost:61882/api/DataAPI?tenantId=1&datatype=%22Contacts%22&actionname=%22ActiveOnly%22

I have now deployed my website to IIS and the api call now fails with a 404 not found. I checked the network traffic in chrome and can see the problem:

http://localhost/api/DataAPI?tenantId=1&datatype=%22Contacts%22&actionname=%22ActiveOnly%22

Where the website when deployed to IIS is located at http://localhost/MyWebSite. So the call should go to:

http://localhost/MyWebSite/api/DataAPI?tenantId=1&datatype=%22Contacts%22&actionname=%22ActiveOnly%22

What is the correct syntax in my $.get call so that it works for both visual studio and deployed to IIS (I would love to use razor @Url.Content but that doesnt work in the javascript block)?

Thanks in advance

edit: This is the markup for the entire .cshtml page:

@{
ViewBag.Title = "MyWebSite";
Layout = "~/Views/Shared/SiteLayout.cshtml";
}

@section HeaderContent
{
<script type="text/javascript" src="@Url.Content("~/assets/scripts/App/Base64EncodeDecode.js")"></script>
 }

<script type="text/javascript">   
    $(function () {               
    $("#TestButton").click(function () {            
        $.get('api/DataAPI?tenantId=1&datatype="Contacts"&actionname="ActiveOnly"', GetDataRetrieved);
    });
});

function GetDataRetrieved(data) {        
     //alert(base64_decode(data));
    alert(data);
}   
</script>

<button id="TestButton">Test Button</button>

score 0 · Answer 1 · answered Jul 26 '12 at 02:17

0

You probably need to add a relative URL to your jQuery and other .js files path i.e.

<script src="<%= ResolveClientUrl("~/Scripts/jQuery-v1.x.js") %>" type="text/javascript"></script>

answered Jul 26 '12 at 02:17

Seany84

5,526
5
42
67

I dont think you can use Razor/MVC tags in javascript blocks. this is my test block: – Matt Jul 26 '12 at 02:22
when you say `I dont think you can use Razor/MVC tags in javascript blocks` have you tried inputting what I suggested? Is it throwing an error (runtime/compile time)? – Seany84 Jul 26 '12 at 02:25
You can definitely use Razor anywhere on a Razor page – Andrew Burgess Jul 26 '12 at 02:37
Have added the markup of the entire page in the question. I also changed the $.get link to use the ResolveClientUrl and got a different error. It is now trying to access the url with: http://localhost:61882/%3C%=%20ResolveClientUrl(%22api/DataAPI?tenantId=1&datatype=%22Contacts%22&actionname=%22ActiveOnly%22%22)%20%%3E – Matt Jul 26 '12 at 02:44
Regarding embedding Razor in Javascript: http://stackoverflow.com/questions/4204669/asp-net-mvc3-rc-razor-views-syntax-for-embedding-code-inside-javascript-bloc – Andrew Burgess Jul 26 '12 at 02:45

score 0 · Accepted Answer · answered Jul 26 '12 at 02:43

Assuming that your Javascript is located directly on the page:

$.get('@Url.Action("DataAPI", "API", new {tenantId = 1, datatype = "Contacts", actionname="ActiveOnly"})', GetDataRetrieved);

should be what you need

If it's on another page, I like to associate the needed URL with the HTML element, and then use jQuery to extract it.

<div id='foo' data-url='@Url.Action("DataAPI", "API")'>
</div>

and then your Javascript would look like:

$.get($('#foo').data('url'), {tenantId: 1, datatype: "Contacts", actionname: "ActiveOnly"}, GetDataRetrieved);

Asp.Net WebApi $.get works in Development but fails when deployed to IIS

2 Answers2