65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 ASP.NET MVC 4、Entity Framework 5 的调查 Web 应用

Kyle Seidel
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.85/5 (6投票s)

2013年4月27日

CPOL

13分钟阅读

viewsIcon

74234

downloadIcon

2925

使用最新的 Microsoft 技术构建的简单调查 Web 应用。

 

 

 

 我的调查 Azure 网站 

 

介绍  

一个使用 ASP.NET MVC 4、Entity Framework 5 和 SimpleMembership 的调查应用程序。

Azure 的优势   

我相信 Azure 可以帮助简化部署过程，通过 Visual Studio 2012 中的发布配置文件。我无需担心配置数据库和网站的兼容性... Azure 会负责一切。 

背景

我在一家咨询公司工作，注意到我们经常发送带有简单问题的 Excel 文档让客户填写。但如果我们只发送一个链接，他们可以使用 Google、Twitter 或 Facebook 登录呢？如果...  

数据库设计基于 Stack Overflow 的这个问答： http://stackoverflow.com/questions/540885/db-design-survey-quiz-with-questions-and-answers 

随着项目的进展，它可能会继续演变。我决定不使用“Code First”数据库设计，因为我发现更容易在 SQL Server Management Studio 中生成表，然后让 Entity Framework 生成我的模型。  

我知道市面上有一些 .NET 开源调查项目。但这些项目在过去几年里都没有更新过。我希望创建一个灵活、安全且易于使用的东西。  

使用代码

这是一个正在进行中的项目... 我将上传创建数据库的脚本以及重要的代码片段。 

源代码管理...因为我们可以 

首先，让我们在 tfs.visualstudio.com 上使用 Team Foundation Server (TFS) 创建一个新项目...它是免费的，你只需要一个 Microsoft  账户（Windows Live ID）。你可以在这里创建一个 Microsoft 账户 https://signup.live.com/signup.aspx?lic=1 注意：所有步骤均在 Internet Explorer 10 上完成。 

  1. 访问 http://tfs.visualstudio.com/ 
  2. 点击右上角的“Sign up for free”（免费注册）或如果您已有账户，请点击“Sign In”（登录）
  3. 通过在文本框中输入您的选择来创建您唯一的账户 URL...您可以使其简单，只需使用您的名字和姓氏。 
  4. 点击“Create Account”（创建账户）按钮。
  5. 您将被重定向到使用您的 Microsoft 账户登录。
  6. 登录后，将显示 Team Foundation Service 主页。点击左侧的“New Team Project”（新建团队项目）按钮。 

在 TFS 中创建项目 

  1. 输入项目名称（例如：MySurveyProject） 
  2. 输入描述（可选） 
  3. 选择您的进程模板（我保留了 Microsoft Visual Studio Scrum 2.2 的默认设置） 
  4. 选择版本控制 （同样，保留 Team Foundation Version Control 的默认设置） 
  5. 点击“Create Project”（创建项目）按钮  
  6. 项目创建后，点击“Navigate to Project”（导航到项目）按钮
  7. 在“Activities”（活动）下，点击“Open a new instance of Visual Studio”（打开 Visual Studio 的新实例）  
  8. 点击弹窗上的“Allow”（允许）...它只是在确认您是否希望网页打开应用程序（Visual Studio）  
  9. 输入您的 Microsoft 账户凭据以完成与 Team Foundation Server 的连接
  10. 恭喜！您已成功在 TFS 中创建了一个新项目，并配置了 Visual Studio 连接到您的项目。现在...让我们创建一个新的 ASP.NET MVC 4 Web 应用程序。 

创建 ASP.NET MVC 4 Web 应用程序  

  1. 回到您新打开的 Visual Studio 实例。从“Start Page”（开始页）点击“New Project...”（新建项目...）链接。
  2. 选择 ASP.NET MVC 4 Web Application 项目 
  3. 在 Name（名称）文本框中输入 **MySurvey**。 
  4. 确保“Create directory for Solution”（为解决方案创建目录）和“Add to source control”（添加到源代码管理）复选框已勾选

  5. 确保“Create a unit test project”（创建单元测试项目）复选框已勾选。将 View engine（视图引擎）保留为 **Razor**

  6. 保留“Add Solution MySurvey to Source Control”（将解决方案 MySurvey 添加到源代码管理）的默认设置，然后点击“OK”（确定）按钮。

  7. Web 应用程序已创建，但尚未上传/保存到 TFS。项目加载完成后，点击 VIEW -> Team Explorer。然后点击 Pending Changes（挂起更改）链接。在 Comment（注释）字段中输入 **Initial check-in**。
  8. 点击注释字段上方的 Check In（签入）按钮 
  9. 在 Check-in Confirmation（签入确认）对话框中点击 Yes（是）。您的第一次签入将花费最长时间，因为您正在签入所有内容。未来的签入花费的时间会更短，因为您一次只会签入少数几个文件。
  10. 按 F5 构建并查看您新的 ASP.NET MVC 4 Web 应用程序。现在，让我们对其进行一些快速更改并将其部署到 Azure Websites。

