MVC routing and deployment

Question

I have been struggling with this for a lot of days now. I am a novice to MVC and I m stuck with these issues. I have a mvc application. Following is my route.config file which I understand from a previous post is not proper. My pages are fairly straightforward, there are no query strings, except for one page. every page is controller/view format. What would be the correct routing config for such a configuration. If somebody can help me with that with a little explanation it ll be great. When I deploy that application in IIS, I m having trouble bcoz of this routing. when I deploy in IIS and I do a browse it directly goes to my login page which is good but internally its going to

    http://localhost/Home/accountdetails 

instead of going to

    http://localhost/MyWebsite/Home/accountdetails 

due to which I m getting a 404 error.I don understand how to set this up. Also my images which are in content folder are not showing up either bcoz they are referring to

http://localhost/Content/Images/myimage 

while they are actually under

http://localhost/MySite/Content/Images/myimage 

how can I correct these issues. Please provide some assistance here.

Here is my route.config

public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
                name: "Home",
                url: "{controller}/{action}/{id}",
                defaults: new
                {
                    controller = "Home",
                    action = "Login",
                    id =
                        UrlParameter.Optional
                }
            );

        routes.MapRoute(
        name: "Invoice",
        url: "{controller}/{action}/{q}",
        defaults: new
        {
            controller = "Home",
            action = "GetInvoice",
            id =
                UrlParameter.Optional
        }
       );

        routes.MapRoute(
           name: "Error",
           url: "{controller}/{action}/{id}",
           defaults: new
           {
               controller = "Home",
               action = "Error",
               id =
                   UrlParameter.Optional
           }
       );
        routes.MapRoute(
           name: "ResetPassword",
           url: "{controller}/{action}/{id}",
           defaults: new
           {
               controller = "Home",
               action = "ResetPassword",
               id
                   = UrlParameter.Optional
           }
       );
        routes.MapRoute(
          name: "Accounts",
          url: "{controller}/{action}/{id}",
          defaults: new
          {
              controller = "Home",
              action = "AccountStatus",
              id
                  = UrlParameter.Optional
          }
      );

        routes.MapRoute(
           name: "Register",
           url: "{controller}/{action}/{id}",
           defaults: new
           {
               controller = "Home",
               action = "Register",
               id =
                   UrlParameter.Optional
           }
       );


        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new
            {
                controller = "Home",
                action = "Login",
                id =
                    UrlParameter.Optional
            }
        );
    }
}

Update

For images I am setting the background image as below

<div class="bannerOuter" style="background-image: url('../../Content/Images/AccountStatus_cropped-23.jpg');">

but after publishing when I run the application and I press f12 I see that its referring to the below url for the image and throws a 404 error.

http://localhost/Content/Images/Accounts_cropped-23.jpg 

But I can browse to it if I change the url to add my website name that I specified in IIS.

http://localhost/MyWebsite/Content/Images/Accounts_cropped-23.jpg

So this is the problem what should be my image path in this case.

Edit

  @Html.EncodedActionLink(string.Format("{0} Statement", @Convert.ToDateTime(@invoiceItem.InvoiceDate).ToString("MMMM")), "GetInvoice", "Home", new { accountNumber = Model.CustomerModel.AccountNumber, dueDate = (Convert.ToDateTime(invoiceItem.DueDate).ToString("dd-MMM-yyyy")) }, new { target = "_blank", @class = "Link" })

So the url here is coming as

 http://localhost/Home/GetInvoice?q=ZDmgxmJVjTEfvmkpyl8GGWP4XHfvR%2fyCFJlJM1s0vKj4J6lYJWyEA4QHBMb7kUJq

how can I change it to be

 http://localhost/MySite/Home/GetInvoice?q=ZDmgxmJVjTEfvmkpyl8GGWP4XHfvR%2fyCFJlJM1s0vKj4J6lYJWyEA4QHBMb7kUJq

Answer 1

Relative paths in inline CSS are problematic because it will be relative to the current URL. So if you go to http://localhost/MySite/Home/Login you will need to use ../../Content/myimage.png. But, if you go to http://localhost/MySite, the default controller and action (Home/Login) from route.config will kick in, and now the relative path to the image is Content/myimage.png because the controller and action are not explicitly in the URL. The same problem will happen if you go to http://localhost/MySite/Home; the default action (Login) will be used and the relative path is ../Content/myimage.png.

The best solution is to use styles in CSS files and not use inline styles; that way, the image URLs are always relative to the CSS file, whose URL never varies. Just be aware if you use bundling in BundleConfig.cs you need to make sure the path stays consistent MVC Bundling and CSS relative URLs

But if you need to use inline styles, you can use @Url.Content() to always get the correct path, with ~ being the root of your app:

style="background-image: url('@Url.Content("~/Content/myimage.png")'"