从MVC到Razor页面

介绍

使用ASP.NET Core 2，Microsoft为我们提供了创建Web应用程序的MVC（Model-View-Controller）方法的全新替代方案。微软将其命名为“剃刀页”，尽管采用不同的方法，但在某些方面仍然很熟悉。

本文将展示一个场景，其中Razor Pages用于生产一个小型电子商务网站，并在Facebook的React / ReactJS.NET帮助下，为其提供基于JavaScript代码的视图呈现/绑定引擎。
 

引用：

免责声明：本文主要关注剃须刀页面，并补充了我几个月前发布的以前的  React Shop - 微型电子商务文章。如果您想了解有关在ASP.NET应用程序中使用React和React JS.NET的更多信息，请参阅其他文章。

安装

为了在附带的源代码中运行应用程序，请安装以下内容：

• .NET Core 2.0.0 SDK或更高版本。
• Visual Studio 2017版本15.3或更高版本与ASP.NET和Web开发工作负载。
• Microsoft®SQLServer®2014 Express或更高版本。
• 下载本文顶部的项目源代码。

背景

如果您从过去十年开始关注ASP.NET开发，您可能已经注意到，Microsoft曾经和微软一起提出了一种新的开发工具或框架的创新 - 甚至是新的设计模式。其中一些已被证明是非常强大可靠的，如ASP.NET MVC和Razor视图引擎，而其他还没有通过时间的考验，被放弃，如AJAX Control Toolkit。

但是，自从2016年发布ASP.NET Core 1.0以来，很多事情都发生了变化。微软重新编写了ASP.NET作为一个开放源代码的GitHub托管项目，并首次向其Web开发框架介绍了多平台。

自从第一个版本开始，ASP.NET Core为ASP.NET 3.0提供了标准的Web开发框架，这个ASP.NET MVC是基于Model-View-Controller设计模式的。
MVC设计模式是1979年在神话中的Xerox Palo Alto研究中心（XPARC）开发的，但是在几个Web框架开始采用之后才开始出现：2002年的Spring为Java，2005年为Django和Ruby on Rails以及ASP。 NET在2009年。

而ASP.NET MVC是我们社区的一大热门。在此之前，我们必须处理从ASP.NET Web窗体中出现的问题，例如更新面板，增加ViewState，Postbacks以及相当复杂的页面事件管理。使用ASP.NET MVC，我们被教导在开发我们的Web应用程序时说出分离问题的语言：数据属于模型，表示逻辑仅适用于视图，每个请求必须由Controller操作处理，而这些操作又决定哪个视图将与其适当的模型一起呈现。没有更多的需要从程序员隐藏网络的无国籍性质。  

但ASP.NET MVC虽然给我们带来了很多好处，但有时仍然遇到了一些批评。虽然用户 - 当然是Web开发人员 - 将Web应用程序基本看作一组“网页”，ASP.NET MVC没有一个清晰的Web页面概念。相反，在ASP.NET MVC项目中，每个组件通常都有自己的文件，并且属于不同的文件夹，具体取决于它在MVC框架内的作用。

现在，暂停一会，想像你如何组织你的电脑文件夹。想象一下，您有不同的工作要做，涉及不同的文件，而且您的计算机文件夹不是按主题或工作或主题组织，而是由文件类型组织。并且想像您正在执行多个不同的作业，而不是分配每个作业的文件，您将每个作业的文件分散在不同的文件夹中，如下所示： 

这会是个好主意吗？

类似地，我们可以从下面的图像中看出，典型的MVC项目如何将一个文件中的单个页面的组件分散在许多文件和文件夹中：

所以在MVC中没有一个“网页”文件。向技术新手的人解释一下有点尴尬。

那么微软有人认为同样的事情可以用不同的方式完成。
 

介绍剃刀页面

如果您使用MVC应用程序，然后将您的View称为页面（例如，在  Index.cshtml文件中），并且您不仅集中了模型数据，还集中了与该页面相关的服务器端代码（以前驻留在你的控制器）里面一个专门的页面（在一个Index.cshtml.cs文件里面  ） - 你现在称之为页面模型？

如果您已经在本地移动应用程序中工作，那么在Model-View-ViewModel（MVVM）模式中可能已经看到类似的内容。

剃刀页面中的页面和页面模型

这就是剃刀页出生！ASP.NET Core 2.0 - 更准确地说，Visual Studio 2017 - 使用Razor Page作为默认内容引入了一个新的Web应用程序模板。

那么你可能会认为“但等一下......这看起来有点太熟悉了”。因为现在你有一个页面，一个执行服务器端功能的类。页面模型不是与文件中的旧代码相同吗？Web窗体不是一遍又一遍吗？

不，让我解释一下为什么Razor Pages不是网络形式的复兴。首先，我们必须意识到，一个Razor页面与MVC设计模式并没有很大的不同。过去，通过Web窗体，您通常会将业务规则，用户界面和数据层混合在一起。在ASP.NET Web窗体中，您已经拥有了以简单，性能和带宽为代价的事件处理的人造管道，另一方面，所有MVC组件在Razor Pages中都可以看到。它们只是位于不同的类/文件/文件夹中，以方便开发页面。

有些人对于剃刀页面的另一个误解是关于它主要是初级开发人员或较不复杂的应用程序。尽管新手开发人员可以轻松了解Razor Pages而不是MVC网络应用程序，但仍然可以构建复杂的应用程序，我们将在本文附带的源代码中看到。

创建新的Razor Pages网页应用程式后，您也可能会以某种方式“丢失”使用MVC项目的能力。但幸运的是，这不是真的。记住，这两个模板（MVC和Razor Pages）都依赖于相同的ASP.NET Core MVC框架。所以，例如，您可以创建一个新的Razor Page项目，然后创建MVC文件夹（控制器，视图等）和所需的文件，以便在同一个项目中使用MVC控制器和视图以及Razor页面！

在Razor Pages项目中，在项目根目录下创建一个新的Controllers文件夹，然后创建一个TestController类。现在我们实现了Index返回纯文本的操作：

 

隐藏    复制代码

public class TestController : Controller
{
    public IActionResult Index()
    {
        //Accessible through /Test
        return Content("You can work with MVC Controllers and Views " +
            "alongside Razor Pages in the same project!");
    }
}

 

运行应用程序并在浏览器的地址栏中输入http：// localhost：XXXXX / test，我们得到：

不是很棒吗

组态 

当您创建一个新的ASP.NET Core Razor Pages Web App时，这是您在Program.cs文件中获得的：

隐藏    复制代码

public class Program
{
    public