7 天学习 MVC 项目 - 第 7 天

• 下载 Day_7.zip

引言

这是愉快的一天。我们终于来到了“7 天学会 MVC 项目”系列的最后阶段。我相信您已经享受了之前的所有日子并从中学习到了一些东西。

请不要忘记在文章末尾留下您的评论/建议/反馈。

议程

• 引言
• 最后一天有什么内容？
• 实验 32 – 组织项目
  • 关于实验 32 的讨论
• 实验 33 – 创建单页应用程序 – 第 1 部分 - 设置
  • 什么是区域（Areas）？
  • 关于实验 33 的讨论
• 实验 34 – 创建单页应用程序 – 第 2 部分 – 显示员工
• 实验 35 – 创建单页应用程序 – 第 3 部分 – 创建员工
  • 接下来是什么？
  • 让我们计划一下
    • 寻找解决方案的旅程
      • 理解问题
      • 解决方案 – 通用数据类型
      • 问题 – 复杂数据怎么办？
      • 解决方案 – 通用数据格式标准
      • 问题 – XML 格式问题
      • 解决方案 - JSON
  • 回到我们的实验
  • 关于实验 35 的讨论
• 实验 36 – 创建单页应用程序 – 第 4 部分 – 批量上传
• 结论
• 从 MVC 5 开始

完整系列

• 第 1 天
• 第 2 天
• 第 3 天
• 第 4 天
• 第 5 天
• 第 6 天
• 第 7 天
• 额外日 1
• 额外日 2

我们很高兴地宣布，本文现在已出版为硬拷贝书籍，您可以在 www.amazon.com 和 www.flipkart.com 购买。

实验 32 – 组织项目

这实际上不是与任何新功能相关的实验。这个实验只是为了使项目更加结构化和系统化。

步骤 1 - 创建解决方案文件夹

右键单击解决方案，选择“添加”>>“新建解决方案文件夹”。

将文件夹命名为“View And Controller”。

现在重复该步骤，创建三个类似的文件夹，分别命名为“Model”、“ViewModel”和“Data Access Layer”。

步骤 2 – 创建数据访问层项目

右键单击“Data Access Layer”文件夹，创建一个名为“DataAccessLayer”的新类库项目。

步骤 3 – 创建业务层和业务实体项目

在“Model”文件夹中创建两个新的类库项目，分别命名为“BusinessLayer”和“BusinessEntities”。

步骤 4 – 创建 ViewModel 项目

在“ViewModel”文件夹中创建一个新的类库项目，并将其命名为“ViewModel”。

步骤 5 – 添加引用

首先逐个右键单击每个项目。选择“添加”>>“引用”，并按如下选择引用。

1. 对于 DataAccessLayer，选择 BusinessEntities

2. 对于 BusinessLayer，选择 DataAccessLayer 和 BusinessEntities

3. 对于 MVC WebApplication，选择 BusinessLayer、BusinessEntities、ViewModel

4. 对于 BusinessEntities，选择 System.ComponentModel.DataAnnotations

步骤 6 – 设置项目

1. 将 MVC 项目中 DataAccessLayer 文件夹中的 SalesERPDAL.cs 复制到新创建的 DataAccessLayer 类库项目中。
   

2. 从 MVC (WebApplication1) 项目中移除 DataAccessLayer 文件夹。

3. 将 MVC 项目中 Model 文件夹中的 Employee.cs、UserDetails.cs 和 UserStatus.cs 复制到新创建的 BusinessEntities 类库项目中。

4. 将 MVC 项目中 Model 文件夹中的 EmployeeBusinessLayer.cs 复制到新创建的 BusinessLayer 类库项目中。

5. 从 MVC 项目中移除 Model 文件夹。

6. 将 MVC 项目中 ViewModels 文件夹中的所有类复制到新创建的 ViewModel 类库项目中。

7. 从 MVC 项目中移除 ViewModels 文件夹。

8. 将 MVC 项目 (WebApplication1) 移动到“View And Controller”解决方案文件夹中。

步骤 7 – 构建项目

从菜单栏中选择“构建”>>“构建解决方案”。

您将收到以下错误消息。

