如何将CSS，JS和其他文件组织到ASP MVC 4中 [英] How to organize CSS,JS and other files into ASP MVC 4

问题描述

当我正在开发PHP(Laravel)时，我对ASP.NET MVC 4完全陌生，组织事物的方式通常类似于公开".文件夹，然后将其分为css，img，js，lib等.这是我更喜欢组织文件的方式...尝试将其引入ASP MVC 4，我发现并阅读了与我要实现的问题类似的问题.
在asp.net mvc 4中组织自定义javascript

我按照他们所说的做，并添加了我的自定义JS文件并将其添加到Bundle中，它可以编译并且运行良好，但是我遇到的问题是，在Solution Explorer中所有移动的文件默认情况下不显示我的新创建的文件夹(直接在文件资源管理器中，而不通过VS执行)，带有感叹号，并且由于某种原因它们被隐藏了，可以通过Show All Files看到.我确保它们存在于Bundle内部，但随后我的Solution Explorer不会刷新.我正在尝试构建看起来如下的结构:

I am totally new to ASP.NET MVC 4 as I was developing into PHP (Laravel) and the way to organize things is usually something like a "public" folder which would then be separated into css, img, js, lib, and so on.... which is the way I prefer to organize my files...Trying to follow this into ASP MVC 4, and I found and read this question that is similar to what I want achieve.
organizing custom javascripts in asp.net mvc 4

I did it the way they said and added my custom JS files and added them in the Bundle, it compile and also run fine but the problem I have is that inside the Solution Explorer all the files that I moved are showing with an exclamation mark and also my newly created folders (directly in file explorer, not doing it through VS) are not showing by default, they are for some reason hidden, which I can see with Show All Files. I made sure that they exist inside the Bundle but then my Solution Explorer does not get refreshed. I am trying to make a structure that looks the following:

Contents
    img
        ui-icons.png
    css
        bootstrap
            bootstrap.css
            bootstrap.min.css
Scripts
    lib     
        bootstrap
            bootstrap.min.js
            bootstrap.js
        jquery
            jquery.js
            jquery.min.js
            jquery.ui.js
            jquery.ui.min.js
        modernizr
            modernizr.js
    custom
        mycustom.js
        mycustom2.js

对于将所有文件都转储到同一文件夹(内容和脚本)中，包括在某些正式库之间的自定义文件，我并不感到疯狂.我知道直接使用文件资源管理器可能不是最好的方法，但是配置这些文件的正式方法是什么...实际上，我的结构对ASP MVC4有意义吗?
编辑
我的问题与为什么创建和移动像jquery等文件并将其移动到Scripts/lib文件夹后，为什么我的Solution Explorer仍显示在Scripts下的这些文件中有关?但带有感叹号表示找不到文件(当然是因为我移动了文件).为什么它不能完全反映我在文件资源管理器中看到的内容?除了编辑Bundles之外，我还想做些其他事情，以使我的Solution Explorer与现实保持一致???为什么我创建的文件夹没有显示在Solution Explorer中，为什么我必须单击Show All Files才能看到它们?逗号Create New Folder甚至没有作为可用命令启用，这就是为什么我直接在文件资源管理器中完成了这些文件夹的原因...但是为什么?

I am not crazy about dumping everything inside the same folders (Content & Scripts), including my custom files in between some official libraries. I know using directly the File Explorer is probably not the best way to go, but then what would be the official way of configuring these... and actually does my structure make sense into ASP MVC4?
EDIT
My question is more related to why after creating and moving the files like jquery and others into a Scripts/lib folder, my Solution Explorer is still showin these files under Scripts but with an exclamation marks as saying file not found (of course since I moved them). Why it doesn't reflect exactly what I see in File Explorer? Apart from editing the Bundles is there anything else I'm suppose to do so that my Solution Explorer is up to date with reality??? and why are my created folders not showing in Solution Explorer, why do I have to click on Show All Files to see them? The commmand Create New Folder is not even enable as an available command, that's why I have done these folders directly in File Explorer...but why?

