(紀錄)[ASP.NET MVC][jQuery]-1 純手工打造屬於自己的 jQuery GridView
阿新 • • 發佈：2020-10-10
(我自己想記錄下來,雖然是別人寫的,但覺得很有值得保留)
在 ASP.NET MVC 中已經沒有像 ASP.NET Web Form 那樣有許多內建控制項了，而一般在開發專案上可能會滿常碰到一個需求：當我點了 TD 之後那格會變成 TextBox 離開後就會儲存或者是 Table 的 TH 可以改變大小、可以改變順序...等等的功能，當然從 jQuery 出來之後網路已經有許多好用的套件了，像是 jqGrid、DataTables...等，但往往這些套件提供的功能又不是全部都是我們需要的，所以這篇就要教大家如何實作一個簡單的 GridView 可以讓使用者編輯，並且提供了的分頁功能 ～
範例需求
這篇主要說明方向會著重在前端 jQuery 的設計，後端的部份我們會搭配到 ASP.NET MVC Web API 並且利用 OData 的概念來做分頁技巧，所以後端 MVC 的概念就不會贅述太多，畢竟那只是我們撈資料的輔助而已，來！我們總要有個方向，走！我們邁向 jQuery 的美妙世界吧 ～
小提醒：在 ASP.NET MVC 中不應該直接寫死網址，故此範例為求易讀所以直接寫死
前置作業
1.首先我們先建立一個 ASP.NET MVC 4 的專案，預設範本的話選擇基本就OK了。
2.建立兩個 Controller ，一個為空白 MVC 控制器名為 HomeController，另外一個為空白 API 控制器名為 Product 控制器。
3.接下來我們先透過 Nuget 來安裝最新的 jQuery UI 套件，Nuget 會替我們安裝該有的 CSS 和 JS 檔案。
4.接著我們開啟在 App_Start 裡的 BundleConfig.cs ，並將原本的
1 | bundles.Add(newStyleBundle("~/Content/css").Include( "~/Content/site.css")); |