更新页眉和页面标题 

 

  1. 在 MySurvey 项目中，展开 Views（视图）文件夹，然后展开 Shared（共享）文件夹。双击并打开 _Layout.cshtml 
  2. 在第 15 行将文本从“your logo here”更改为“**MySurvey**”。这将把所有页面左上角的文本更改为 **MySurvey** 
  3. _Layout.cshtml 文件被所有页面引用，允许您轻松进行快速的全局更改。  
  4. 现在让我们更新主页标题。打开 Controller（控制器）文件夹中的 HomeController.cs  
  5. 在“ActionResult Index()”函数中添加以下行 
    ViewBag.Title = "MySurvey HomePage";   
  6. 整个代码应该看起来像这样：   
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
ViewBag.Title = "MySurvey HomePage";
return View();
}

现在运行 Web 应用程序。当页面显示时，它仍然显示“Homepage”（主页），而应该显示“MySurvey HomePage”。怎么回事？

嗯，Title 属性当前设置在视图中。让我们打开视图并注释掉那一行。

 

  1.  展开 View（视图）文件夹，然后展开 Home（主页）文件夹。打开 Index.cshtml 文件。 
  2.  注释掉第二行。看起来应该像这样
@{
//ViewBag.Title = "Home Page";
}

 现在运行 Web 应用程序。标题是正确的！我向您展示这一点只是为了让您更熟悉 ASP.NET MVC。既然我们知道如何进行简单更改，并且我们的默认 ASP.NET MVC Web App 已定制（一点点 微笑 | <img src= " />  ），让我们去 Windows Azure 创建一个账户，创建一个网站，然后部署到该网站。

注册 Windows Azure 

 

  1. 访问 http://www.windowsazure.com 
  2. 使用您为 TFS 注册的 Microsoft 账户，注册一个免费的 90 天试用版。 

创建 Azure 网站  

 

既然您已成功创建 Windows Azure 账户，让我们创建一个可以部署 ASP.NET MVC 4 Web 应用程序的网站。 

 

  1.  登录 Windows Azure Portal 后，点击左下角的 New（新建）按钮，然后选择 Compute -> Website -> Custom Create（计算 -> 网站 -> 自定义创建） 
  2. 输入一个 URL 并选择离您最近的区域。在 Database（数据库）下选择 **Create a new SQL Database**（创建新的 SQL 数据库）。将 DB Connection String Name（数据库连接字符串名称）保留为 **DefaultConnection**。确保勾选 Publish from source control（从源控件发布）。（我知道将它放入源控件是有原因的）。点击“Next”（下一步）箭头。

  3. Database settings（数据库设置）。我通常保留默认的数据库名称。我不知道 Microsoft 是否在实践“通过模糊化实现安全”，还是他们只是随机化名称以避免名称冲突。在 Server（服务器）下拉列表中选择 **New SQL database server**（新建 SQL 数据库服务器）。 输入用户名和密码。我喜欢使用 http://correcthorsebatterystaple.net/ 来生成密码。 同样，我选择离我最近的区域。 点击“Next”（下一步）箭头。

  4. Where is your source code?（您的源代码在哪里？）选择 **Team Foundation Server** 然后点击“Next”（下一步）箭头。 

  5. 输入您之前创建的 TFS 的 URL。然后点击 Authorize Now（立即授权）按钮/箭头。
  6. 将显示一个新窗口，询问 Windows Azure 是否可以连接到 TFS，“OK”（确定）。点击绿色的 Accept（接受）按钮。 


     
  7. Choose a repository to deploy page（选择要部署的存储库页面）。在 Repository Name（存储库名称）下拉列表中选择 **MySurveyProject**。 然后点击“Check mark”（勾号）。


     
  8. 您的网站将在门户中显示，状态为“Creating”（正在创建）。完成后将显示“Running”（正在运行）以及 URL。点击 URL 查看您的网站。您将看到默认的 Windows Azure Web Site。

您可能会对自己说：“我们告诉 Azure 使用源控件进行部署...为什么我们看不到我们很棒的 ASP.NET MVC 4 网站？” 让我们到 Windows Azure Portal 看看发生了什么。 

如果您登录到门户并点击您新创建的网站，您将看到“Quick start”（快速入门）屏幕。在该屏幕底部，在 Integrate source control（集成源控件）标题下，点击 View deployments（查看部署）链接。我发现了！

 

当我们签入一些代码时，网站将自动部署。还记得我们编辑过的文件吗？我们从未签入它们！让我们开始吧。