推荐答案

坦白说，您可以组织自己的MVC项目，但您认为合适.如果有任何一种接近正式"方式来组织Web文件的方法，那么默认的Visual Studio MVC4模板将如何组织它们:

Frankly, you can organize your MVC project however you see fit. If there's anything close to an "official" way to organize your web files, it would be how the default Visual Studio MVC4 template organizes them:

• 内容(CSS文件和相关的图像文件)
• 图片(常规图片文件)
• 脚本(JavaScript文件)

• Content (CSS files and related image files)
• Images (general image files)
• Scripts (JavaScript files)

如果您更熟悉其他类型的组织，或者是希望使用另一个组织的团队的一员，那就去吧. (尽管在这种团队场景中，请确保所有团队成员都遵循相同的组织规则！).

If you're more familiar with another sort of organization or are part of a team that would prefer another organization, then go for it. (Though in that team scenario, make sure all the team members follow the same organization rules!).

要使用解决方案资源管理器更改MVC模板提供的文件夹结构，请右键单击要在其中添加子文件夹的文件夹(对于项目级文件夹，该文件夹包括项目名称)，然后选择<在显示的弹出菜单中，先点击strong>添加，然后点击添加文件夹.

To alter the folder structure that the MVC template provides using the Solution Explorer, right-click on the folder in which you want to add a subfolder (this includes the project name, for project-level folders), and then select Add and then Add Folder from the pop-up menu that appears.

如果要将解决方案中已经存在的文件移动到解决方案中的另一个位置，则应使用解决方案资源管理器(而不是Windows资源管理器)将它们移动，否则您将得到正在遇到的行为，其中Visual Studio不知道您将它们移到了哪里.您可以单击并拖动文件，右键单击并复制和粘贴，等等.

If you want to move around files that are already in your solution to another location within the solution, you should move them around using the Solution Explorer, not Windows Explorer, as you'll otherwise get the behavior you are experiencing, where Visual Studio does not know where you moved them. You can click and drag files around, right-click and copy and paste, etc.

如果需要在解决方案中添加预先存在的文件(例如，包括一组自定义脚本)，则可以使用Windows资源管理器将文件复制到适当的项目文件夹中.然后，在Visual Studio中，突出显示与您移动它们的位置相对应的项目，然后在Solution Explorer工具栏中按 Show All Files 按钮-这将显示您在Windows Explorer中复制的文件，否则将不会在解决方案资源管理器"标签中列出.最后，突出显示新文件，单击鼠标右键，然后从弹出菜单中选择包含在项目中选项.

If you need to add pre-existing files to your solution (say, to include a set of custom scripts), you can copy the files to the appropriate project folder using Windows Explorer. Then, in Visual Studio, highlight the project that corresponds to where you moved them, and press the Show All Files button in the Solution Explorer toolbar - this will show the files you copied in Windows Explorer, which otherwise won't be listed in Solution Explorer tab. Lastly, highlight the new files, right-click, and select the Include in Project option from the pop-up menu.

最后一个指针:如果需要在项目中添加特定的JavaScript库，最简单的方法是使用 NuGet包管理器，而不是下载并添加文件在Windows资源管理器中.在Visual Studio的工具"菜单中的"库项目管理器->管理解决方案的NuGet程序包" 下可以找到此选项.并非所有的JavaScript库都可以通过这种方式使用，但是最受欢迎的库是.

One final pointer: if you need to add a specific JavaScript library to your project, the easiest way to do so would be to use the NuGet package manager, rather than to download and add the files in Windows Explorer. This option is found in Visual Studio in the Tools menu, under Library Project Manager --> Manage NuGet Packages for Solution. Not all JavaScript libraries will be available this way, but the most popular ones are.

这篇关于如何将CSS，JS和其他文件组织到ASP MVC 4中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！