如何在C# ASP.NET MVC应用的视图中添加jquery-terminal

ASP.NET MVC的静态资源有固定的约定目录，按你使用的MVC版本放置即可：

• 如果你用的是新版ASP.NET Core MVC（新建项目默认模板都是这个）：
  项目根下的wwwroot是所有可对外访问的静态资源根目录，你可以在里面新建lib/jquery-terminal文件夹，把下载的压缩包解压后，取dist目录里的两个核心文件放进去：
  • jquery.terminal.min.css（样式文件）
  • jquery.terminal.min.js（脚本文件）
    最终文件路径类似：wwwroot/lib/jquery-terminal/jquery.terminal.min.js
• 如果你用的是老版ASP.NET Framework MVC：
  按约定CSS文件放到Content目录，JS文件放到Scripts目录，你可以新建对应子文件夹：
  • 把jquery.terminal.min.css放到Content/jquery-terminal/下
  • 把jquery.terminal.min.js放到Scripts/jquery-terminal/下

完全不是必须的，新手可以直接跳过Bundle配置，先跑通功能再考虑优化
如果你后续要做打包压缩优化再配置也不迟：

• 新版.NET Core MVC默认的静态文件中间件已经能直接访问wwwroot下的所有文件，不用额外配置
• 老版Framework MVC如果要配置Bundle，打开App_Start/BundleConfig.cs，新增对应样式和脚本的Bundle路径，再在视图里用@Styles.Render/@Scripts.Render调用即可

注意引用顺序不能乱：必须先引用jQuery，再引用终端的CSS，最后引用终端的JS，否则会报错

如果你只是要在某一个页面加终端，不需要全局生效，直接在对应的视图（比如Index.cshtml）里加引用即可，不用改布局页：

1. 引用文件的代码示例（新版.NET Core MVC）：

   <!-- 如果你已经在布局页引入过jQuery，这行可以删掉 -->
   <script src="~/lib/jquery/dist/jquery.min.js"></script>
   <!-- 引入终端样式 -->
   <link rel="stylesheet" href="~/lib/jquery-terminal/jquery.terminal.min.css" />
   <!-- 引入终端脚本 -->
   <script src="~/lib/jquery-terminal/jquery.terminal.min.js"></script>
   

   老版Framework MVC把路径对应替换成~/Content/jquery-terminal/xxx.css和~/Scripts/jquery-terminal/xxx.js即可。
   补充注意：ASP.NET Core MVC默认模板已经开启静态文件中间件，无需额外修改配置即可直接访问wwwroot下的文件；老版Framework MVC也无需额外配置，静态文件默认可直接访问

2. 加终端容器和初始化代码：

   <!-- 终端的挂载容器 -->
   <div id="my-terminal"></div>
   <script>
     // 初始化终端
     $('#my-terminal').terminal(function(command) {
       // 这里写你的命令处理逻辑，示例是回显输入内容
       this.echo('你输入的命令是：' + command);
     }, {
       prompt: '>>> ' // 自定义命令行提示符
     });
   </script>
   

内容的提问来源于stack exchange，提问作者otacon