签入并执行部署！ 

 我为《星际迷航》的引用道歉，实在忍不住。回到正题... 

 

  1.  回到 Visual Studio 2012 并查看 Team Explorer（视图 -> Team Explorer）。如果未显示 Pending Changes（挂起更改）部分，请点击顶部的“Home”（主页）按钮，然后点击 Pending Changes（挂起更改）链接。 
  2. 输入注释。您可以看到我输入了“Updated homepage title”（更新了主页标题）。点击“Check In”（签入）按钮 

  3. 确认签入。


     
  4. 现在回到 Windows Azure Portal。点击您的网站并转到 Deployments（部署）部分。可能需要一两分钟...但它会自动显示正在部署。

  5. 部署完成后，它会告诉您这是 Active Deployment（活动部署）。


     
  6. 现在访问您的网站。（您可能需要按住 Shift 键并点击刷新按钮。这样做会直接从服务器拉取，而不是从缓存中拉取。）您现在应该可以看到您的 ASP.NET MVC 4 网站。

那是简单的事情。让我们添加一个数据库。 

挑战 3 - SQL Azure 数据库 

下载 MySurveyDB.zip 

正如本文前面提到的，我将使用 Stack Overflow 答案中的数据库图。我使用 SQL Server Management Studio 中的设计器创建了数据库，并附上了 SQL 脚本，以便您可以快速轻松地创建数据库。 

 

  • 打开 Microsoft SQL Server Management Studio 并连接到您的本地 DB 
     
  • 右键单击您的本地服务器并选择 New Query（新建查询） 
  • 将本文顶部（或本节顶部）包含的 MySurveyDB.sql 中的 SQL 粘贴进去。
  • 按 F5 键执行 SQL  
  • 如果一切顺利，您将在消息窗口中看到“Command(s) completed successfully.”（命令成功完成）。您现在应该有一个名为 **MySurvey** 的数据库（您可能需要刷新“Databases”（数据库）文件夹：右键单击 -> Refresh（刷新））。 

 

为 SQL Azure 生成脚本 

有几种方法可以移动或复制数据库到 Azure。我们将使用我们刚刚创建的数据库，并让 SQL Server Management Studio (SSMS) 2012 为 SQL Azure 生成脚本。我们生成脚本是因为在创建网站时，我们还让它创建了一个数据库。现在我们只需用我们的新表更新数据库。 

 

  • 右键单击您的新数据库 -> Tasks -> Generate Scripts（任务 -> 生成脚本）
     
  •  将显示以下屏幕。点击“Next”（下一步）按钮。
  • 确保选择“Script entire database and all database objects”（脚本整个数据库和所有数据库对象）单选按钮。点击“Next”（下一步）按钮。
  • 在“Output Type”（输出类型）部分，选择“Save scripts to a specific location”（将脚本保存到特定位置）单选按钮。然后选择“Save to new query window”（保存到新查询窗口）单选按钮。我们只需将脚本从 SSMS 的查询窗口复制到 SQL Azure 查询窗口。
  • 点击“Advanced”（高级）按钮。在“General”（常规）部分找到“Script DROP and CREATE”，并将选项从“Script CREATE”（脚本 CREATE）更改为“Script DROP and CREATE”（脚本 DROP 和 CREATE）。然后，再往下三个选项是“Script for the database engine type”（数据库引擎类型的脚本）...将其更改为“SQL Azure Database”（SQL Azure 数据库）。在高级窗口中点击“OK”（确定），然后点击“Next”（下一步）

     
  • 查看摘要屏幕并点击“Next”（下一步）按钮。

     
  • 一切都应该显示为“Success”（成功）。点击“Finish”（完成）按钮。
  •  然后您将在 SSMS 2012 中看到一个脚本。我们现在可以将此脚本复制/粘贴到 SQL Azure。 
  •  

更新 SQL Azure 中的数据库 

 

  • 登录 Windows Azure portal 并选择左侧菜单中的“SQL DATABASES”选项。 
  • 选择与您的网站一起创建的数据库。通过点击“STATUS”（状态）列下的内容来选择数据库。选择数据库后，点击底部的“MANAGE”（管理）按钮。
  • 将打开一个新窗口。输入创建 Azure 网站和数据库时创建的数据库凭据。点击“Log on”（登录）按钮。
  • 登录后，将显示数据库的“Summary”（摘要）屏幕。点击顶部的“New Query”（新建查询）按钮。
  • 复制我们在上一节创建的脚本，并将其粘贴到窗口中。右键单击不起作用，因为这是一个 Silverlight 应用程序。使用 Ctrl+V 粘贴。点击“Run”（运行）按钮。
  • 即使看到有关无法删除约束的消息，也不要担心。 

