第1部分:概述和创建项目Part 1: Overview and Creating the Project

作者: Mike Wassonby Mike Wasson

下载完成的项目Download Completed Project

实体框架是对象/关系映射框架。Entity Framework is an object/relational mapping framework. 它将代码中的域对象映射到关系数据库中的实体。It maps the domain objects in your code to entities in a relational database. 大多数情况下,你不必担心数据库层,因为实体框架会为你处理此层。For the most part, you do not have to worry about the database layer, because Entity Framework takes care of it for you. 你的代码将操作这些对象,而更改将保存到数据库中。Your code manipulates the objects, and changes are persisted to a database.

关于教程About the Tutorial

在本教程中,你将创建一个简单的存储区应用程序。In this tutorial, you will create a simple store application. 应用程序有两个主要部分。There are two main parts to the application. 普通用户可以查看产品和创建订单:Normal users can view products and create orders:

管理员可以创建、删除或编辑产品:Administrators can create, delete, or edit products:

将要学到的技能Skills You'll Learn

学习内容:Here's what you'll learn:

  • 如何对 ASP.NET Web API 使用实体框架。How to use Entity Framework with ASP.NET Web API.
  • 如何使用挖空创建动态客户端 UI。How to use knockout.js to create a dynamic client UI.
  • 如何使用 Web API 的 forms 身份验证对用户进行身份验证。How to use forms authentication with Web API to authenticate users.

尽管本教程是独立的,但你可能希望先阅读以下教程:Although this tutorial is self-contained, you might want to read the following tutorials first:

ASP.NET MVC的一些知识也很有用。Some knowledge of ASP.NET MVC is also helpful.

概述Overview

从较高层次来看,此应用程序的体系结构如下:At a high level, here is the architecture of the application:

  • ASP.NET MVC 为客户端生成 HTML 页面。ASP.NET MVC generates the HTML pages for the client.
  • ASP.NET Web API 公开对数据(产品和订单)的 CRUD 操作。ASP.NET Web API exposes CRUD operations on the data (products and orders).
  • 实体框架将 Web C# API 使用的模型转换为数据库实体。Entity Framework translates the C# models used by Web API into database entities.

下图显示了如何在应用程序的各个层上表示域对象:数据库层、对象模型,最后是用于通过 HTTP 将数据传输到客户端的网络格式。The following diagram shows how the domain objects are represented at various layers of the application: The database layer, the object model, and finally the wire format, which is used to transmit data to the client via HTTP.

创建 Visual Studio 项目Create the Visual Studio Project

您可以使用 Visual Web Developer Express 或完整版 Visual Studio 创建教程项目。You can create the tutorial project using either Visual Web Developer Express or the full version of Visual Studio.

起始页中,单击 "新建项目"。From the Start page, click New Project.

在 "模板" 窗格中,选择 "已安装模板",然后展开视觉对象C# 节点。In the Templates pane, select Installed Templates and expand the Visual C# node. " C#视觉对象" 下选择 " Web"。Under Visual C#, select Web. 在项目模板列表中,选择 " ASP.NET MVC 4 Web 应用程序"。In the list of project templates, select ASP.NET MVC 4 Web Application. 将项目命名为 "ProductStore",然后单击 "确定"。Name the project "ProductStore" and click OK.

在 "新建 ASP.NET MVC 4 项目" 对话框中,选择 " Internet 应用程序",然后单击 "确定"In the New ASP.NET MVC 4 Project dialog, select Internet Application and click OK.

"Internet 应用程序" 模板创建一个支持窗体身份验证的 ASP.NET MVC 应用程序。The "Internet Application" template creates an ASP.NET MVC application that supports forms authentication. 如果现在运行应用程序,该应用程序已经有一些功能:If you run the application now, it already has some features:

  • 新用户可以通过单击右上角的 "注册" 链接进行注册。New users can register by clicking the "Register" link in the upper right corner.
  • 注册用户可以通过单击 "登录" 链接登录。Registered users can log in by clicking the "Log in" link.

成员资格信息保留在自动创建的数据库中。Membership information is persisted in a database that gets created automatically. 有关 ASP.NET MVC 中 forms 身份验证的详细信息,请参阅演练:在 ASP.NET mvc 中使用 Forms 身份验证For more information about forms authentication in ASP.NET MVC, see Walkthrough: Using Forms Authentication in ASP.NET MVC.

更新 CSS 文件Update the CSS File

此步骤是表面的,但它会使页面呈现为之前的屏幕快照。This step is cosmetic, but it will make the pages render like the earlier screen shots.

在解决方案资源管理器中,展开 "Content" 文件夹,然后打开名为 "web.config" 的文件。In Solution Explorer, expand the Content folder and open the file named Site.css. 添加以下 CSS 样式:Add the following CSS styles:

.content {
    clear: both;
    width: 90%;
}

li {
    list-style-type: none;
}
        
#products li {
    width: 300px;
    background-color: #aaf;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0;
    margin: 0 0 5px 0;
    padding: 0 5px 0 5px;
}
        
.price  {
    float: right;
    color: #c00;
    font-size: 0.75em;
}
        
.details thead td {
    background-color: #CCCCCC;
    color: #333333;
}

.details td {
padding: 6px;
}
        
.details td.qty {
text-align: center;
}       
        
#cart a {
color: Blue;
font-size: .75em;
} 
        
#update-products li { 
    padding: 5px; 
    color: #666;
    border-style: dashed;
    border-width: 2px;
    border-color: #666;
}

#update-products li .item {
width: 120px;
display: inline-block;
text-align: right;
}