ASP.NET MVC 5 C# URL is different during Debugging/Deploying between IIS Express and Local IIS

Question

I am from a Classic ASP background and now trying to migrate into ASP.NET MVC. I am confused when I debug/deploy using IIS Express vs Local IIS.

For IIS Express when I first launch my web when I am at the tab Login.cshmtl in Visual Studio 2017. I will go to the following URL http://localhost:44300/

If I switch to Local IIS I will go to this URL http://localhost/BRO

With a BRO there, my subsequent routing will not work and all my glyphicons referencing are pointing at the wrong path. All other referencing is also not working

==========================================================================

Besides the font referencing, All other referencing will go haywire if the Login page fire-up with different URL

  ***I am not sure which url I will work***
        var url = 'Login' **This works when http://localhost:44300/Home/Login***
  ****
        var url = 'Home/Login' **This works when only http://localhost:44300***

  **In the http://localhost/BRO situation**

        var url= **I am not sure what will work here**

        var formData = $('#formLogin').serialize();

        $.ajax({

            url: url,
            type: "POST",

   ***Another anchor tag with href will reference wrongly*** 
   <a href="/Password/ForgotPassword" class="btn btn-link">Forgot password?</a>

===========================================================================

Web

Solution Explorer

IIS

How do I make the URL to be the same? Please help

Answer 1

Thanks to @Chetan Ranpariya and @LexLi. I have figured it out that it is actually IIS.

After tweaking around I manage to have the following setting and everything works

At VS2017 Project Properties -> Web

And clicking the run button

I get just localhost:

IIS settings

When I click

I also get

The issue is when I hit create virtual directory, VS2017 actually created a sub site thingy under my Default Web Site, so I keep getting /BRO

Answer 2

use this type url for glyphicons:

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');

}