步骤 8 – 解决错误

1. 将 System.Web 引用添加到 ViewModel 项目。

2. 使用 Nuget 管理器在 DataAccessLayer 和 BusinessLayer 项目中安装 Entity Framework。（如果您对如何使用 Nuget 管理器感到困惑，我建议您查看第 3 天）

   注意：Business Layer 中需要 Entity Framework 引用，因为 Business Layer 直接连接到 DataAccessLayer。作为一种合适的架构，Business Layer 不应直接连接到 DataAccessLayer。我们可以借助 Repository 模式来实现这一点。Repository 模式将完全超出本系列的范围。

3. 从 MVC 项目中移除 EntityFramework。

• 右键单击 MVC 项目并选择“管理 Nuget 包”选项。

• 在“管理 Nuget 包”对话框的左侧部分选择“已安装的包”。

• 右侧部分将显示之前安装的所有包。选择 EntityFramework 并单击“卸载”。

步骤 9 – 构建解决方案

您将收到以下错误。

步骤 10 – 解决错误

现在我们在 MVC 项目中既没有 SalesERPDAL 引用，也没有 Entity Framework 引用。添加这些引用不是一个好习惯。最佳实践是控制器不应直接连接到数据访问层。

1. 在 DataAccessLayer 项目中创建一个名为 DatabaseSettings 的新类，其中包含一个名为 SetDatabase 的静态方法，如下所示。

using System.Data.Entity;
using WebApplication1.DataAccessLayer;
namespace DataAccessLayer
{
    public class DatabaseSettings
    {
        public static void SetDatabase()
        {
            Database.SetInitializer(new DropCreateDatabaseIfModelChanges<SalesERPDAL>());
        }
    }	
}

2. 在 BusinessLayer 项目中创建一个名为 BusinessSettings 的新类，其中包含一个名为 SetBusiness 的静态方法，如下所示。

using DataAccessLayer;

namespace BusinessLayer
{
    public class BusinessSettings
    {
        public static void SetBusiness()
        {
            DatabaseSettings.SetDatabase();
        }
    }
}

3. 从 global.asax 中移除两个错误的 using 语句，并移除 Database.SetInitializer 语句。如下调用 BusinessSettings.SetBusiness 函数。

using BusinessLayer;
.
.
.
BundleConfig.RegisterBundles(BundleTable.Bundles);
BusinessSettings.SetBusiness();

构建应用程序。构建将成功。

确保执行应用程序一次。☻

关于实验 32 的讨论

什么是解决方案文件夹？

解决方案文件夹只是逻辑文件夹。它们实际上不会在物理硬盘上创建。它们唯一的目的是使解决方案更加系统化。

实验 33 – 创建单页应用程序 – 第 1 部分 - 设置

现在我们不会对现有控制器和视图进行任何更改。我们将为此实验创建全新的控制器和视图。采取这种步骤的原因是：

1. 保持现有选项不变，以便您稍后可以比较早期版本和单页版本并更好地学习。

2. 实现并理解 Asp.Net MVC 中的另一个概念，称为区域（Areas）。

如我所说，对于这个实验，我们将从头开始创建新的控制器、视图和 ViewModel。

只重用以下内容：

• 现有业务层

• 现有数据访问层

• 现有业务实体

• 身份验证和异常过滤器

• FooterViewModel

• Footer.cshtml

步骤 1 – 创建新区域

右键单击项目并选择“添加”>>“区域”。将弹出一个对话框。将其设置为 SPA 并选择确定。

它将在我们的项目中创建以下文件夹结构。

显然，与区域相关的 Model 文件夹是不需要的。删除它。

什么是区域（Areas）？

区域只是在 Asp.Net MVC 项目中实现模块的一种方式。

每个项目都由多个模块组成。例如 - 账户模块、客户关系模块、支付网关模块等。

在传统的应用程序开发风格中，我们通常使用“文件夹”来实现这一点。我们在单个项目中创建多个文件夹。每个文件夹代表一个模块。我们将把各自模块的所有相关文件保存在各自的文件夹中。

现在，当涉及到 Asp.Net MVC 时，自定义文件夹将是一个大问题。

假设在 Asp.Net MVC 中，我们将使用简单的文件夹来实现模块。

• 现在 DataAccessLayer、BusinessLayer、BusinessEntities 和 ViewModels 不会产生任何问题。它们是简单的类，因此可以放在任何地方。

• 控制器 - 我们不能把它放在任何地方。它必须放在 Controller 文件夹中。但这不会是一个大问题，因为从 MVC 4 开始，控制器位置的限制已被取消。现在我们可以把它放在我们想要的任何地方。

• 视图 - 不幸的是，对于视图来说，这是不可能的。所有视图都必须放在“~/Views/ControllerName”或“~/Views/Shared”文件夹中。

这就是区域（Areas）的用武之地。

步骤 2 – 创建所需的 ViewModels

在 ViewModel 类库项目的 SPA 文件夹中创建一个名为 MainViewModel 的新文件夹，并创建一个 ViewModel，如下所示。

using WebApplication1.ViewModels;
namespace WebApplication1.ViewModels.SPA
{
    public class MainViewModel
    {
        public string UserName { get; set; }
        public FooterViewModel FooterData { get; set; }//New Property
    }
}

步骤 3 – 创建 Index 动作方法

在 MainController 中添加以下 using 语句。

using WebApplication1.ViewModels.SPA;
using OldViewModel=WebApplication1.ViewModels;

现在在 MainController 中创建一个名为 Index 的新动作方法，如下所示。

public ActionResult Index()
{
    MainViewModel v = new MainViewModel();
    v.UserName = User.Identity.Name;
    v.FooterData = new OldViewModel.FooterViewModel();
    v.FooterData.CompanyName = "StepByStepSchools";//Can be set to dynamic value
    v.FooterData.Year = DateTime.Now.Year.ToString();
    return View("Index", v);
}

如您所见，为 WebApplication1.ViewModels 命名空间添加了一个别名 OldViewModel。现在，我们不需要写 WebApplication1.ViewModels.ClassName，只需写 OldViewModel.ClassName 即可。

不指定别名将导致歧义错误。WebApplication1.ViewModels.SPA 和 WebApplication1.ViewModels 这两个命名空间有一些相似的类。

步骤 4 – 创建 Index 视图

创建一个与上述索引方法关联的视图，如下所示。

@using WebApplication1.ViewModels.SPA
@model MainViewModel
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Employee Single Page Application</title>
</head>
<body>
    <div style="text-align:right">
        Hello, @Model.UserName
        <a href="/Authentication/Logout">Logout</a>
    </div>
    <hr />
    <div id="DivOption">
       
    </div>
    @Html.Partial("Footer", Model.FooterData)
</body>
</html>

步骤 5 – 执行并测试应用程序

按 F5 执行应用程序。完成登录过程并导航到 Main Controller 中的 Index 动作。

关于实验 33 的讨论

为什么控制器名称前需要 SPA 关键字？

当我们向 ASP.NET MVC 应用程序添加一个区域时，Visual Studio 会创建一个名为 [AreaName]AreaRegistration.cs 的文件，其中包含一个派生自 AreaRegistration 的类。该类定义了 AreaName 属性和 RegisterArea 方法，用于注册新区域的路由信息。

在我们的例子中，您会找到一个名为 SpaAreaRegistration.cs 的文件，它位于“~/Areas/Spa”文件夹中。SpaAreaRegistration 类的 RegisterArea 方法包含以下代码。

context.MapRoute(
                "SPA_default",
                "SPA/{controller}/{action}/{id}",
                new { action = "Index", id = UrlParameter.Optional }
            );

这就是为什么，当涉及到区域中的控制器时，我们在控制器名称前加上 SPA 关键字。

SpaAreaRegistration 类中的 RegisterArea 是如何被调用的？

打开 global.asax 文件。Application_Start 中的第一行将是如下内容。

AreaRegistration.RegisterAllAreas();

RegisterAllAreas 方法查找应用程序域中所有派生自 AreaRegistration 的类型，并调用它们各自的 RegisterArea 方法。

我们可以不使用 SPA 调用 MainController 动作吗？

让我们简化这个问题。

问题是这个 URL 会起作用吗？“localhost:8870/Main/Index”

