Manage URL when debugging from Visual Studio 2015

Question

I have an asp.net mvc site to which I've added some knockoutjs. The knockout code makes ajax request for data from the controllers e.g.

$.getJSON(BASE_URL + 'MyTasks/GetDataPage', { userKey: vm.UserKey, pageSize: pageSize }, function (returnedPayload) {
                data = returnedPayload.filter(function (item) {
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                });
                self.setPagingData(data,page,pageSize);

The BASE_URL constant I set in the <head> of my layout razor page as follows:

<script type="text/javascript">
    var BASE_URL = '/bamportal/';
</script>

All works fine when the website is deployed. However, when I run the website from VS by hitting F5 then I get a 404 such as:

http://localhost:49601/bamportal/MyTasks/GetDataPage?userKey=2&pageSize=50 Failed to load resource

If it had tried to address "http://localhost:49601/MyTasks/GetDataPage" (without the "/bamportal/") it would work.

What's the best solution for this problem?

Marko · Answer 1 · 2016-04-20T20:46:44.113

Your code should never know where the site will be hosted, you should use the correct helpers to determine where the action/content is located, this will prevent any issues with paths. Use Url.Content and Url.Action they will generate the correct path/url in the code.

As an example your action needs to point to the "MyTasks", "GetDataPage"

In your razor code you should have something like

<div id="urls" data-url="@Url.Action("ActionMethodName","YourControllerName")"></div>

Then in your get code get that stored url

$.getJSON($("#urls").data("url"),

To elaborate further this code will work on any environment (production, debug, iis, any location) without any developer worry or tweaking with config files or any other process. Tomorrow if you need to host your site on "osportal" not "bamportal" no changes need to be made, this should not be part of your code base. One of the biggest benefits is that if the controller or action ever change the compiler will let you know that the url does not exist and you can fix it. Hardcoding paths/urls/location is a very bad/unmaintainable practice.

score 1 · Accepted Answer · edited May 23 '17 at 12:33

Quick and dirty:

<script type="text/javascript">
    var BASE_URL = '@Constants.BaseUrl';
</script>

where Constants is a static class defined as:

public static class Constants {
    #if DEBUG
    public const string BaseUrl = "/";
    #else
    public const string BaseUrl = "/bamportal/";
    #endif    
}

So when you compile your application in debug configuration you will get /, while in release you will get /bamportal/.

As alternative, a more complex and versatile approach could be obtained using Configuration Transforms and appSettings from Web.config:

<script type="text/javascript">
    var BASE_URL = '@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"];';
</script>

This, of course, will be extremely useful in scenarios where you need to deploy front-end and back-end on different domains/urls.

Thanks Federico, I used the Constants approach and it worked great for me. — Rob Bowman, Apr 21 '16 at 06:36

Manage URL when debugging from Visual Studio 2015

2 Answers2