MVC 初学者应用程序

• 下载源代码 - 4.39 MB

引言

在我上一篇博客中，我们阅读了MVC的生命周期。访问MVC介绍。现在，我们将创建我们的第一个MVC应用程序。MVC 4是最新版本。我们将使用Microsoft Visual Studio 2012来创建MVC 4应用程序。Visual Studio 2010也支持MVC 4，但我们需要额外安装。可以使用Web Platform Installer进行安装（http://www.microsoft.com.web/gallery/install.aspx?appid=MVC4VS2010）。

MVC 4需要以下配置

让我们创建一个名为“Employee Information”的应用程序。打开VS 2012，选择“文件”->“新建项目”。（MVC是一个项目模板，而不是网站）。选择“ASP.NET MVC 4 Web Application”，并将其命名为“EmployeeInformation”，然后点击“确定”。

点击“确定”按钮后，它会要求我们选择一个模板 –

项目模板

• 空白模板 - 它只有基本的文件夹结构和程序集。其余的都可以根据我们的需要进行开发。
• 基础模板 - 它包含基本的文件夹、CSS和MVC应用程序基础设施。如果我们运行使用基础模板创建的应用程序，它将显示错误。我们需要编写代码。它主要面向希望精确配置各项事务的经验丰富的开发人员。
• Internet Application模板 - 它包含MVC应用程序的初始设置，足以让我们在创建后立即运行应用程序。
• Intranet Application模板 - 它与Internet Application模板基本相同。区别在于“账户管理”功能是针对Windows账户运行的，而不是ASP.NET会员系统。
• Mobile Application模板 - 它用于移动应用程序的开发。它包含移动视觉主题、针对触摸优化的UI以及对AJAX导航的支持。
• Web API模板 - ASP.NET Web API是创建HTTP服务的框架。它类似于Internet Application模板，但没有用户账户管理功能。

我们将选择Internet Application模板。

接下来是视图引擎下拉列表。

它包含两种不同的视图引擎 – Razor视图引擎和Web Forms视图引擎。我们将选择Razor。Razor与HTML配合使用，旨在提供简洁、轻量级、简单的视图引擎。它最大限度地减少了语法和额外字符的数量，并尽可能少地使用语法。

接下来是创建单元测试项目复选框。我们将选中它，然后就会创建单元测试。点击“确定”，解决方案将创建两个项目 – 一个用于应用程序，另一个用于单元测试。我们的项目中会自动添加许多文件和文件夹，如下所示 –

我们将把所有控制器添加到Controllers文件夹，模型添加到Models文件夹等。也就是说，一切都放在各自的文件夹中。Scripts文件夹包含所有支持JQuery的必要JavaScript文件。Content文件夹包含Site.css文件，我们可以通过它进行设计。

这些默认文件为我们提供了一个可运行的应用程序的基本结构，其中包含主页、关于页以及登录/注销/注册页。

命名约定 - 如何命名要添加到MVC应用程序的文件

• 控制器 – 每个控制器的类名都以Controller后缀结尾。例如：HomeController。
• 视图 – 每个应用程序中都有一个Views文件夹。在Views文件夹中，有子文件夹，其名称与控制器名称相同，但去掉Controller后缀。例如：对于HomeController，在Views文件夹下会有一个名为Home的文件夹。
• 模型 – 模型名称将根据表名加上Model后缀。例如：Account Model的名称将是AccountModel。

项目结构已创建。现在我们需要添加我们的功能。我们将创建一个关于员工信息的项目。这是一个实体框架。因此，我们首先需要创建模型。右键单击Models文件夹，添加一个名为EmployeeModels.cs的新类，并添加属性 –

DepartmentModels.cs –

CityModels.cs –

StateModels.cs –

我们可以看到Employee Model在每个Department、City和State中包含两个属性。我们称它们为导航属性。使用Employee，我们可以通过点运算符导航到Department名称、City名称和State名称。

这些模型将与数据库进行交互。现在我们将添加控制器以执行操作 –

右键单击Controllers文件夹，选择“添加新控制器”，并将其命名为EmployeeController。我们将被要求输入控制器名称，将其命名为EmployeeController。

脚手架选项 - ASP.NET MVC中的脚手架将在应用程序中生成创建、读取、更新和删除（CRUD）功能。脚手架知道如何创建视图、如何命名视图以及将所有内容放置在哪里。

因此，在模板下拉列表中，我们将选择使用Entity Framework的具有读/写操作和视图的MVC控制器。在模型下拉列表中，我们将选择我们的EmployeeModels。对于DataContext类，当我们点击它并选择时，会弹出一个窗口 –

它将在Controllers文件夹中添加EmployeeController，并自动添加用于创建、读取、更新和删除功能的代码，并相应地创建视图。在Controllers中，有ActionResult方法。ActionResult方法的名称必须与视图的名称相同。包含该视图的视图文件夹的名称必须与控制器名称相同，但去掉Controller后缀。

当我们构建应用程序时，它会自动在本地数据库中创建表 –

现在，我们的应用程序已准备好基本功能 –

运行应用程序，在localhost后面输入– Employee。这是将运行的控制器。根据Employee表，它将创建列。我们可以通过Index View进行编辑。

工作原理 - 当我们运行MVC应用程序时，我们必须在URL中提供“Controller/View/ID”，其中ID是可选的。我们知道控制器是与模型和视图交互的。因此，我们需要编写Controller/View。一个控制器有许多ActionResult方法。那么问题来了，当我们调用一个特定的控制器时，控制器是如何知道要执行哪个ActionResult方法的呢？答案是视图的命名约定。在Views文件夹下，我们需要一个文件夹，其名称与控制器名称相同，但去掉Controller后缀。在该文件夹下，我们有不同的视图，其名称将与该控制器的ActionResult方法名称相同。因此，在我们的URL中，我们提供Controller/View。这就是控制器知道要运行哪个视图的方式。

让我们创建一个记录。当我们点击“创建新”时，Create.cshtml视图将接收到调用。

通过这张截图，我们可以看到点击“创建新”链接后，Create视图是如何打开的。将打开以下屏幕 –

我们可以添加任意数量的记录。我们可以通过Create.cshtml编辑属性的标题。

创建记录后，我们可以编辑和删除该记录。我们也可以在设计层面进行修改。

这是一个简单的MVC应用程序。现在，请修改您的代码并查看相应的更改。