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

从 MVC 开始 - 新手入门（第一部分）

Er. Puneet Goel
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.81/5 (30投票s)

2014年3月11日

CPOL

8分钟阅读

viewsIcon

46459

本文是关于如何开始使用 MVC。这是一个非常简单实用的文章，包含了使用 MVC 进行基本的保存、更新和删除操作。

引言

对于 MVC 新手来说，很难找到一个简单的文章来开始他们的 MVC 之旅。我曾经也面临过同样的问题。因此，我从多个来源学习，最终写下了这篇文章，希望能让大家更容易地开始使用 MVC。本文演示了使用 Entity to SQL 和 MVC 进行基本的添加、更新和删除功能。

背景

在我们开始阅读本文之前，我建议您阅读一篇提示文章 “面向初学者的实体框架示例应用程序”。 我发现这篇文章非常有帮助，因为我们也将在这项目中用到 Entity to SQL。我选择这种方法的原因是您无需担心创建模型，这样可以节省大量时间。而且，在这个方法中，数据库的更改和模型的相应更新也很容易。为了简单起见，我将使用与该项目/文章/提示中相同的数据库。因此，要开始本教程，只需要具备 ASP.NET Web Forms 和实体框架的基础知识。

什么是 MVC？

MVC 是一种开发模式，它将应用程序分为三个部分，这三个部分相互通信，从而为我们提供一个可用的应用程序。这三个部分是：

  • Model (模型)：它作为应用程序的数据访问层。它只是一个简单的类，在 ASP.NET Web Forms 中已经用过了。
  • View (视图)：它作为用户的表示层（UI 层）。我们主要在这里编写 HTML。
  • Controller (控制器)：它作为应用程序的业务逻辑层。每当用户发出任何请求时，请求都会在此结束，然后控制器会使用模型向用户提供一个视图。

这就是 MVC 的基本概念。它很简单，不是吗？那么 废话不多说...让我们开始我们的第一个项目。祝您好运！！

使用代码

希望您已经阅读了那篇文章（“面向初学者的实体框架示例应用程序”），因为我们将使用相同的数据库。本文是其先决条件。

现在，让我们开始创建一个新的 MVC 4 应用程序（我使用的是 MVC 4）。以下是操作步骤：

1. 创建项目 > Visual C# > MVC > ASP.NET MVC 4 Web Application

给它一个名字，然后点击“OK”保存。

2. 选择项目模板。您可以根据自己的需求选择任何模板，但我们选择“Internet Application”，因为它提供了一个现成的基本模板，对新手非常有帮助。

保持视图引擎为 Razor。（MVC 提供的默认视图引擎之一）。点击“OK”，您将获得一个准备好的模板。您可以运行它来测试它是否正常工作。我相信它会工作的。那么，让我们继续。

3. 带有现成模板的第一个屏幕：以下是 MVC 项目的第一个屏幕的一些详细信息。

现在，如果您关注右侧的“解决方案资源管理器”，您会发现这里创建了一些文件夹。这是因为我们为项目选择了 Internet 模板。在这里，应用程序的三个层（模型、视图和控制器）被分离到不同的文件夹中，并保持彼此隔离。以下是详细视图。

现在让我们看看我们 Home 控制器的左侧部分。这是我们项目中非常重要的一部分，因为我们大部分时间都会在这里实现我们的业务逻辑。此部分中的每个方法都将执行自己的独立操作，并为我们提供一个视图。

现在您可以修改 Index、About 或 Contact 方法中的代码，您的更改将在视图中得到反映。这是基础。但我们不会使用硬编码数据来处理 MVC 应用程序。所以，让我们引入数据库。

4. 创建数据库（MS SQL SERVER）和实体数据模型。

您可以通过运行此处提供的脚本来创建数据库（“面向初学者的实体框架示例应用程序”）。如果您还没有创建，请转到该文章并创建数据库，并执行该文章中的以下操作：

1. 创建数据库

2. 创建实体数据模型（执行所有 7 个操作）。

注意：由于我们这里已经有了 Models 文件夹，请将数据模型添加到 Models 文件夹中，以保持条理清晰。完成，您已准备好您的模型“LearnEF.edmx”。当您浏览此文件时，您可以在其中找到您的 employee 表实体模型，并且您将看到所有列都作为模型中的属性。

请构建您的项目，以便您能够引用项目中可用的模型。

请注意：我们使用该文章作为基础，以便节省重写该部分的时间，并使我们的文章专注于 MVC。

5. 添加控制器：现在，让我们添加我们的第一个控制器。

  1. 右键单击 controllers 文件夹 >> 选择 Add >> 选择 'Controller'
  2. 输入您想要的控制器名称。（我给它命名为 'FirstController'）。请在控制器名称后保留“Controller”一词。在模板中选择 'Empty MVC controller'。点击 Add。现在您可以看到它会有一个默认方法 Index()。
  3. 良好的做法是保留 index 方法，并在其中编写您需要执行的代码，就像在 Web Forms 中的 page_load 一样。
  4. 请在您的项目中使用“Model”命名空间，因为我们正在使用第四步创建的“Employee”模型。只需在您控制器的 using 块中添加此行：
