ASP.NET MVC 显示数据库表格-优快云博客

本教程的目的是向你介绍如何在ASP.NET MVC程序里显示一个数据库数据的HTML表格。首先，介绍了如何直接在视图中格式化数据库记录。接着，介绍了格式化数据库记录时如何利用 Partial。

创建模型类

我们将显示 Movies 数据库表中的记录集。Movies 数据库表包含下面的列：

列名称	数据类型	允许空值
Id	Int	False
Title	Nvarchar(200)	False
Director	NVarchar(50)	False
DateReleased	DateTime	False

为了在我们的ASP.NET MVC程序中表示Movies表，我们需要创建一个模型类。在这篇教程中，我们使用 Microsoft Entity Framework 来创建。

然而, 明白很重要的一点是，你可以在ASP.NET MVC程序中使用各种不同的技术来与数据库交互，包括 LINQ to SQL, NHibernate, 或者ADO.NET.

参照以下步骤启动实体数据模型向导：

在解决方案资源管理器上右键 Models 文件夹，选择“添加”，“新建项”。
选择“数据”分类，选择 ADO.NET Entity Data Model模板。
为你的数据模型命名为 MoviesDBModel.edmx 点击“添加”按钮。

点击“添加”按钮后，将出现“实体数据模型向导”对话框 (见图 1). 参照以下步骤完成向导：

在选择模型对象 这一步, 选择从数据库生成 选项.
在选择你的数据连接 这一步,使用 MoviesDB.mdf 数据连接并命名为 MoviesDBEntities。点击下一步 按钮。
在选择你的数据库对象 这一步, 展开“表”节点, 选择 Movies 表。输入命名空间 Models点击完成按钮。

图01:创建 LINQ to SQL 类(点击查看完整大小)

完成“实体数据模型向导”后，“实体数据模型设计器”出现。设计器将显示 Movies实体 (见图 2).

图02: 实体数据模型设计器(点击查看完整大小)

在继续之前我们要做点小改动。实体数据向导生成的模型类名为 Movies 用以表示 Movies数据库表。由于我们用 Movies 类来表示一个特定的电影，所以我们要把类名改为 Movie而不是 Movies (单数而不是复数).

在设计器界面上双击类名并将类名从Movies改为 Movie。更改完后，点击保存按钮 (软盘图标)来生成 Movie 类。

创建Movies 控制器

既然我们已经可以表示我们的数据库记录了，那么就可以创建控制器来返回电影的集合了。在 Visual Studio 解决方案资源管理器窗口中，右键点击 Controllers 文件夹并选择菜单项 添加, Controller (见图3).

图03:添加 Controller 菜单(点击查看完整大小)

Add Controller 对话框显示后, 输入控制器名 MovieController (见图4). 点击 Add 按钮添加新控制器。

图04: Add Controller 对话框(点击查看完整大小)

我们需要修改Movie控制器暴露的 Index() 操作以返回一组数据库记录。见代码1。

代码1 – Controllers/MovieController.cs

using System.Linq;

using System.Web.Mvc;

using MvcApplication1.Models; 

namespace MvcApplication1.Controllers

{

    public class MovieController : Controller

    {

        //

        // GET: /Movie/ 

        public ActionResult Index()

        {

            var entities = new MoviesDBEntities();

            return View(entities.MovieSet.ToList());

        } 

    }

}

在代码 1, MoviesDBEntities 类用来表示 MoviesDB 数据库。要使用这个类，你需要导入 MvcApplication1.Models 命名空间：

using MvcApplication1.Models;

表达式entities.MovieSet.ToList() 从Movies数据库表返回一组所有的电影。

创建视图

在HTML表格显示一组数据库记录的最简单方法是利用Visual Studio提供的脚手架。

选择菜单项 生成, 生成解决方案 运行你的程序。在打开 Add View 对话框之前你必须生成你的程序，否则你的数据类不会显示在对话框中。

在 Index() 操作上右键，选择菜单项 Add View (见图 5).

图05: 添加视图(点击查看完整大小)

在 Add View 对话框中, 勾选上 Create a strongly-typed view. 选择 Movie 类作为 view data class. 选择 List作为 view content (见图 6). 选择这些选项将生成一个显示一组电影的强类型视图。

图06: Add View 对话框(点击查看完整大小)

点击Add 按钮,代码 2 的视图自动生成。这个视图包含了需要遍历movies集合和显示movie每个属性的代码。

代码2 – Views/Movie/Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Movie>>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

      Index

</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <table>

        <tr>

            <th></th>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% foreach (var item in Model) { %>

   

        <tr>

            <td>

                <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |

                <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>

            </td>

            <td>

                <%= Html.Encode(item.Id) %>

            </td>

            <td>

                <%= Html.Encode(item.Title) %>

            </td>

            <td>

                <%= Html.Encode(item.Director) %>

            </td>

            <td>

                <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>

            </td>

        </tr>

   

    <% } %> 

    </table> 

    <p>

        <%= Html.ActionLink("Create New", "Create") %>

    </p> 

</asp:Content>

你可以选择菜单项 调试,启动调试 (或按F5建)来运行你的程序。运行程序将启动 Internet Explorer。如果你导航至 /Movie URL 那么你会看到如图7的页面。

图07: 电影表(点击查看完整大小)

如果你不喜欢图7中关于数据库表格的样式那么你可以简单地修改 Index 视图。例如，你可以将 DateReleased表头改为 Date Released 。

用Partial创建模板

当视图变得太复杂，将视图分解为部分是个好主意。使用partials使你的视图更易懂且更易维护。我们将创建一个partial作为模板来格式化每个 movie数据库记录。

参照以下步骤创建 partial:

右键点击 Views/Movie 文件夹选择菜单项 Add View.
勾选 Create a partial view (.ascx).
命名为 MovieTemplate.
勾选 Create a strongly-typed view.
view data class 中选择Movie类。
view content 选择Empty。
点击Add 按钮添加 partial 到你的项目中。

完成这些步骤后，修改 MovieTemplate partial使它如代码 3.

代码3 – Views/Movie/MovieTemplate.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcApplication1.Models.Movie>" %> 

<tr>

    <td>

        <%= Html.Encode(Model.Id) %>

    </td>

    <td>

        <%= Html.Encode(Model.Title) %>

    </td>

    <td>

        <%= Html.Encode(Model.Director) %>

    </td>

    <td>

        <%= Html.Encode(String.Format("{0:g}", Model.DateReleased)) %>

    </td>

</tr>

代码3 中的partial包含一行记录的模板。

代码4中修改后的Index 视图使用 MovieTemplate partial.

代码4 – Views/Movie/Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Movie>>" %> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <table>

        <tr>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% foreach (var item in Model) { %>

   

        <% Html.RenderPartial("MovieTemplate", item); %>

   

    <% } %> 

    </table> 

</asp:Content>

代码4中的视图包含一个 foreach 循环，遍历所有movies。对于每一个movie，MovieTemplate partial 用来格式化电影。MovieTemplate 通过调用 RenderPartial() helper方法呈现。

修改后的Index 视图呈现了完全相同的数据库记录的HTML表。然而，视图却被大大地改变了。

RenderPartial() 方法与其它大多数 helper方法不同，因为它不返回一个字符串。因此，你必须用<% Html.RenderPartial(); %> 而不是<%= Html.RenderPartial(); %>来调用RenderPartial()方法。