MVC5 + EF6 + Bootstrap3 (1) 數據查詢頁面

前言

前面鋪墊了那麼多，今天我們就用MVC5 + EF6 + Bootstrap3來正式創建一個基本查詢頁面。

爲什麼從查詢頁面開始？嘿嘿，因爲小弟的.Net生涯就是從查詢頁面開始的，記得正式工作的第一個月就是各種模塊的查詢。先做查詢有什麼好處？首先查詢只讀數據，不寫數據。對數據庫本身的數據安全不造成影響也不怕寫入髒數據的麻煩。其次增刪改查這四個操作裏面，查詢的難度應該是最小的，不用考慮事務流程等方面的問題。

本節最後將會生成如下頁面：

創建Model

關於Model、數據庫上下文、Entity Framework,本系列教程前面已經有介紹，想要複習下的請猛戳我！

在Models文件夾下創建一個類，命名爲Worker.cs，這個類就是我們這裏要用到的Model。代碼如下：

 1 namespace SlarkInc.Models
 2 {
 3     public enum Sex
 4     {
 5         Male, Female
 6     }
 7     public class Worker
 8     {     
 9         public int ID { get; set; }
10         public string LastName { get; set; }
11         public string FirstName { get; set; }
12         public Sex Sex { get; set; }
13         public double? Rating { get; set; }
14     }
15 }

爲了方便說明，加入行號，如果想要複製代碼，請點擊左上角的小圖標就會出現不帶行號的代碼。在Worker類的上面，第3行，創建了一個Sex的枚舉類型，保證Sex只有Male和Female兩種取值。9到13行中Worker類用自動屬性的方法定義了5個屬性，其中Rating屬性前面有個問號表示這個屬性是nullable,可以是null。

創建數據庫上下文DbContext

這裏我們用Code First方法創建數據庫表。這個方法簡單點說就是先創建Model再根據Model生成數據庫表。

爲了方便起見，這裏用的數據庫是Visual Studio自帶的LocalDb。

數據庫上下文，就是我們這裏的數據訪問層，根據Model對數據庫表進行不同的操作。因此我們首先在項目中創建一個數據訪問層文件夾，命名爲DAL。然後，在DAL文件夾中創建Model對應的數據庫訪問上下文類，命名爲CompanyContext。寫入代碼如下：

 1 using System.Data.Entity;
 2 using SlarkInc.Models;
 3 using System.Data.Entity.ModelConfiguration.Conventions;
 4 
 5 namespace SlarkInc.DAL
 6 {
 7     public class CompanyContext : DbContext
 8     {
 9         public CompanyContext()  : base("CompanyContext")
10         { 
11         }
12 
13         public DbSet<Worker> Workers {get;set;}
14 
15         protected override void OnModelCreating(DbModelBuilder modelBuilder)
16         {
17             modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
18         }
19     }
20 }

因爲我們這裏數據庫訪問要用Entity Framework, 所以第1行要引入System.Data.Entity。第7行，我們的數據庫上下文繼承EF中的DbContext基類。第9行表示

CompanyContext 繼承基類DbContext的構造函數。第13行表示我們的Model Worker和CompanyContext中的數據集Workers對應。第15到18行定義了一個事件

OnModelCreating，這個事件在我們使用的Code First方法在數據庫中創建數據表時觸發。第17行的代碼的作用是使我們創建出來的數據庫表名字都是單數，不是複數。也就是說將來的數據庫表名是Worker而不是Workers。這也是我們創建數據庫表的習慣命名方法。

然後在Web.config文件裏面加入這個數據庫上下文要用到的數據庫連接字符串。如下面的代碼所示，在Web.config文件中找到<configuration>元素。然後在<configuration>元素內找到<connectionStrings>元素。最後在<connectionStrings>元素內加入如下<add>元素。

<configuration>
  <connectionStrings>
    <add name="CompanyContext" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=Company;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\Company.mdf" providerName="System.Data.SqlClient" />
  </connectionStrings>
<configuration>

這樣我們的數據庫上下文CompanyContext就可以用這個連接字符串來訪問數據庫了。解釋一下<add>元素裏的內容。name="CompanyContext"是連接字符串的名字，這個要和CompanyContext.cs 裏的base("CompanyContext")函數的參數一樣，這樣初始化數據庫上下文的時候才能讀到字符串。Data Source=(LocalDb)\v11.0表示使用的數據庫種類和版本。Catalog=Company是數據庫的名字。Integrated Security=SSPI是驗證方式。AttachDBFilename=|DataDirectory|\Company.mdf表示在我們這裏，數據庫文件存在 ~\App_Data\Company.mdf 下。providerName="System.Data.SqlClient"表示我們這裏要用的數據庫連接器，或者叫數據庫驅動。

然後我們還要在Web.config中聲明數據庫上下文。在<configuration>中找到<entityFramework>元素。在<entityFramework>元素中找到<contexts>元素。在<contexts>元素中寫入如下<context>元素。

<entityFramework>
    <contexts>
      <context type="SlarkInc.DAL.CompanyContext, SlarkInc">
      </context>
    </contexts>
</entityFramework>

type="SlarkInc.DAL.CompanyContext, SlarkInc"中的SlarkInc.DAL.CompanyContext表示這個CompanyContext的NameSpace和類名。逗號後面的SlarkInc表示這個CompanyContext在SlarkInc.dll中。

