简体   繁体   English

如何在 ASP.net Core 中添加 js 和 css 文件?

[英]How to add js and css files in ASP.net Core?

I've been assigned to migrate an application from MVC into ASP.net Core, I'm new to ASP.net Core.我被指派将应用程序从 MVC 迁移到 ASP.net Core,我是 ASP.net Core 的新手。 In MVC we have BundleConfig.cs and in there we add references to our css and js files, how does it work in ASP.net Core?在 MVC 中,我们有BundleConfig.cs ,在那里我们添加了对 css 和 js 文件的引用,它在 ASP.net Core 中是如何工作的? Let's say that I created a test.js and a MyStyle.css class, which is the best way to add references to it in every view?假设我创建了一个test.js和一个MyStyle.css类,这是在每个视图中添加对它的引用的最佳方式? Should I place the .js and .css files inside wwwroot/js and wwwroot/css ?我应该将.js.css文件放在wwwroot/jswwwroot/css吗?

I added the references inside the _Layout view, inside the <environment> tags:我在_Layout视图中添加了引用,在<environment>标签内:

<environment names="Development">
  <link rel="stylesheet" href="~/css/MyCss.css" />
</environment>

If anyone knows a better way I would welcome it如果有人知道更好的方法,我会欢迎它

The better way to do it is to use: app.UseStaticFiles();更好的方法是使用: app.UseStaticFiles(); inside startup.cs before routing.路由前在startup.cs

回答这个问题可能有点晚了,但是对于那些通过 Google 来到这里的人:我发现添加asp-append-version="true"对我有用,因为其他答案中给出的所有其他选项已经在_Layout.cshtml提供。

I put the JS and CSS files in an assets folder in the wwwroot folder of my application and then used link tags in my _Layout.cshtml to bring in the styles.我将 JS 和 CSS 文件放在我的应用程序的wwwroot文件夹中的资产文件夹中,然后在我的_Layout.cshtml使用链接标签来引入样式。 Steven Sanderson has part a of a blog post where he talks about adding third party libraries here . Steven Sanderson 在博客文章的一部分中谈到了在此处添加第三方库。

You could also do some sort of setup using webpack.您还可以使用 webpack 进行某种设置。 I admit, this topic is not very straight forward.我承认,这个话题不是很直接。

In _layout:在_布局中:

@await RenderSectionAsync("Styles", required: false)

Then your view:那么你的观点:

@section Styles{ your CSS }

Information from: https://dev.to/amjadmh73/loading-custom-css-files-in-razor-pages-4no9信息来自: https : //dev.to/amjadmh73/loading-custom-css-files-in-razor-pages-4no9

I put the CSS files at ~/wwwroot/cs, and the JavaScript files at ~/wwwroot/js.我把 CSS 文件放在 ~/wwwroot/cs,JavaScript 文件放在 ~/wwwroot/js。 Then I followed the format of the default _Layout.cshtml file.然后我按照默认的 _Layout.cshtml 文件的格式。

<head>
   . . .
   <link type="text/css" rel="stylesheet" href="~/css/myCSS.min.css" />
   . . .
</head>

<body>
   . . .
   <script src="~/js/myJS.min.js" asp-append-version="true"></script>

   @RenderSection("Scripts", required: false)
   . . .
</body>

Static files such as Image files, CSS files and JavaScript JS files does not work in ASP.Net Core unless it is placed in proper location with the project and also some settings are set.图像文件、CSS 文件和 JavaScript JS 文件等静态文件在 ASP.Net Core 中不起作用,除非将其放置在项目的适当位置并设置一些设置。 And add this line in start up.css befor routing.并在路由前在 start up.css 中添加这一行。

 app.UseStaticFiles();

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM