ASP.Net MVC开发基础学习笔记（7）：数据查询页面



前言

前面铺垫了那么多，今天我们就用MVC5 + EF6 + Bootstrap3来正式创建一个基本查询页面。

为什么从查询页面開始？嘿嘿。由于小弟的.Net生涯就是从查询页面開始的，记得正式工作的第一个月就是各种模块的查询。先做查询有什么优点？首先查询仅仅读数据。不写数据。对数据库本身的数据安全不造成影响也不怕写入脏数据的麻烦。其次增删改查这四个操作里面。查询的难度应该是最小的，不用考虑事务流程等方面的问题。

本节最后将会生成例如以下页面：

创建Model

关于Model、数据库上下文、Entity Framework,本系列教程前面已经有介绍

在Models目录下创建一个类，命名为Worker.cs。这个类就是我们这里要用到的Model。代码例如以下：

namespace SlarkInc.Models
{
    public enum Sex
    {
        Male, Female
    }
    public class Worker
    {
        public int ID { get; set; }
        public string LastName { get; set; }
        public string FirstName { get; set; }
        public Sex Sex { get; set; }
        public double? Rating { get; set; }
    }
}

为了方便说明。增加行号。假设想要复制代码，请点击左上角的小图标就会出现不带行号的代码。在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。写入代码例如以下：

using System.Data.Entity;
using SlarkInc.Models;
using System.Data.Entity.ModelConfiguration.Conventions;

namespace SlarkInc.DAL
{
    public class CompanyContext : DbContext
    {
        public CompanyContext()  : base("CompanyContext")
        {
        }

        public DbSet<Worker> Workers {get;set;}

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
        }
    }
}

由于我们这里数据库訪问要用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。写入例如以下代码：

using System.Collections.Generic;
using SlarkInc.Models;

namespace SlarkInc.DAL
{
    public class CompanyInitializer : System.Data.Entity.DropCreateDatabaseAlways<CompanyContext>
    {
        protected override void Seed(CompanyContext context)
        {
            var students = new List<Worker>
            {
                new Worker{FirstName="Andy",LastName="George",Sex = Sex.Male},
                new Worker{FirstName="Laura",LastName="Smith",Sex = Sex.Female},
                new Worker{FirstName="Jason",LastName="Black",Sex = Sex.Male},
                new Worker{FirstName="Linda",LastName="Queen",Sex = Sex.Female},
                new Worker{FirstName="James",LastName="Brown", Sex = Sex.Male}
            };
            students.ForEach(s => context.Workers.Add(s));
            context.SaveChanges();
        }
    }
}

第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。

写入代码例如以下：

using System.Linq;
using System.Web.Mvc;
using SlarkInc.DAL;
namespace SlarkInc.Controllers
{
    public class CompanyController : Controller
    {
        private CompanyContext db = new CompanyContext();
        public ViewResult Index()
        {
            return View(db.Workers.ToList());
        }
    }
}

为了使用之前创建的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。写入例如以下代码：

@model IEnumerable<SlarkInc.Models.Worker>
<table class="table">
    <tr>
        <th>@Html.DisplayNameFor(model => model.FirstName)</th>
        <th>@Html.DisplayNameFor(model => model.LastName)</th>
        <th>@Html.DisplayNameFor(model => model.Sex)</th>
        <th>@Html.DisplayNameFor(model => model.Rating)</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sex)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Rating)
            </td>
        </tr>
    }
</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中初始化的数据。

右键点击页面表格中的不论什么一个数据，选择检查元素，例如以下图所看到的。

这样在F12开发者工具窗体的右側就会有相应元素的css样式。

因为我们在Index.cshtml中设置了<table class="table">因此这个表格的全部元素都会套用Bootstrap的表格样式，例如以下所看到的。

查看数据库

在解决方式资源管理器中点击例如以下图所看到的的显示全部文件button使全部文件显示。

然后在App_Data下会出现一个CompanyContext.mdf的数据库文件。例如以下图所看到的。

双击这个文件，会出现server资源管理器窗体例如以下图所看到的：

能够看到两个数据库连接。不用操心。第一个是我们执行程序后生成的连接，第二个是刚才双击mdf文件生成的连接。两个连接效果是一样的。

双击第二个连接的"表"目录下的Worker表。就能够查看我们用EF Code First 方法生成的表了。显演示样例如以下：

左上方是表结构，右上方是表的其它属性，下方是生成表用的SQL语句。

在server资源管理器中右键点击Worker表，选择"显示表数据"就会显演示样例如以下图的全部数据，是不是和页面显示的一样呢？

结尾

这一节我们应用MVC5 + EF6 + Bootstrap3创建了第一个正式的数据查询页面。后面我们会给这个页面增加keyword查询、分页、排序等功能。

为了实现这些功能我们会介绍很多其它的EF函数及Linq的用法。敬请期待。