我要學ASP.NET MVC 3.0（十四）： MVC 3.0 執行個體系列之建立資料表格

概述

        

在ASP.NET MVC裡面微軟並沒有給我們提供像GridView表格之類的控制項，但是作為web開發人員表格式資料顯示是我們面臨的常見任務之一，從這節開始我們就一步一步學習如何在基於Razor引擎的ASP.NET MVC頁面中實現像GridView一樣的表格，並且實現表格中的排序、分頁、篩選等功能，便於我們更好的理解和使用ASP.NET MVC。

 

簡介

    

在ASP.NET WebForms中微軟為我們提供了GridView控制項，而且控制項中提供了一種快速簡便的方法來顯示表格中的資料集，並提供排序，分頁，編輯，刪除等一些額外的功能。我們知道在ASP.NET WebForms頁面載入時，GridView會自動呈現為一個
<TABLE>元素，使我們不必編寫任何html標記，只專註於GridView中檢索資料和綁定資料。然而，在ASP.NET
MVC應用程式 ，開發人員必須手動完成View視表徵圖記，如果開發類似WebForms中的GridView表格，是不是感覺有點頭痛。

從這篇文章開始，我們就探討如何在ASP.NET MVC應用程式中顯示表格式資料。然後我們逐漸擴張一步一步完成表格中複雜的功能，包括排序，分頁，篩選等增強型功能。 

廢話不多說了，讓我們建立一個ASP.NET
MVC應用程式，看看如何在一個網頁中以表格的形式顯示資料庫記錄。

   

建立解決方案

   

建立一個基於MVC 3.0架構，名為MVC3.Grid的解決方案

選擇空白解決方案，視圖引擎選擇Razor引擎，暫時不產生測試架構。

解決方案建立成功

   

建立Model

  

對於Model，我們可以選擇使用自訂的幾條類比資料，也可以選擇資料庫作為基礎資料。

此時我們選擇Linq to Sql 作為資料模型

滑鼠右擊Model檔案夾--添加新項目

建立Linq to Sql資料模型

點擊添加後，我們可以在伺服器總管中，建立與資料的串連

提供一下例子中Employee和Department兩張表的設計

DepartmentID是個int型的自動成長列

DepartmentID是外鍵

拖拽出兩張表，此處我們主要以Employee和Department兩張表作為例子，這兩張表以DepartmentID作為外鍵串連

注意：後面例子中介面上的屬性只選取其中幾個作為例子。

 

重建解決方案，看看我們的項目是否成功。

  

建立Controller

  

首先，我們為了能將資料重複使用，做一個簡單的Controller基類，命名為BaseController

該基類裡面，負責與資料庫進行通訊。

這樣做僅僅是為了做該例子時，擷取資料方便，沒有考慮其他因素，希望不要糾結與此，謝謝。

該基類的代碼如下

    public class BaseController : Controller
    {
private ModelDataContext _DataContext = null;
protected ModelDataContext DataContext
        {
get
            {
if (_DataContext == null)
                    _DataContext = new ModelDataContext();

                var options = new DataLoadOptions();
                options.LoadWith<Employee>(p => p.EmployeeNO);
                _DataContext.LoadOptions = options;

return _DataContext;
            }
        }

    }

　　

繼續建立一個名為EmployeeController的控制器，該控制器繼承於上面的BaseController基類

建立成功後，控制器預設給出了Index方法

我們可以修改修改，讓該Index方法返回一個List<Employee>

代碼如下：

    public class EmployeeController : BaseController
    {
//
// GET: /Employee/

public ActionResult Index()
        {
            var list = this.DataContext.Employee;
return View(list);
        }

    }

　　 

建立視圖View

我們針對於Index方法建立視圖

選擇基於Razor引擎的視圖，選擇建立強型別視圖

模型類為我們Linq to Sql 建立產生的Employee

點擊添加

修改視圖代碼如下

@model IEnumerable<MVC3.Grid.Models.Employee>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>成員列表</h2>

<table border="1" width="100%" style="text-align:center;border-collapse:collapse">
<tr> 
<th>編號</th> 
<th>姓名</th> 
<th>性別</th> 
<th>生日</th> 
<th>是否婚配</th>
</tr> 
@foreach (var item in Model)
{ 

<tr> 
<td>@item.EmployeeNO</td> 
<td>@item.EmployName</td> 
<td>@item.Sex</td> 
<td>@string.Format("{0:yyyy年MM月dd日}", item.Birthday)</td> 
<td>
     @if (item.Marital == "1")
     {
         @:@("是")
         }
     @if(item.Marital!="1")
     {
         @:@("否")
          }
</td>
</tr> 

}

</table> 

　　

修改Global.asax預設首頁為Employee

點擊運行

可以看到，目前為止，一個標準的表格已經完成。

 

總結

   

表格的呈現形式是在遍曆list的時候，根據list集合的行數產生的table.tr，根據list中每一項的屬性來產生table.td

  

下節預告

  

下節開始我們就要，給這個基本的表格頭上面加上排序功能。大家可以想想該怎麼做呢？

作者：記憶逝去的青春
出處：http://www.cnblogs.com/lukun/

本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，如有問題，可以通過http://www.cnblogs.com/lukun/ 聯絡我，非常感謝。