Null Reference Null Reference - 4 months ago 28
Javascript Question

How to get base URL of an MVC application using javascript

How do I get the base URL using javascript?

E.g., When I browse my site from visual studio, and if my URL is

http://localhost:20201/home/index
, I would want to get
http://localhost:20201


If I host my site on IIS, and if my virtual directory name is MyApp and the URL is
http://localhost/MyApp/home/index
, I would want to get
http://localhost/MyApp


I tried using
location.protocol
+
location.hostname
(and
location.host
), they work fine when i browse my site via visual studio, but when I host it on IIS, I get
http://localhost
, the /MyApp is truncated off.

Answer

You should avoid doing such detection in JavaScript and instead pass the value from the .NET code. You will always risk running into problems with urls like http://server/MyApp/MyApp/action where you cannot know which is the name of a controller and which the path to the application.

In your Layout.cshtml file (or wherever you need it) add the following code:

<script type="text/javascript">
    window.applicationBaseUrl = @Html.Raw(HttpUtility.JavaScriptStringEncode(Url.Content("~/"), true));
    alert(window.applicationBaseUrl + "asd.html");

    // if you need to include host and port in the url, use this:
    window.applicationBaseUrl = @Html.Raw(HttpUtility.JavaScriptStringEncode(
        new Uri(
                   new Uri(this.Context.Request.Url.GetLeftPart(UriPartial.Authority)),
                   Url.Content("~/")
               ).ToString(), true));
    alert(window.applicationBaseUrl + "asd.html");
</script>

The new Uri() part is needed so that the URL is always combined correctly (without manually checking if each part starts or ends with / symbol).