Layout file not loaded and routing issue MVC?

Question

my route config file is

 routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

by default login is loaded login controller is

 [Route("")]
    public ActionResult Login()
    {
        ViewBag.CustomerId = 0;
        ViewBag.Country = "pak";
        ViewBag.Email = "nouman@softconsults.com";
        return View();
    }

url default load layout page with correct design http://localhost:2738/ but same view with url when click login submit button or called by url http://localhost:2738/Login/Login appears not loaded properly see image for details

similar problem with other file my master layout page not loaded but in sign in click my url add login and continue adding incase wrong user password but correct user password work sucess fully and next page only not load its master here url become in case wrong user password that continue adding login

http://localhost:2738/Login/Login/Login/Login

CSS refrence at top

  <link rel="stylesheet" href="@Url.Content("Website/CSS/supersized.css")" type="text/css" media="screen " />
<link href="@Url.Content("http://fonts.googleapis.com/css?family=Oxygen:400,300,700")" rel='stylesheet'  type='text/css'>

<link href="@Url.Content("Website/CSS/custom.css.css")" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js")"></script>

<script type="text/javascript" src="@Url.Content("Website/JS/jquery.easing.min.js")"></script>

<script type="text/javascript" src="@Url.Content("Website/JS/supersized.3.2.7.js")"></script>


<script type="text/javascript">

    jQuery(function ($) {

        $.supersized({

            // Functionality
            slide_interval: 3000,       // Length between transitions
            transition: 3,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed: 700,      // Speed of transition

            // Components
            slide_links: 'blank',   // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides: [           // Slideshow Images
                                                { image: 'Website/Main/banner_1.png', },
                                                { image: 'Website/Main/banner_2.png', },
                                                { image: 'Website/Main/banner_3.png', },
                                                { image: 'Website/Main/banner_4.png', },
                                                { image: 'Website/Main/banner_5.png', },
                                                { image: 'Website/Main/banner_6.png', },
                                                { image: 'Website/Main/banner_7.png', },
                                                { image: 'Website/Main/banner_8.png', }

            ]

        });
    });

</script>

At bottom of page login and home index view

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script  src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
 <script src="@Url.Content("~/Scripts/jquery.validate-vsdoc.js")"></script>
 <script  src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
 <script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
 <script  src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>
 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
 <script  src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

Answer 1

Instead of using direct relative path, try to use below method.

<link href="@Url.Content("~/Website/CSS/supersized.css")" rel="stylesheet" type="text/css" />

You can use this approach for CSS, JS, Images as well.