asp.net core2 mvc 基础教程--安装前端库

2022-09-30 09:37:14

VS 使用 NPM

可以直接添加 NPM 配置文件：右键项目添加 - 新建项 - 搜索 npm。

然后直接编辑 NPM 配置文件(pacakge.json)并保存，VS 就会自动添加包。

自动创建的 node_modules 文件夹默认不被加载，可以通过修改 Startup 手动将其加载。

app.UseStaticFiles(new StaticFileOptions
{
    RequestPath = "/node_modules",
    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "node_modules"))
});

前端验证

通过 jquery + jquery-validation + jquery-validation-unobtrusive 实现前端验证。

{

  "version": "1.0.0",

  "name": "tutorial",

  "private": true,

  "devDependencies": {},

  "dependencies": {

    "bootstrap": "4.3.1",

    "jquery": "3.3.1",

    "jquery-validation": "1.19.0",

    "jquery-validation-unobtrusive": "3.2.11"

  }

}

CDN 与 asp-fallback

通过 asp-fallback-src 和 asp-fallback-test 实现回落机制，当测试发现 CDN 的 js 无法使用时，切换为本地 js。

<environment include="Development">

    <script src="~/node_modules/jquery/dist/jquery.js"></script>

    <script src="~/node_modules/jquery-validation/dist/jquery.validate.js"></script>

    <script src="~/node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"></script>

</environment>


<environment exclude="Development">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"

            asp-fallback-src="~/node_modules/jquery/dist/jquery.js"

            asp-fallback-test="window.jQuery"></script>

    <script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.js"

            asp-fallback-src="~/node_modules/jquery-validation/dist/jquery.validate.js"

            asp-fallback-test="window.jQuery && window.jQuery.validator"></script>

    <script src="https://cdn.bootcss.com/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.js"

            asp-fallback-src="~/node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"

            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"></script>

</environment>

可以使用相似的方法配置 css 回落：

<environment include="Development">

    <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

</environment>


<environment exclude="Development">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css"

            asp-fallback-href="~/node_modules/bootstrap/dist/css/bootstrap.css"

            asp-fallback-test-class="sr-only"

            asp-fallback-test-property="position"

            asp-fallback-test-value="absolute"

            rel="stylesheet">

</environment>

asp.net core2 mvc 基础教程--安装前端库

码农公寓

VS 使用 NPM

前端验证

相关文章