Asp.Net Core中访问静态文件

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运行应用程序,效果如图: 

Tags: , , , ,

IT技术

Add comment

  Country flag

biuquote
微笑得意调皮害羞酷大笑惊讶发呆喜欢可怜尴尬闭嘴噘嘴皱眉伤心抓狂呕吐坏笑漫骂发怒
Loading