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技术

添加评论

  Country flag

biuquote
  • 评论
  • 在线预览
Loading