ASP.NET MVC 6 结合 JSPM 和 Material Design Lite
4.64/5 (9投票s)
本文将介绍如何在 ASP.NET MVC 6 中使用 JSPM 和 Material Design Lite。
引言
ASP.NET MVC 6.0 在几个月前发布，并带来了 大量 新 特性。随着 Visual Studio 2015 的发布，前端开发也得到了提升。我一直在从事 Node.js 项目，发现 Node.js 对于前端开发非常棒（在某些情况下，通过 MEAN 栈，它也适用于后端）。这使得我们能够非常快速地开发新项目，并且 Node.js 社区拥有海量插件，也非常令人惊叹。回到 .NET 世界，许多很棒的功能让我感到编写代码非常舒适。ASP.NET MVC 6.0 在我们创建解决方案时内置支持 NPM 和 Bower 包管理器。这很好，大家都知道。
此外，目前许多公司都在使用 ES 2015 (ES6)。这让我很高兴能在 ASP.NET MVC 6.0 解决方案中使用它。到目前为止，大家通常使用 Babel 或 Traceur 来让它完美运行（Polyfill），而使用 JSPM，你可以做得更多。
默认情况下，ASP.NET MVC 6.0 允许你使用 Twitter Bootstrap 来轻松布局和开发 UI。但是，Google 的 Material Design 方法论简直太棒了。
说太多了，我现在就来展示如何在同一个解决方案中实现这一切。
准备软件和工具
- Visual Studio 2015 Community
- .NET 4.6 (1.0.0-beta5)
- ASP.NET MVC 6.0
- NodeJS v0.12.7
- JSPM v0.15.7
- Gulp v3.8.11
源代码
你可以在 我的 github 上找到所有源代码。
创建解决方案
打开 Visual Studio 2015 Community，然后选择 File -> New -> Project，选择 Web -> .NET 4.6，然后创建一个 Web 解决方案。解决方案创建完成后，我们直接删除 bower.json 文件，因为我们不想再使用 bower 了。
初始化 JSPM
打开命令行，并将路径更改到你刚刚创建的项目。然后我们输入
jspm init
然后 JSPM 会引导我们创建 JSPM 配置文件，但请确保我们将 JSPM 路径指向
wwwroot\lib
整个 package.json 文件将如下所示
{
"name": "MazWebApp",
"version": "0.0.0",
"devDependencies": {
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8"
},
"jspm": {
"directories": {
"baseURL": "wwwroot",
"packages": "wwwroot/lib"
},
"dependencies": {
"hammer": "github:hammerjs/hammer.js@^2.0.4",
"ixisio/bootstrap-touch-carousel": "github:ixisio/bootstrap-touch-carousel@^0.8.0",
"jquery": "github:components/jquery@^2.1.4",
"jquery-validation": "github:jzaefferer/jquery-validation@^1.14.0",
"jquery-validation-unobtrusive": "github:aspnet/jquery-validation-unobtrusive@^3.2.2"
},
"devDependencies": {
"babel": "npm:babel-core@^5.1.13",
"babel-runtime": "npm:babel-runtime@^5.1.13",
"core-js": "npm:core-js@^0.9.4"
}
}
}
JSPM 还在 ./wwwroot 文件夹内创建了一个 config.js 文件。
如果你不知道如何安装 JSPM 包，请从 这里 开始。
将 Material Design Lite (MDL) 引入我们的解决方案
这是我们将 MDL 引入我们的项目的一步。打开 \Views\Shared\_Layout.cshtml 文件，然后添加
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
我不使用 JSPM 来安装 MDL，因为我想直接指向 Google CDN。但如果你愿意，也可以使用 JSPM 来安装，其他部分保持不变。
在此文件的底部，我们需要添加一些脚本，例如
<script src="~/lib/system.js" type="text/javascript"></script>
<script src="~/config.js" type="text/javascript"></script>
<script>
System.import("js/site").catch(console.log.bind(console));
</script>
就这样。现在我们可以使用 MDL 来布局我们的 UI 了。布局应该如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Magazine Website, a simple website about magazines.">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>@ViewData["Title"] - Magazine Website</title>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="~/css/site.css"/>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Magazine Website</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="waterfall-exp"/>
</div>
</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Magazine Website</span>
<nav class="mdl-navigation">
<a asp-controller="Home" asp-action="Index" class="mdl-navigation__link">Home</a>
<a asp-controller="Home" asp-action="About" class="mdl-navigation__link">About</a>
<a asp-controller="Home" asp-action="Contact" class="mdl-navigation__link">Contact</a>
<hr/>
@await Html.PartialAsync("_LoginPartial")
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-grid page-content">
@RenderBody()
</div>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<p>© 2015 - MazWebApp</p>
</div>
</footer>
</div>
<script src="~/lib/system.js" type="text/javascript"></script>
<script src="~/config.js" type="text/javascript"></script>
<script>
System.import("js/site").catch(console.log.bind(console));
</script>
@RenderSection("scripts", false)
</body>
</html>
上面的代码仅用于此网站的主布局（看起来像 Web Forms 中的母版页）。
注册页面的标记如下
<div class="mdl-cell mdl-cell--12-col">
<form asp-controller="Account"
asp-action="Register"
method="post"
role="form">
<div class="mdl-grid page-container">
<div class="mdl-cell mdl-cell--12-col page-row">
<h3 class="page-title">Create a new account</h3>
<hr>
<div asp-validation-summary="ValidationSummary.All"></div>
</div>
<div class="mdl-cell mdl-cell--6-col page-row">
<div class="mdl-grid page-container">
<div class="mdl-cell mdl-cell--12-col page-row">
<div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--12-col">
<label asp-for="Email" class="mdl-textfield__label"></label>
<input asp-for="Email" class="mdl-textfield__input"/>
<span asp-validation-for="Email" class="mdl-textfield__error"></span>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col page-row">
<div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--12-col">
<label asp-for="Password" class="mdl-textfield__label"></label>
<input asp-for="Password" class="mdl-textfield__input"/>
<span asp-validation-for="Password" class="mdl-textfield__error"></span>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col page-row">
<div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--12-col">
<label asp-for="ConfirmPassword" class="mdl-textfield__label"></label>
<input asp-for="ConfirmPassword" class="mdl-textfield__input" />
<span asp-validation-for="ConfirmPassword" class="mdl-textfield__error"></span>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col page-row">
<button type="submit"
class="mdl-button mdl-js-button
mdl-button--raised mdl-button--colored
mdl-js-ripple-effect">
Register
</button>
</div>
</div>
</form>
</div>
正如你所见，标记的 HTML 只使用了 MDL 库中的样式表。目前，MDL 团队正在开发许多组件（例如 Dialog...），但这些组件仍处于预发布状态。
请访问 我的 github 查看更多页面。
我们的解决方案结构将是
编写一些 ES6 Javascript 代码
现在我们可以在解决方案中编写任何 ES6 Javascript 代码了。我将一些示例代码放在下面
(($) => {
$(document).ready(() => {
console.log("It works");
$(".delete-product").on("click", (e) => {
const DELETE_URL = "/product/delete";
let $delBtn = $(e.target)
, productId = $delBtn.data("id");
$.ajax({
url: DELETE_URL,
data: {
id: productId
},
method: "POST"
}).done((result) => {
if (result.reload === true) {
window.location = "/product";
}
});
});
});
})(jQuery);
布局
首页
登录页面
注册页面
这就是我今天想与你分享的所有内容。
欢迎提出任何建议。
感谢您的阅读。
编码愉快 :)
历史
0.0.1: 草稿版本。
1.0.0: 更新了代码格式。
1.0.1: 更新了分类（C# 到 ASP.NET）。
1.0.2: 修正了英语语法并对代码进行了更多解释。
参考文献