ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历

时间:2023-12-15 20:10:44

首先我是想要在ASP.NET MVC 5.0中使用从jQuery之家下载下来的插件。

在下载了许多我觉得好用方便的插件之后,我在VS2017中新建了一个项目叫MVCTest,然后选择MVC模板,等待自动生成Home控制器和相关页面,如下图:

ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历

然后我把自己下载的许多插件中的一个(jQuery图文卡片3D叠加轮播切换代码,这个效果后面会看到)zip包解压后得到的文件夹复制到MVCTest中的Views文件夹下,拷贝的内容是下图中红圈圈起来的地方:

ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历

这是拷贝到MVCTest之后,两个红圈的Index.cshtml文件里面的代码被替换为插件中index.html中的所有代码。TestJQuery文件夹下的js文件夹、css文件夹、images文件夹、img文件夹都是原封不动拷贝过来的:

ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历

根据我理解的复杂的css和js显示原理,我把很多种配置方式都试了一下:下图中八条画红线的地方的文件引用其实只引用了四个,因为我把一样的css文件和js文件都复制到对应的Contents文件夹和Scripts文件夹下了,只是放置的地方不同,所以分别做了引用,于是有八条引用,Views文件夹下的css文件夹和js文件夹都做了引用,Contents文件夹和Scripts文件夹也做了引用。分别是为了测试到底哪一个能显示出来;

ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历

结果就是,启动调试后,两个页面都显示如下图(因为一样的,所以就只截一张图):

ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历

其间,我分别一一对应的改了两个cshtml文件中的所有对图片,图标还有css和js文件的正确引用的地址,结果Views文件夹里Index.cshtml的执行结果还是如上图,而Home文件夹下的Index.cshtml执行出了正确的效果如下:

ASP.NET MVC学习中记录下使用JavaScript和CSS层叠样式表的经历