using StartWithMVC.Models; //Here 'StartWithMVC' is project name as we started

6. **添加视图**：现在添加我们的第一个视图。

右键单击 Index 方法的第一行（public ActionResult Index()）>> Add View

现在，在 Add View 窗口中，为视图命名（我命名为“Index”，即默认名称）。现在，由于我们正在保存或更新数据库中的 Employee 表，并且我们已经在第 4 步中添加了“Employee”模型（使用实体数据模型），让我们将此视图的类型设置为“Employee”模型。

使视图强类型：只需在视图的第一行添加以下行，即可使其针对 Employee 模型进行强类型化。

@model StartWithMVC.Models.Employee

现在，让我们创建包含 Employee 表列的编辑字段的表单，以使用 Model 进行输入。为此，请使用以下代码行：

@model StartWithMVC.Models.Employee
@{
    ViewBag.Title = "SaveEmployee";
}
<h2>SaveEmployee</h2>
@using (Html.BeginForm("SaveEmployee", "First"))
{
    <fieldset>
        @Html.HiddenFor(m => m.EmpId)
    <p>
        @Html.LabelFor(m => m.HREmpId)
        @Html.TextBoxFor(m => m.HREmpId, new { maxlength = 10 })
    </p>
    <p>
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName, new { maxlength = 30 })
    </p>
    <p>
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName, new { maxlength = 30 })
    </p>
        <p>
        @Html.LabelFor(m => m.Address)
        @Html.TextBoxFor(m => m.Address, new { maxlength = 30 })
    </p>
    <p>
        @Html.LabelFor(m => m.City)
        @Html.TextBoxFor(m => m.City, new { maxlength = 30 })
    </p>
    </fieldset>
    
    <input type="submit" name="btnSave" value="Submit" />
}

Razor 视图引擎代码说明

虽然本文是关于 MVC 的，但我们将使用 Razor 视图引擎，因此掌握 Razor 视图引擎的基础知识是先决条件。

  1. '@model' : 这告诉 Razor 该视图是针对后面提到的模型的强类型视图。现在，当我们提交表单时，它将传递其 Model 类型的对象。所以我们可以在控制器中获取这个对象并检索为模型属性输入的值。稍后您将看到我们如何做到这一点。
  2. @using (Html.BeginForm("SaveEmployee", "First")) : 这告诉 Razor 我们正在创建一个表单，该表单将在提交时调用“First”控制器中的“SaveEmployee”方法。即 'FirstController'。
  3. @Html.HiddenFor(m => m.EmpId) : 使用第一行中包含的模型属性 EmpId 为数据库中的 EmpID 列创建隐藏字段。
  4. @Html.LabelFor(m => m.HREmpId) : 为模型的 HREmpID 属性创建用于显示的标签。它显示属性名称（即列名）。我们可以根据需要更改它，或者可以硬编码。这取决于您。
  5. @Html.TextBoxFor(m => m.HREmpId, new { maxlength = 30 }) : 这会为 HREmpID 属性创建 textbox，这里我指定了额外的参数为 new { maxlength = 10 }。您可以为这个文本框指定任意多的属性（HTML 属性）。
  6. 最后，我们有一个提交表单的按钮，最后我们关闭了大括号，表示这是表单的结束标签。

7. 为“SaveEmployee”在控制器中编写 Action:

现在，在您的控制器中为 save employee 操作编写以下语句。您可以看到此部分中编写的代码与参考文章中提到的使用实体模型将新记录保存到数据库的代码相同。

注意：这里我们的视图是针对 Employee 模型强类型的，所以它将用户输入的条目作为属性值传递给 employee 对象 ObjEmployee，然后使用实体框架代码来保存该数据。

现在构建并运行您的项目，输入字段值，然后按提交。就是这样，只需检查您的数据库，您就会在数据库中找到该条目。

以上就是如何使用 MVC 执行基本保存操作的全部内容。关于显示、编辑和删除，请继续关注...

关注点

  1. 因此，我们看到了控制器和视图如何通过模型作为中间件进行通信。当用户请求一个 URL 时，请求会到达控制器，然后控制器使用模型显示一个强类型的视图。
  2. 然后用户输入数据并提交表单，视图将模型对象返回，并将输入的值分配为它的属性。
  3. 控制器然后使用此对象处理数据，并作为响应返回一个视图。
  4. 非常智能的 Razor 视图引擎可以减少您编写 HTML 的工作量，并使其更加智能。

未完待续...

这是本系列的第一部分。第二部分将包含更新、删除和已保存记录的列表显示。

© . All rights reserved.