正文 

当前位置： 首页 > 问答 >

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

     2023-03-30     296

关键词：

【中文标题】如何在 ASP.net Core 中添加 js 和 css 文件？【英文标题】：How to add js and css files in ASP.net Core? 【发布时间】：2016-10-03 19:35:44 【问题描述】：

我被分配将应用程序从 MVC 迁移到 ASP.net Core，我是 ASP.net Core 的新手。在 MVC 中我们有 BundleConfig.cs 并在其中添加对我们的 css 和 js 文件的引用，它在 ASP.net Core 中是如何工作的？假设我创建了一个test.js 和一个MyStyle.css 类，这是在每个视图中添加对它的引用的最佳方式吗？我应该将.js 和.css 文件放在wwwroot/js 和wwwroot/css 中吗？

【问题讨论】：

【参考方案1】：

我在_Layout 视图内添加了引用，在<environment> 标签内：

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

如果有人知道更好的方法，我会欢迎它

【讨论】：

你知道它对特定的 css 视图文件是如何工作的吗？ 我认为这个答案是不完整的。为此，您需要将css 文件夹放在wwwroot 文件夹中。另外，还需要在Startup类的Configure方法中添加app.UseStaticFiles()。 您应该将 css 文件放在什么位置？ @Shimmy 查看 wwwroot 文件夹【参考方案2】：

更好的方法是在路由之前使用：app.UseStaticFiles(); inside startup.cs。

【讨论】：

你能解释一下为什么这样更好吗？ 欲了解更多信息，请参阅：docs.microsoft.com/en-us/aspnet/core/fundamentals/…【参考方案3】：

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

【讨论】：

【参考方案4】：

我将 JS 和 CSS 文件放在我的应用程序的 wwwroot 文件夹中的 assets 文件夹中，然后在我的 _Layout.cshtml 中使用链接标签来引入样式。 Steven Sanderson 有一篇博文的一部分，他谈到了添加第三方库 here。

您也可以使用 webpack 进行某种设置。我承认，这个话题不是很直接。

【讨论】：

【参考方案5】：

在_布局中：

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

那么你的看法：

@section Styles your CSS

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

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review 为了扩展@lidermin 的观点，问题是关于如何从every 视图引用资产。您的回答似乎是在回答一个不同的问题，类似于“如何允许视图将样式注入&lt;head /&gt; 部分？”但是，使用您的方法，OP 将不得不在每个视图上重复包含的脚本和样式。【参考方案6】：

我将 CSS 文件放在 ~/wwwroot/cs 中，将 JavaScript 文件放在 ~/wwwroot/js 中。然后我按照默认的_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>

【讨论】：

这种方式无法加载asp.net core mvc中的文件。【参考方案7】：

图像文件、CSS 文件和 JavaScript JS 文件等静态文件在 ASP.Net Core 中不起作用，除非它与项目一起放置在适当的位置并设置了一些设置。 并在 start up.css 中添加这一行用于路由。

 app.UseStaticFiles();

【讨论】：

如何在 ASP .NET Core Web 应用程序中向 apsettings.js 添加“密钥”及其“名称”

】如何在ASP.NETCoreWeb应用程序中向apsettings.js添加“密钥”及其“名称”【英文标题】：Howtoadda"key"andits"name"toapsettings.jsinASP.NETCoreWebapplication【发布时间】：2021-08-1115:58:23【问题描述】：在ASP.NETCoreWeb应用程序中，我... 查看详情

如何在 asp.net core 的其他表中添加数据和删除相同的数据？

】如何在asp.netcore的其他表中添加数据和删除相同的数据？【英文标题】：Howtoadddataandremovesamedatafromothertableinasp.netcore?【发布时间】：2020-07-2620:48:20【问题描述】：我正在尝试从添加到TestResult表中的现有表PendingTestResult中删除同... 查看详情

Asp.Net core MVC6如何在Identity 3中初始添加角色

】Asp.NetcoreMVC6如何在Identity3中初始添加角色【英文标题】：Asp.NetcoreMVC6HowtoinitiallyaddrolesinIdentity3【发布时间】：2016-08-1621:32:02【问题描述】：我在***中寻找过这个，到目前为止，似乎有很多关于在Identity1和2中添加角色的问题，... 查看详情

如何在 Asp.net mvc 或 Asp.net Core 中实现可搜索的 Dropdown？

】如何在Asp.netmvc或Asp.netCore中实现可搜索的Dropdown？【英文标题】：HowtoimplementDropdownwithsearchableinAsp.netmvcorAsp.netCore?【发布时间】：2021-12-0623:44:48【问题描述】：注意：在这里，在您执行任何其他操作之前，将这两个文件添加到... 查看详情

如何在 ASP.NET Core for JWT 中添加角色策略？

