CSS文件在ASP.Net Core上的HTML代码中不起作用

Question

This is my first ASP.NET Core assignment and I am having troubles with applying CSS. They're all under the wwwroot folder. I can view it normally via a browser but when I'm trying to see my project at ASP.NET, everything is messed up. like this Thanks in advance for any help.

Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using oClock.Contexts;
using Microsoft.EntityFrameworkCore;
using oClock.Repositories;
using oClock.Models;
using oClock.Services;
using Newtonsoft.Json.Serialization;
using Microsoft.IdentityModel.Tokens;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using System.Text;
using System;
using oClock.Exceptions;

namespace oClock
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            //Jwt token authentication options
            services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme).AddJwtBearer(options =>
            {
                options.TokenValidationParameters = new TokenValidationParameters
                {
                    ValidateIssuer = true,
                    ValidateAudience = true,
                    ValidateIssuerSigningKey = true,
                    ValidIssuer = Configuration.GetValue<string>("JWT:Issuer"),
                    ValidAudience = Configuration.GetValue<string>("JWT:Audience"),
                    IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration.GetValue<string>("JWT:Key"))),
                    RequireExpirationTime = true,
                    ValidateLifetime = true,
                    ClockSkew = TimeSpan.Zero,
                };
            });

            services.AddMvc(options =>
            {
                options.Filters.Add(typeof(ExceptionFilter));
                options.Filters.Add(typeof(ModelValidationFilter));
            }).AddJsonOptions(a => a.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver());

            services.AddDbContext<DatabaseContext>(options =>
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

            services.AddScoped<IUserRepository, UserRepository>();
            services.AddScoped<IInformationRepository, InformationRepository>();
            services.AddScoped<IUserInformationRepository, UserInformationRepository>();

            services.AddScoped<IJwtTokenService, JwtTokenService>();
            services.AddScoped<IAuthenticationService, AuthenticationService>();
            services.AddScoped<IMailService, MailService>();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseStaticFiles();

            if (env.IsDevelopment())
            {
                app.UseBrowserLink();
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }



            using (var serviceScope = app.ApplicationServices.GetService<IServiceScopeFactory>().CreateScope())
            {
                var context = serviceScope.ServiceProvider.GetRequiredService<DatabaseContext>();
               // context.Database.EnsureCreated();
                context.Database.Migrate();
            }

            app.UseAuthentication();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}

    using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using oClock.Contexts;
using Microsoft.EntityFrameworkCore;
using oClock.Repositories;
using oClock.Models;
using oClock.Services;
using Newtonsoft.Json.Serialization;
using Microsoft.IdentityModel.Tokens;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using System.Text;
using System;
using oClock.Exceptions;

namespace oClock
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            //Jwt token authentication options
            services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme).AddJwtBearer(options =>
            {
                options.TokenValidationParameters = new TokenValidationParameters
                {
                    ValidateIssuer = true,
                    ValidateAudience = true,
                    ValidateIssuerSigningKey = true,
                    ValidIssuer = Configuration.GetValue<string>("JWT:Issuer"),
                    ValidAudience = Configuration.GetValue<string>("JWT:Audience"),
                    IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration.GetValue<string>("JWT:Key"))),
                    RequireExpirationTime = true,
                    ValidateLifetime = true,
                    ClockSkew = TimeSpan.Zero,
                };
            });

            services.AddMvc(options =>
            {
                options.Filters.Add(typeof(ExceptionFilter));
                options.Filters.Add(typeof(ModelValidationFilter));
            }).AddJsonOptions(a => a.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver());

            services.AddDbContext<DatabaseContext>(options =>
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

            services.AddScoped<IUserRepository, UserRepository>();
            services.AddScoped<IInformationRepository, InformationRepository>();
            services.AddScoped<IUserInformationRepository, UserInformationRepository>();

            services.AddScoped<IJwtTokenService, JwtTokenService>();
            services.AddScoped<IAuthenticationService, AuthenticationService>();
            services.AddScoped<IMailService, MailService>();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseStaticFiles();

            if (env.IsDevelopment())
            {
                app.UseBrowserLink();
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }



            using (var serviceScope = app.ApplicationServices.GetService<IServiceScopeFactory>().CreateScope())
            {
                var context = serviceScope.ServiceProvider.GetRequiredService<DatabaseContext>();
               // context.Database.EnsureCreated();
                context.Database.Migrate();
            }

            app.UseAuthentication();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}

Index.cshtml where I use css files

