如何在ASP.NET Core MVC项目中集成MDBootstrap Pro多选控件？

• 第一步：获取MDBootstrap Pro资源包
  登录你的MDBootstrap账户，找到已购买的Pro版本订单，下载完整的资源压缩包。解压后会得到包含css、js、fonts及依赖文件的目录。

• 第二步：把资源放到项目静态目录
  在ASP.NET Core MVC项目的wwwroot文件夹下新建mdb-pro目录，将解压后的css、js、fonts子文件夹全部复制到这个新建目录里。

• 第三步：在布局文件中引入资源
  打开Views/Shared/_Layout.cshtml文件：

  • 在<head>标签内添加MDB的CSS引用：

    <link rel="stylesheet" href="~/mdb-pro/css/mdb.min.css" />
    

  • 在</body>标签结束前，依次引入jQuery、Popper.js（MDB的依赖）和MDB的JS文件：

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/popper.js/dist/umd/popper.min.js"></script>
    <script src="~/mdb-pro/js/mdb.min.js"></script>
    

  如果项目里没有jQuery和Popper.js，可以通过NuGet安装（运行Install-Package jQuery和Install-Package Popper.js命令），或者直接从MDB资源包的js/vendor目录里复制对应文件到项目的wwwroot/lib下。

• 第四步：在视图中使用Pro版多选控件
  以某个业务视图（比如Views/Home/Index.cshtml）为例，添加多选控件的HTML代码：

  <div class="md-form">
    <select class="mdb-select md-form" multiple>
      <option value="" disabled selected>请选择选项</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
    <label>多选选择器</label>
  </div>
  

  然后在视图底部添加初始化脚本，让控件生效：

  <script>
    $(document).ready(function () {
      $('.mdb-select').materialSelect();
    });
  </script>
  

• 第五步：验证集成结果
  启动ASP.NET Core MVC项目，打开添加了多选控件的页面，检查控件是否正常显示Pro版的样式，并且能正常使用多选、搜索（如果有）等Pro版功能。

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