(我自己想記錄下來,雖然是別人寫的,但覺得很有值得保留)

在 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了。

(紀錄)[ASP.NET MVC][jQuery]-1 純手工打造屬於自己的 jQuery GridView

2.建立兩個 Controller ，一個為空白 MVC 控制器名為 HomeController，另外一個為空白 API 控制器名為 Product 控制器。

(紀錄)[ASP.NET MVC][jQuery]-1 純手工打造屬於自己的 jQuery GridView

(紀錄)[ASP.NET MVC][jQuery]-1 純手工打造屬於自己的 jQuery GridView


3.接下來我們先透過 Nuget 來安裝最新的 jQuery UI 套件，Nuget 會替我們安裝該有的 CSS 和 JS 檔案。

(紀錄)[ASP.NET MVC][jQuery]-1 純手工打造屬於自己的 jQuery GridView


4.接著我們打開在 App_Start 裡的 BundleConfig.cs ，並將原本的

1 bundles.Add(newStyleBundle("~/Content/css").Include( "~/Content/site.css"));

修改成

1 bundles.Add(new StyleBundle("~/Content/css").Include(
2                "~/Content/site.css",
3               "~/Content/themes/base/jquery-ui.css"


4               ));


這樣等下的 jQuery UI 套件才套的到 CSS ，當然還是可以在頁面上加入外部連結，透過 Bundle 的設定可以將同一個群組的 CSS 合併成同一個檔案



5.接著再到預設的 Layout 裡面將 jQuery UI 的套件引用進來，而預設的 Layout 在 /Views/Shared/_Layout.cshtml ，我們修改後為：

01 <!DOCTYPE html>
02 <html>
03 <head>
04    <meta charset="utf-8" />
05    <meta name="viewport" content="width=device-width" />
06    <title>@ViewBag.Title</title>
07    @Styles.Render("~/Content/css")
08 @RenderSection("styles", required: false)
09    @Scripts.Render("~/bundles/modernizr")
10 </head>
11 <body>
12    @RenderBody()
13    @Scripts.Render("~/bundles/jquery")
14 @Scripts.Render("~/bundles/jqueryui")
15    @RenderSection("scripts", required: false)
16 </body>
17

</html>

在這邊我們也在 Layout 裡挖了兩個洞，用來稍後在 View 裡面來填入 CSS 和 Javascript 的區塊：

view source
print?
1 @RenderSection("styles", required: false)
2


3 @RenderSection("scripts", required: false)



6.接下來我們在 HomeController 新增 Index 的 Action

1 publicActionResult Index()
2 {
3    ViewBag.Count = db.Products.Count(); // 計算分頁用
4    returnView();
5 }

並且建立 View，如下：

(紀錄)[ASP.NET MVC][jQuery]-1 純手工打造屬於自己的 jQuery GridView

7.接著我們修改我們需要的 View ，一個 Table 然後就，然後加上我們的分頁按鈕，所以透過 for 迴圈來產生 <a>，並且在每個 TH 中都加入 data-name 的屬性來做識別，嗯...說實在還滿簡單的，其他的東西我們都要利用 jQuery 來產出來，這樣才符合我們的純手工打造嘛XD，程式碼如下：

view source
print?
01 @{
02    ViewBag.Title = "純手工打造 jQuery Grid";
03    int Count = ViewBag.Count / 10;
04 }
05 @section styles
06 {
07
08 }
09 <div id="main">
10 <tableid="GridTable"tabindex="0"cellspacing="0"cellpadding="0"border="0">
11   <thead>
12     <tr>
13       <thdata-name="ProductID">產品代號</th>
14       <thdata-name="ProductName">產品名稱</th>
15       <thdata-name="QuantityPerUnit">產品規格</th>
16       <thdata-name="UnitPrice">產品價格</th>
17     </tr>
18   </thead>
19   <tbodyid="GridContent">
20   </tbody>
21  </table>
22  @for (var i = 0; i <= Count; i++)
23   {
24      <aclass="pageList"href="#"data-page="@(i + 1)">@(i + 1)</a>
25   }
26 </div>
27 @section scripts{
28
29 }

而大家有沒有發現，這邊如果對應到我們剛剛 Layout 畫面挖的兩個洞，剛好在 View 裡面我們把洞給填上去，至於填什麼資料 ？當然是 CSS 和 Javascript 啦，這也是 ASP.NET MVC 4 的特性之一。


常逛Web:

ithome

mobile01

ruten

developerfusion


文章出處: http://www.dotblogs.com.tw/jasonyah/archive/2013/05/19/use.jquery-ui.do.gridview.with.asp.net-mvc4.aspx