<!DOCTYPE HTML>
<!--
    Aesthetic by gettemplates.co
    Twitter: http://twitter.com/gettemplateco
    URL: http://gettemplates.co
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>oClock | Anasayfa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Randevu takip sitesi" />
    <meta name="keywords" content="randevu takip, randevu" />
    <meta name="author" content="Harun Uz/Furkan Gerçek/Abdullah Oluk" />




    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">

    <!-- Animate.css -->
    <link rel="stylesheet" href="~/css/animate.css">

    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="~/css/icomoon.css">
    <!-- Themify Icons-->
    <link rel="stylesheet" href="~/css/themify-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="~/css/bootstrap.css">

    <!-- Magnific Popup -->
    <link rel="stylesheet" href="~/css/magnific-popup.css">

    <!-- Magnific Popup -->
    <link rel="stylesheet" href="~/css/bootstrap-datepicker.min.css">

    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="~/css/owl.carousel.min.css">
    <link rel="stylesheet" href="~/css/owl.theme.default.min.css">

    <!-- Theme style  -->
    <!--        ****************SYTLE.CSS DOSYASINDA SORUN VAR!!!!*****************
        <link rel="stylesheet" href="~/css/style.css">
    -->
    <!-- Modernizr JS -->
    <
    <script src="~/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>
<body>

    <div class="gtco-loader"></div>

    <div id="page">


        <!-- <div class="page-inner">  id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-image: url(images/img_bg_2.jpg)" -->

        <header id="gtco-header" class="gtco-cover gtco-cover-md">

            <nav class="gtco-nav" role="navigation">
                <div class="gtco-container">

                    <div class="row">
                    <div class="col-sm-4 col-xs-12">
                    <div id="gtco-logo"><a href="index.html">oClock <em>.</em></a></div>
                    </div>
                    <div id="slogan" class="col-xs-8 text-right menu-1">RANDEVU YONETİM SİSTEMİ</div>

                    </div>
                </div>
                <!-- ************ GIRIS YAPMIS KULLANICININ GOREBILECEGI MENULER **************** -->
                <div id="header-login" class="gtco-container-login">
                <div class="col-xs-8-new text-right menu-1">
                <ul>
                <li><a href="#">Randevu Al</a></li>
                <li><a href="index.html">Takvimim</a></li>
                <li><a href="#">Profil</a></li>
                <li><a href="#">Çıkış Yap</a></li>
                </ul>
                </div>
                </div>

            </nav>

        </header>

        <div class="gtco-section">


        </div>


        <footer id="gtco-footer" role="contentinfo">
            <div class="gtco-container">
                <div class="row row-p   b-md">

                    <div class="col-md-6">
                        <div class="gtco-widget">
                            <h3>Hakkımızda</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eos molestias quod sint ipsum possimus temporibus officia iste perspiciatis consectetur in fugiat repudiandae cum. Totam cupiditate nostrum ut neque ab?</p>
                        </div>
                    </div>

                    <div class="col-md-6 col-md-push-1">
                        <div class="gtco-widget">
                            <h3>Get In Touch</h3>
                            <ul class="gtco-quick-contact">
                                <li><a href="#"><i class="icon-phone"></i> +1 234 567 890</a></li>
                                <li><a href="#"><i class="icon-mail2"></i> info@GetTemplates.co</a></li>
                                <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li>
                            </ul>
                        </div>
                    </div>

                </div>

                <div class="row copyright">
                    <div class="col-md-12">
                        <p class="pull-left">
                            <small class="block">&copy; 2018 Bütün hakları saklıdır.</small>
                            <small class="block">Designed by <a href="http://GetTemplates.co/" target="_blank">GetTemplates.co</a></small>
                        </p>
                        <p class="pull-right">
                            <ul class="gtco-social-icons pull-right">
                                <li><a href="#"><i class="icon-twitter"></i></a></li>
                                <li><a href="#"><i class="icon-facebook"></i></a></li>
                                <li><a href="#"><i class="icon-linkedin"></i></a></li>
                                <li><a href="#"><i class="icon-dribbble"></i></a></li>
                            </ul>
                        </p>
                    </div>
                </div>

            </div>
        </footer>
        <!-- </div> -->

    </div>

    <div class="gototop js-top">
        <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
    </div>

    <!-- jQuery -->
    <script src="~/js/jquery.min.js"></script>
    <!-- jQuery Easing -->
    <script src="~/js/jquery.easing.1.3.js"></script>
    <!-- Bootstrap -->
    <script src="~/js/bootstrap.min.js"></script>
    <!-- Waypoints -->
    <script src="~/js/jquery.waypoints.min.js"></script>
    <!-- Carousel -->
    <script src="~/js/owl.carousel.min.js"></script>
    <!-- countTo -->
    <script src="~/js/jquery.countTo.js"></script>

    <!-- Stellar Parallax -->
    <script src="~/js/jquery.stellar.min.js"></script>

    <!-- Magnific Popup -->
    <script src="~/js/jquery.magnific-popup.min.js"></script>
    <script src="~/js/magnific-popup-options.js"></script>

    <!-- Datepicker -->
    <script src="~/js/bootstrap-datepicker.min.js"></script>


    <!-- Main -->
    <script src="~/js/main.js"></script>

</body>
</html>

Answer 1

Why don't you use your Shared/_Layout.cshtml for your layout? Then edit your _Viewstart to this:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

This will keep your layout on every page the same. except if you exclude it like this:

@{
   Layout = null;
}

Answer 2

Try to use ASP.NET Core MVC. It comes with good basic separation of concern.

And instead of repeating your header and footer for html in every cshtml of your project, why not use _Layout.cshtml?