這樣我們就把CompanyContext添加到了Entity Framework的上下文中。

創建初始化數據

爲了方便測試，我們需要在數據庫創建好之後給其中添加一些數據。因此我們來創建一個數據初始化類來做這個工作。在DAL文件夾中創建一個類，命名爲CompanyInitializer.cs。寫入如下代碼：

 1 using System.Collections.Generic;
 2 using SlarkInc.Models;
 3 
 4 namespace SlarkInc.DAL
 5 {
 6     public class CompanyInitializer : System.Data.Entity.DropCreateDatabaseAlways<CompanyContext>
 7     {
 8         protected override void Seed(CompanyContext context)
 9         {
10             var students = new List<Worker>
11             {
12                 new Worker{FirstName="Andy",LastName="George",Sex = Sex.Male},
13                 new Worker{FirstName="Laura",LastName="Smith",Sex = Sex.Female},
14                 new Worker{FirstName="Jason",LastName="Black",Sex = Sex.Male},
15                 new Worker{FirstName="Linda",LastName="Queen",Sex = Sex.Female},
16                 new Worker{FirstName="James",LastName="Brown", Sex = Sex.Male}
17             };
18             students.ForEach(s => context.Workers.Add(s));
19             context.SaveChanges();
20         }
21     }
22 }

第6行，我們的數據初始化類繼承了一個名爲DropCreateDatabaseAlways的泛型類，這個類的作用就像它的名字，每次程序運行時都會刪除並重新創建數據庫，這樣方便我們測試。第8到20行，就是初始化數據的函數，重寫了父類的Seed函數，並接受CompanyContext 作爲數據庫上下文供我們操作。第18行用Linq語法將 students的數據添加到數據庫上下文的數據集中。第19行，將這些數據提交到數據庫。

然後要在Web.config文件中配置這個初始化器。在剛纔配置過的<context>中寫入如下所示的databaseInitializer即可。

<contexts>
   <context type="SlarkInc.DAL.CompanyContext, SlarkInc">
      <databaseInitializer type="SlarkInc.DAL.CompanyInitializer, SlarkInc" />
   </context>
</contexts>

type="SlarkInc.DAL.CompanyInitializer, SlarkInc"中的SlarkInc.DAL.CompanyInitializer表示這個CompanyInitializer的NameSpace和類名。逗號後面的SlarkInc表示這個CompanyInitializer在SlarkInc.dll中。

這樣我們的初始化器就完成了。

創建Controller

Controller沒學好的同學請猛戳我！

在Controllers文件夾下創建一個Controller選擇"MVC 5 控制器 - 空"，命名爲CompanyController.cs。寫入代碼如下：

 1 using System.Linq;
 2 using System.Web.Mvc;
 3 using SlarkInc.DAL;
 4 
 5 namespace SlarkInc.Controllers
 6 {
 7     public class CompanyController : Controller
 8     {
 9         private CompanyContext db = new CompanyContext();
10         public ViewResult Index()
11         {
12             return View(db.Workers.ToList());
13         }
14     }
15 }

爲了使用之前創建的Model和數據庫上下文，在第3行引入DAL命名空間並在第9行初始化CompanyContext。在第12行創建Index Action返回類型是ViewResult，那麼用戶請求就會返回一個View頁面。然後在第12行把所有的數據傳遞給View。第12行ToList方法是把數據以List的形式輸出。

創建View

要創建CompanyController的Index Action對應的View，首先在Views文件夾下創建Company文件夾。然後在Company文件夾下創建一個空視圖並選擇使用佈局頁。命名爲Index.cshtml。寫入如下代碼：

 1 @model IEnumerable<SlarkInc.Models.Worker>
 2 <table class="table">
 3     <tr>
 4         <th>@Html.DisplayNameFor(model => model.FirstName)</th>
 5         <th>@Html.DisplayNameFor(model => model.LastName)</th>
 6         <th>@Html.DisplayNameFor(model => model.Sex)</th>
 7         <th>@Html.DisplayNameFor(model => model.Rating)</th>
 8     </tr>
 9     @foreach (var item in Model)
10     {
11         <tr>
12             <td>
13                 @Html.DisplayFor(modelItem => item.FirstName)
14             </td>
15             <td>
16                 @Html.DisplayFor(modelItem => item.LastName)
17             </td>
18             <td>
19                 @Html.DisplayFor(modelItem => item.Sex)
20             </td>
21             <td>
22                 @Html.DisplayFor(modelItem => item.Rating)
23             </td>
24         </tr>
25     }
26 </table>

第1行，表示這個頁面用的Model是我們創建的Worker類。下面的代碼創建了一個table，用來顯示Controller傳來的數據。4-7行通過

DisplayNameFor獲取Model的屬性名作爲列頭顯示。第9-25行通過DisplayFor函數顯示數據。

查看結果頁面

選擇在瀏覽器中查看。就能看到如下顯示結果。

頁面的頭部和尾部應用了~/Views/Shared/_Layout.cshtml的默認佈局。中間部分就是在Index.cshtml文件生成的表。其中的4列是Model Worker中除了id外的其它4列數據。表裏的五行數據是我們在~/DAL/CompanyInitializer.cs中初始化的數據。

右鍵點擊頁面表格中的任何一個數據，選擇檢查元素，如下圖所示。