】如何在ASP.NETCoreforJWT中添加角色策略？【英文标题】：HowtoaddapolicyforroleinASP.NETCoreforJWT?【发布时间】：2021-10-1322:27:04【问题描述】：我知道我可以通过这种方式为我的JWT自定义声明添加政策：services.AddAuthorization(options=>options.... 查看详情

如何在 ASP.NET Core 中获取 Web 根路径和内容根路径？

】如何在ASP.NETCore中获取Web根路径和内容根路径？【英文标题】：HowdoIgettheWebRootPathandtheContentRootPathinASP.NETCore?【发布时间】：2018-08-2217:11:18【问题描述】：我正在尝试在视图中添加根路径作为参数，因此我可以将其作为参数传递... 查看详情

如何在 ASP.NET Core MVC 中使用 ADO.NET 向存储过程添加参数？

】如何在ASP.NETCoreMVC中使用ADO.NET向存储过程添加参数？【英文标题】：HowcanIaddparameterstoastoredprocedureusingADO.NETinASP.NETCoreMVC?【发布时间】：2021-05-0317:52:00【问题描述】：我想在ASP.NETCoreMVC中执行具有ADO.NET输出参数的存储过程。但... 查看详情

如何在 ASP.NET Core 中使用 npm

】如何在ASP.NETCore中使用npm【英文标题】：HowtousenpmwithASP.NETCore【发布时间】：2016-10-2211:26:20【问题描述】：我正在使用npm来管理我的ASP.NETCore应用程序所需的jQuery、Bootstrap、FontAwesome和类似的客户端库。对我有用的方法首先是在... 查看详情

如何在 ASP.NET Core Web API 2.1 中添加 WCF 服务引用

】如何在ASP.NETCoreWebAPI2.1中添加WCF服务引用【英文标题】：HowtoaddWCFServicereferenceinASP.NETCorewebAPI2.1【发布时间】：2021-03-2618:22:54【问题描述】：我尝试在我的ASP.netCoreWebAPI中添加服务引用，但出现以下错误：Unabletogeneratedeps.json,itmay... 查看详情

如何在 ASP.NET Core 2.0 Web api 中添加来自 IdentityServer4 和 Auth0 的 Jwt 身份验证？

】如何在ASP.NETCore2.0Webapi中添加来自IdentityServer4和Auth0的Jwt身份验证？【英文标题】：HowdoIaddJwtauthenticationfromIdentityServer4andAuth0inanASP.NETCore2.0webapi?【发布时间】：2018-05-1605:24:51【问题描述】：我们需要使用来自IdentityServer4的JWT令... 查看详情

如何在 ASP.NET Core Web API 中添加两个不同的令牌

】如何在ASP.NETCoreWebAPI中添加两个不同的令牌【英文标题】：HowaddtwodifferenttokensinASP.NETCoreWebAPI【发布时间】：2019-12-0911:50:05【问题描述】：我需要我们控制器中的Authorize属性可以接受两个不同的令牌。一个令牌，由一个私有ADFS... 查看详情

如何在 ASP.NET Core MVC 的同一视图中添加/创建多个一对多关系

】如何在ASP.NETCoreMVC的同一视图中添加/创建多个一对多关系【英文标题】：Howtoadd/createmultipleone-tomanyrelationshipsinsameviewinASP.NETCoreMVC【发布时间】：2022-01-1921:52:32【问题描述】：我正在努力解决以下问题：我有一堂课Questions：public... 查看详情

如何在 ASP.NET Core 1.0 的 DI 中的 Startup 类中添加 IHttpContextAccessor？

】如何在ASP.NETCore1.0的DI中的Startup类中添加IHttpContextAccessor？【英文标题】：HowtoaddIHttpContextAccessorintheStartupclassintheDIinASP.NETCore1.0?【发布时间】：2016-11-0604:16:21【问题描述】：在ASP.NETCoreRC1中，我使用以下代码检索上下文的值（页... 查看详情

如何在 ASP.NET Core 中使用 Bootstrap 4

】如何在ASP.NETCore中使用Bootstrap4【英文标题】：HowtouseBootstrap4inASP.NETCore【发布时间】：2018-07-0622:52:03【问题描述】：我想用NuGet更新ASP.NETCore中的Bootstrap。我用这个：Install-Packagebootstrap-Version4.0.0它确实添加了依赖项，但我现在如... 查看详情

ASP.Net Core 如何在 EF Core 和 Identity 中获取用户角色

】ASP.NetCore如何在EFCore和Identity中获取用户角色【英文标题】：ASP.NetCorehowtogettheuserroleinEFCoreandIdentity【发布时间】：2018-01-0814:25:00【问题描述】：您好，我正在使用Identity和自定义用户类和EFCore构建API。我想获取属于用户的角色... 查看详情

如何在 ASP.NET Core 中基于 appsettings 有条件地使用授权

】如何在ASP.NETCore中基于appsettings有条件地使用授权【英文标题】：HowtoconditionallyuseAuthorizationbasedonappsettingsinASP.NETCore【发布时间】：2021-09-1912:14:20【问题描述】：我有一个ASP.NETCore3.1WebApi，我在其中使用基于OAuth的身份验证和授... 查看详情

在 ASP .Net Core 2.2 中添加 JWT 令牌后授权不起作用

...【发布时间】：2020-02-2716:52:25【问题描述】：我正在学习如何在ASP中使用JWT令牌认证。我有一个简单的网站，其中包含CRUD操作和一个存储库，我添加了注册/登录功能，并且我有一个名为“管理员”的超级用户角色。通常，这是... 查看详情

在 Razor (chtml) 中渲染动态视图，如何在 asp.net core 3.0 中将 FileProvider 添加到 razor？

】在Razor(chtml)中渲染动态视图，如何在asp.netcore3.0中将FileProvider添加到razor？【英文标题】：RenderingdynamicsviewsinRazor(chtml),HowtoaddaFileProvidertorazorinasp.netcore3.0?【发布时间】：2019-10-0815:16:12【问题描述】：我正在从asp-netcore2.2迁移到as... 查看详情