ASP.NET MVC 最適配的 8 個前端元件 豐富應用系統設計


  1. 說明
    1. Animate.css
    2. AOS, Animate On Scroll Library
    3. Lodash
    4. Chance.js
    5. SweetAlert2
    6. Owl Carousel
    7. FullCalendar
    8. DataTables
  2. 相關連結

ASP.NET MVC 5 預設使用 Bootstrap 3 作為 CSS Framework,提供了網頁 Grid Layout 設計、RWD 設計以及各式方便的 Components 及 Helper。但仍有部分的開發需求沒有辦法被解決,而秉持 DRY 的精神,擴充使用第三方元件以解決開發需求,就是本文的目的。

logo

說明

Bootstrap 3 已經有了後繼的版本,請參考 ASP.NET MVC 從無到有打造一個應用系統 當中所介紹的如何將 ASP.NET MVC 5 預設的 Boostrap 3 升級為 Boostrap 4 並且不跑版。

本次的介紹皆使用 Libman 的方式進行第三方元件管理,適用於 Production環境於 Intranet 不連 CDN 的情境。

Animate.css

圖片來源:Animate.css

Animate.css

活潑的動畫效果,不需要自己寫 CSS 或者 JS,只要載入 CSS Link 就可以任意讓 Html Element 隨著 Style 舞動 💃

AOS, Animate On Scroll Library

圖片來源:AOS

AOS

想要做網頁捲動元素配合作動的視覺效果嗎?不用親自計算 CSS Height 簡單使用 AOS 就可以了 😀

Lodash

圖片來源:Lodash

Lodash

VanillaJS 很棒,從 ES6 以後也支援了處理物件的函式,例如:

document.querySelector()
document.querySelectorAll()

此外也有呼籲大家想想是不是真的需要 jQuery、Lodash 的參考資料:

You-Dont-Need-Lodash-Underscore

You (Might) Don’t Need jQuery

但我就懶,Lodash.js 的好,不僅讓懶懶開發者有了輕鬆處理物件的方式,此外也處理的瀏覽器相容性的問題,例如 IE 不支援 ES6 函式的問題,而犧牲的部分效能、額外的檔案空間,對於懶懶開發者而言可以接受 😋

Illustration by Icons 8 from Ouch!Illustration by Icons 8 from Ouch!

Chance.js

圖片來源:Chance.js

Chance.js

Lodash 對於資料結構的處理十分在行,唯一的缺點就是沒有方便的亂數函式,而 Chance 正是彌補了這個遺憾。從基本的隨機值產生,到情境意義的隨機資料產生(英文姓名、電子郵件、IP)等等,亂數之王非 Chance.js 莫屬 🎲

SweetAlert2

SweetAlert2

作為 Alert 的 Alternative,支援更多元的視覺效果,例如顯示圖片、訊息的風格等,此外也支援呼叫 Rest API 達到更多元的應用方式 💬

圖片來源:Owl Carousel

Owl Carousel

Bootsrap 原生已經有提供 Carousel 元件可以使用,但設計彈性有限。而 Owl Carousel 是一個更好的 Alternative,使用的彈性更為多元 🦉

FullCalendar

圖片來源:Full Calendar

FullCalendar

如果應用程式有需要實作 Calendar ,FullCalendar 絕對是首選 📅

DataTables

圖片來源:DataTables

DataTables

一秒讓表格變成 Sortable、Searchable、Filterable 📈

DatTables | 筆記如何在系統專案中使用 DataTables 元件

相關連結

ASP.NET MVC 從無到有打造一個應用系統

Visual Studio 入門教學

前端軍火庫