posted at 2020.7.20 08:48 by Administrator
静态文件是相对于可在服务器上执行的文件(例如Razor视图)而言的,常见的静态文件有CSS样式表、JavaScript脚本、多媒体文件、HTML静态页面等。
ASP.NET Core应用程序默认是不启用对静态文件访问的,如果启用对静态文件的访问,需要在Startup.Configure方法中调用UseStaticFiles方法。
静态文件在默认情况下位于项目的/wwwroot目录下,若要更改静态文件位置,可以使用StaticFileOptions类来进行配置。
下面演示一下如何设置静态文件选项,使得视图页面能够访问位于/wwwroot/extLibs/js目录下的JQuery脚本,即通过http://localhost/js/jquery.js就能访问脚本文件了。
1、 新建一个空白的ASP.NET Core Web应用程序项目。
2、 在Startup.ConfigureServices方法中注册MVC功能服务。
代码:
public void ConfigureServices(IServiceCollection services) { services.AddMvc(); }
3、 对于Startup.Configure方法,在调用UseMvc方法之前,需要先调用UseStaticFiles方法对静态文件参数进行配置。
代码:
public void Configure(IApplicationBuilder app, IHostingEnvironment env){ if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } StaticFileOptions sfoption = new StaticFileOptions { FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "extLibs/js")), RequestPath = "/js" }; app.UseStaticFiles(sfoption); app.UseMvc(); }}
允许访问的静态文件所在的目录为/wwwroot/extLibs/js,映射后的相对URL为/js。之所以先于UseMvc方法调用UseStaticFiles方法,是为了优先处理对静态文件的请求,如果客户端访问的不是静态文件,再转到MVC框架进行处理。
4、在项目所在的目录下新建一个Pages目录,并添加Index.cshtml页面。
代码:
@page "~/" <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #rect{ background-color:red; position:relative; float:left; width:100px; height:100px; margin:8px } </style> <script type="text/javascript" src="/js/jquery.js"></script> </head> <body> <div> <button id="btnstart">向右移动</button> <button id="btnreset">重置</button> </div> <div> <div id="rect"/> </div> <script type="text/javascript"> $("#btnstart").click(() => { $("#rect").animate({ left: 150 }, 600); }); $("#btnreset").click(() => { $("#rect").css("left", 0); }); </script> </body> </html>
5、运行应用程序,效果如图:
5b5c49ee-a28c-4553-bae2-79c670c465d6|0|.0|96d5b379-7e1d-4dac-a6ba-1e50db561b04
Tags: Web, 代码, 方法, 程序, 类
IT技术