CODEWITHSUNDEEP
htmlcssasp.netasp.net-mvclayout
Cactuser
Cactuser

Reputation: 98

ASP.NET MVC multiple layouts

im trying to use multiple layouts for each different page using ASP.NET MVC. Default connection of Routing config works fine as you can see Index Screenshot. If i make register page as default connection it also works without any problems.

However, when accessing register page from Index by clicking button above, CSS seems to be not readen as you can see Register Screenshot.

Kayit_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kayitol :: @ViewBag.Title</title>


    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
    <link rel="stylesheet" href="assets/css/Brands.css">
    <link rel="stylesheet" href="assets/css/Features-Boxed.css">
    <link rel="stylesheet" href="assets/css/Footer-Clean.css">
    <link rel="stylesheet" href="assets/css/Highlight-Blue.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/Map-Clean.css">
    <link rel="stylesheet" href="assets/css/Navigation-Clean1.css">
    <link rel="stylesheet" href="assets/css/Registration-Form-with-Photo.css">
    <link rel="stylesheet" href="assets/css/Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/Team-with-rotating-cards.css">
</head>
<body>
    <nav class="navbar navbar-default navigation-clean" style="font-family:Ubuntu, sans-serif;font-size:18px;">
        <div class="container">
            <div class="navbar-header"><a class="navbar-brand" href="#"> <img class="img-responsive" src="assets/img/logo_resized.png" style="width:210px;height:61px;"></a><button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav navbar-right" style="padding:34px;">
                    <li role="presentation"><a href="#" data-bs-hover-animate="flash">Aramıza katıl</a></li>
                    <li role="presentation"><a href="login" data-bs-hover-animate="flash">Giriş </a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div data-bs-parallax-bg="true" class="register-photo" style="background-image:url(assets/img/White-Background-647.jpg);background-position:center;background-size:cover;">
        <div class="form-container">
            <form method="post">
                <h2 class="text-center"><strong>Hemen</strong> bir hesap yaratın.</h2>
                <div class="form-group"><input class="form-control input-sm" type="email" name="kullanici_adi" required="" placeholder="Kullanıcı adı" autofocus=""></div>
                <div class="form-group"><input class="form-control" type="email" name="kullanici_isim" placeholder="İsim"></div>
                <div class="form-group"><input class="form-control" type="email" name="kullanici_soyad" placeholder="Soyad"></div>
                <div class="form-group"><input class="form-control" type="date" name="kullanici_dogumtarihi"></div>
                <div class="form-group"><input class="form-control" type="email" name="email" required="" placeholder="Email"></div>
                <div class="form-group"><input class="form-control" type="password" name="password" required="" placeholder="Şifre"></div>
                <div class="form-group"><input class="form-control" type="password" name="password-repeat" required="" placeholder="Şifre (tekrar)"></div>
                <div class="form-group">
                    <div class="checkbox"><label class="control-label"><input type="checkbox">Kuralları okudum ve kabul ediyorum.</label></div>
                </div>
                <div class="form-group"><button class="btn btn-primary btn-block" type="submit" style="background-color:rgba(0,102,127,0.72);">Üye ol</button></div><a href="#" class="already">Zaten hesabınız var mı? Hemen giriş yapın.</a>
            </form>
        </div>
    </div>
    <div class="footer-clean">
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-4 item">
                        <h3>İletişim </h3>
                        <ul>
                            <li><a href="#">E-mail: [email protected]</a></li>
                            <li>Telefon: +90 232 224 40 08<a href="#"> </a></li>
                            <li>Online müşteri hizmetleri</li>
                        </ul>
                    </div>
                    <div class="col-md-3 col-sm-4 item">
                        <h3>Hakkımızda </h3>
                        <ul>
                            <li><a href="#">birsorumvar.com </a></li>
                            <li>Takım </li>
                            <li><a href="#">S.S.S </a></li>
                        </ul>
                    </div>
                    <div class="col-md-3 col-sm-4 item">
                        <h3>Bizimle çalışın</h3>
                        <ul>
                            <li><a href="#">Açık pozisyonlar</a></li>
                        </ul>
                    </div>
                    <div class="col-md-3 item social">
                        <a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a>
                        <p class="copyright">birsorumvar © 2018</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/bs-animation.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
    <script src="assets/js/Simple-Slider.js"></script>
    @RenderBody()
</body>
</html>

Kayitol.cshtml

    @{
    ViewBag.Title = "Kayitol";
    Layout = "~/Views/Shared/Kayit_Layout.cshtml";
     }

KayitController.cs

public class KayitController : Controller
{
    // GET: Kayit
    public ActionResult Kayitol()
    {
        return View();
    }
}
}

Upvotes: 2

Views: 418

Answers (1)

Emre Kabaoglu
Emre Kabaoglu

Reputation: 13146

Obviously, the relative path of css files can't be found. (The browser tries to find them with ...kayit/kayitol/assets/...) You should navigate root the relative paths by starts with /

<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">

Also, I suggest you to use Bundles to import static css and js files.

 bundles.Add(new StyleBundle("~/assets/css").Include(
      "~/assets/bootstrap/css/bootstrap.min.css");

Upvotes: 1

Related Questions