答案是 – 是的。

AreaRegistration 类创建新的路由，但它不会移除其他路由。RouteConfig 类中定义的路由仍然正常工作。正如我之前所说，控制器位置没有限制。因此它会工作，但输出不会正确显示，因为它无法找到视图。我建议您执行一次应用程序并尝试一下。

实验 34 – 创建单页应用程序 – 第 2 部分 – 显示员工

步骤 1 – 为显示现有员工创建 ViewModel。

在 ViewModel 类库的 SPA 文件夹中创建名为 EmployeeViewModel 和 EmployeeListViewModel 的新 ViewModel 类，如下所示。

namespace WebApplication1.ViewModels.SPA
{
    public class EmployeeViewModel
    {
        public string EmployeeName { get; set; }
        public string Salary { get; set; }
        public string SalaryColor { get; set; }
    }
}

namespace WebApplication1.ViewModels.SPA
{
    public class EmployeeListViewModel
    {
        public List Employees { get; set; }
    }
}

注意：这两个 ViewModel 都是为非 Spa 应用程序创建的 ViewModel 的精确复制。唯一的区别是这次不需要 BaseViewModel。

步骤 2 – 创建 EmployeeList Index

在 MainController 中创建一个名为 EmployeeList 的新动作方法，如下所示。

public ActionResult EmployeeList()
{
    EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel();
    EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
    List employees = empBal.GetEmployees();

    List empViewModels = new List();

    foreach (Employee emp in employees)
    {
        EmployeeViewModel empViewModel = new EmployeeViewModel();
        empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName;
        empViewModel.Salary = emp.Salary.Value.ToString("C");
        if (emp.Salary > 15000)
        {
            empViewModel.SalaryColor = "yellow";
        }
        else
        {
            empViewModel.SalaryColor = "green";
        }
        empViewModels.Add(empViewModel);
    }
    employeeListViewModel.Employees = empViewModels;
    return View("EmployeeList", employeeListViewModel);
}

注意：不需要 HeaderFooterFilter。

步骤 3 – 创建 AddNewLink PartialView

现在我们不能使用之前的 AddNewLink 局部视图，因为那里的锚标签会导致完全刷新。我们的目标是创建一个“单页应用程序”，因此不应该有任何完全刷新。

在“~/Areas/Spa/Views/Main”文件夹中创建一个名为 AddNewLink.cshtml 的新局部视图。

<a href="#" onclick="OpenAddNew();">Add New</a>
&nbsp;
&nbsp;
<a href="#" onclick="OpenBulkUpload();">BulkUpload</a>

步骤 4 – 创建 AddNewLink 动作方法

在 MainController 中创建一个名为 GetAddNewLink 的新动作方法，如下所示。

public ActionResult GetAddNewLink()
{
if (Convert.ToBoolean(Session["IsAdmin"]))
{
return PartialView("AddNewLink");
}
else
{
return new EmptyResult();
}
}

步骤 5 - 创建 EmployeeList 视图

在“~/Areas/Spa/Views/Main”文件夹中创建一个名为 EmployeeList 的新局部视图。

@using WebApplication1.ViewModels.SPA
@model EmployeeListViewModel
<div>
    @{
        Html.RenderAction("GetAddNewLink");
    }

    <table border="1" id="EmployeeTable">
        <tr>
            <th>Employee Name</th>
            <th>Salary</th>
        </tr>
        @foreach (EmployeeViewModel item in Model.Employees)
        {
            <tr>

                <td>@item.EmployeeName</td>
                <td style="background-color:@item.SalaryColor">@item.Salary</td>
            </tr>
        }
    </table>
</div>

步骤 6 – 将 EmployeeList 设置为初始屏幕

为此，打开位于“~/Areas/Spa/Views/Main”文件夹中的 Index.cshtml，并将 EmployeeList 动作结果包含在 DivOptions div 中，如下所示。

...  
</div>
<hr />
<div id="DivOption">
   @Html.Action("EmployeeList","Main")
