Broken links when MVC project is uploaded to the WebServer

Question

I have a MVC project and I publish him in my Web Server with IIS

but some button, I have the following code

Javascript

$("#btn").click(function () {
   window.location.href = "/Home/Login";
});

This is just a sample.

When I click in my button, the Login method of my Home Controller is triggered. This works fine in localhost.

When I put the project in the server, I need change the href to put the folder name where the application are in wwwroot

$("#btn").click(function () {
   window.location.href = "/Web/Home/Login";
});

How can I prevent this ? I have too many images and functions that don't use the folder name in wwwroot.

Dennis R · Accepted Answer · 2014-06-12T18:52:28.147

2

You can write this in your razor view

<script type="text/javascript">
   var baseUrl = '@Url.Content("~")';
</script>

and you can refer baseUrl in your js code

$("#btn").click(function () {
    window.location.href = baseUrl + "Home/Login";
});

The baseUrl will give you the result /Web/ and it should direct your call to the correct path.

edited Jun 12 '14 at 18:52

answered Jun 12 '14 at 18:44

Dennis R

score 0 · Answer 2 · answered Jun 12 '14 at 18:57

You can use the Url.Action helper method. It Generates a fully qualified URL to an action method.

HTML

<button id='btn' data-url='@Url.Action("Login","Home")'>Login</button>

JS

$("#btn").click(function () {
   window.location.href = $(this).data('url');
});

2 Answers2