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

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

在 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"));

修改成

`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 的區塊：

`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，如下：

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

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:

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

转载于:https://blog.51cto.com/mikelong9/1284457