现在我们的数据库已在 SQL Azure 中！并且由于我们同时创建了网站和 SQL Azure 数据库，Windows Azure 自动将这些资源链接在一起。所以当我们部署（签入到 TFS）时，它将自动使用我们刚刚更新的数据库。无需更改 web.config！

 

Entity Framework 和 Scaffolding

既然我们的数据库已在本地机器和 SQL Azure 上设置好，我们现在就可以使用 Entity Framework 将我们创建的表添加为 ASP.NET MVC 4 Web 应用程序的模型，并让 Visual Studio 的 Scaffolding 完成 CRUD 工作。

添加数据模型

首先，我们需要将数据库添加为使用 Entity Framework 的数据模型。

 

  • 右键单击“Models”（模型）文件夹，选择“Add” -> “New Item...”（添加 -> 新项...） 
  • 在左侧选择“Data”（数据），然后在右侧选择“ADO.NET Entity Data Model”。在窗口底部，“Name:”（名称：）字段中输入“Survey.edmx”。点击“Add”（添加）按钮。
  • 选择“Generate from database”（从数据库生成）...我们将从我们刚刚创建的数据库生成模型。点击 Next（下一步）按钮。 
  • 点击“New Connection...”（新建连接...）按钮 
    • 输入数据库的服务器名称。一切都在我的本地机器上运行，但我使用的是 SQL Server 的命名实例。所以我输入“(local)\SQLEXPRESS” 
    • 在“Log on to the server”（登录到服务器）部分，选择 Use Windows Authentication（使用 Windows 身份验证）
    • 在“Connect to a database”（连接到数据库）部分，选择我们用 SQL 脚本创建的新数据库...“MySurvey” 
    • 点击“Test Connection”（测试连接）按钮。点击“OK”（确定）
       
    • 在 Connection Properties（连接属性）窗口中点击“OK”（确定） 按钮。
  • 保留默认设置，点击“Next”（下一步）按钮 
  • 选择“Tables”（表）复选框。点击“Finish”（完成）按钮。  

点击完成，您将看到数据库的图示。现在我们有了数据模型，就可以使用 Scaffolding 来简化我们的工作了。在继续使用 Scaffolding 创建控制器和视图之前，我们需要 **build**（生成）项目。按 F6 键。 

使用 Scaffolding 创建控制器和视图  

让我们先添加“Organization”（组织）控制器。 

 

 

  • 右键单击 Controllers（控制器）文件夹，选择“Add” -> “Controller...”（添加 -> 控制器...）
     
  • 在“Controller name:”（控制器名称：）字段中输入“OrganizationController”
  • 对于 scaffolding 选项 
    • Template: MVC controller with read/write actions and views, using Entity Framework（模板：具有读写操作和视图的 MVC 控制器，使用 Entity Framework）
    • Model class: Select "Organization (MySurvey.Models)”（模型类：选择“Organization (MySurvey.Models)”）
    • Data context class: Select "MySurveyEntities (MySurvey.Models)”（数据上下文类：选择“MySurveyEntities (MySurvey.Models)”）
    • Views: Select "Razon (CSHTML)”（视图：选择“Razor (CSHTML)”）
    • 点击“Add”（添加）按钮，Visual Studio 的 Scaffolding 将自动创建控制器和关联的视图。视图文件将打开。 
  • 按 F5 生成并运行 Web 应用程序。
  • 主页加载后，只需在末尾添加“Organization”并按 Enter 键。
    在此处测试：http://mysurvey1.azurewebsites.net/Organization 
  • 点击“Create”（创建）链接
  • 输入组织名称。例如：“Microsoft”
  • 点击“Create”（创建）按钮。 

您刚刚向数据库添加了一个组织。您所做的一切都没有写一行代码。在我看来，非常智能。 

 

我们已经添加了 Organization 控制器。对以下模型执行相同的操作： 

 

  • InputType
  • OptionChoice
  • OptionGroup
  • 提问
  • QuestionOption
  • SurveyHeader
  • SurveySection
  • UnitOfMeasure

这些是我们可以使用 Scaffolding 创建的简单模型。像“Answer”这样的模型，我们需要深入研究。   完成后，签入代码以在 Azure 上触发部署。 

 

兴趣点 

第一个障碍是将 SimpleMembership 从“(LocalDB)”更改为 SQLExpress。由于我使用的是 Entity Framework，它不喜欢连接字符串。我不得不创建一个基本的连接字符串，以便 SimpleMembership 可以正确初始化。我稍后会详细解释。

历史 

    • 2013-04-26 - Windows Azure Developer Challenge 的初始提交 
    • 2013-05-01 - 添加了 TFS 部分
    • 2013-05-02 - 添加了 Azure 网站创建  
© . All rights reserved.