</div>
@Html.Partial("Footer"...

步骤 7 - 执行并测试

按 F5 并执行应用程序。

实验 35 – 创建单页应用程序 – 第 3 部分 – 创建员工

步骤 1 – 创建 AddNew ViewModels

在 ViewModel 类库项目的 SPA 文件夹中创建一个名为 CreateEmployeeViewModel 的新 ViewModel，如下所示。

namespace WebApplication1.ViewModels.SPA
{
    public class CreateEmployeeViewModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Salary { get; set; }
    }
}

步骤 2 – 创建 AddNew 动作方法

在 MainController 中添加以下 using 语句。

using WebApplication1.Filters;

现在在 MainController 中创建 AddNew 动作方法，如下所示。

[AdminFilter]
public ActionResult AddNew()
{
    CreateEmployeeViewModel v = new CreateEmployeeViewModel();
    return PartialView("CreateEmployee", v);
}

步骤 3 – 创建 CreateEmployee 局部视图

在“~/Areas/Spa/Views/Main”文件夹中创建一个名为 CreateEmployee 的新局部视图，如下所示。

@using WebApplication1.ViewModels.SPA
@model CreateEmployeeViewModel
<div>
    <table>
        <tr>
            <td>
                First Name:
            </td>
            <td>
                <input type="text" id="TxtFName" name="FirstName" value="@Model.FirstName" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("FirstName")
            </td>
        </tr>
        <tr>
            <td>
                Last Name:
            </td>
            <td>
                <input type="text" id="TxtLName" name="LastName" value="@Model.LastName" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("LastName")
            </td>
        </tr>
        <tr>
            <td>
                Salary:
            </td>
            <td>
                <input type="text" id="TxtSalary" name="Salary" value="@Model.Salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                @Html.ValidationMessage("Salary")
            </td>
        </tr>
        <tr>
            <td colspan="2">

                <input type="submit" name="BtnSubmit" value="Save Employee" onclick="SaveEmployee();" />
                <input type="submit" name="BtnSubmit" value="Cancel" onclick="CancelSave()”  />
                <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" />
            </td>
        </tr>
    </table>
</div>

步骤 4 – 包含 jQuery UI

右键单击项目并选择“管理 Nuget 管理器”。

搜索“jQuery UI”。

安装 jQuery UI。

它将向项目添加几个 JavaScript (.js) 和样式表 (.css) 文件。

步骤 5 - 包含 jQuery UI

打开“~/Areas/Spa/Views/Main/Index.cshtml”，并包含 jQuery.js、jQueryUI.js 和 all.css，如下所示。所有这些文件都是通过 Nuget 管理器作为 jQuery UI 包的一部分添加的。

<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.8.0.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js"></script>
<title>Employee Single Page Application</title>
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
...

步骤 6 – 实现 OpenAddNew 函数。

在“~/Areas/Spa/Views/Main/Index.cshtml”中创建一个名为 OpenAddNew 的新 JavaScript 函数，如下所示。

<script>
    function OpenAddNew() {
        $.get("/SPA/Main/AddNew").then
            (
                function (r) {
                    $("<div id='DivCreateEmployee'></div>").html(r).
                        dialog({
                            width: 'auto', height: 'auto', modal: true, title: "Create New Employee",
                            close: function () {
                                $('#DivCreateEmployee').remove();
                            }
                        });
                }
            );
    }
</script>

步骤 7 – 执行并测试

按 F5 并执行应用程序。

完成登录过程并导航到 MainController 中的 Index 动作。最后点击“添加新”超链接。

步骤 8 – 创建 ResetForm 函数

打开 CreateEmployee.cshtml 视图。在顶部创建 ResetForm 函数，如下所示。

@model CreateEmployeeViewModel
<script>
    function ResetForm() {
        document.getElementById('TxtFName').value = "";
        document.getElementById('TxtLName').value = "";
        document.getElementById('TxtSalary').value = "";
    }
</script>
<div>
    <table>
......
......
<input type="submit" name="BtnSubmit" value="Save Employee" onclick="SaveEmployee();" />
                <input type="submit" name="BtnSubmit" value="Cancel" onclick="CancelSave()” />
                <input type="button" name="BtnReset" value="Reset" onclick="ResetForm();" />
            </td>
        </tr>
......
……