将 ASP.NET Forms 迁移到 MVC 的策略考虑
本案例研究建议从将 aspx/aspx.cs 解耦到 View 的 CSS3、HTML5、javascript、AJAX 和 JSON 开始。
引言
本文简要概述了将 ASP.NET Forms 网站迁移到 ASP.NET MVC 网站时需要考虑的事项。本文旨在作为一个简单的案例研究。
背景
有一些很棒的文章(参见参考文献)阐述了 ASP.NET Forms 和 MVC 之间的区别。
我有一个使用 Visual Studio 2005“forms”C# 创建的“小型企业调度和支付跟踪”(或调度)网站。SQL Server 存储过程用于大多数 CRUD 操作。ADO.NET 方法用于支付跟踪。
要提及的太多了,所以我尽力总结了关键概念,并附上了一些代码示例以作强调。
您正在迁移的网站可能具有完全不同的性质。本文中的概念仍然适用,尽管我们可以预见细节可能不那么相关。例如,视频/音乐或零售网站不太可能像我的调度网站那样多地使用基于日期的方法。
为了让您简要了解背景,我们应该简要说明调度网站存在的理由(raison d'être)。小公司通常由向客户提供服务的专家组成。这些专家可以是理疗师、水管工、移动美发师。很可能有一位秘书为许多专家预约。因此核心流程是:“接受预订”、“履行预约”、“收取付款”、“催款”。水管工多少次到工作现场却不知道会发生什么?客户向接待员和水管工解释需要做什么,这有多不专业?这些就是本网站旨在解决的问题。其他好处包括尽可能提高专家的效率,并确保逾期未付的发票全额支付。小公司通常负担不起昂贵的 IT 系统。网站方法进入 SaaS 交付模型,并允许 IT 随着公司的发展进行扩展/付费。MVC(和 Azure)的互操作性性质最大限度地提高了在整个业务周期中使用移动设备的可能性。
ASP.NET Forms 到 ASP.NET MVC 案例研究
结构
几张图表说明了 ASP.NET Forms 和 ASP.NET MVC 之间的区别以及用于调度器网站的迁移策略。然后使用一个带有代码片段的具体示例来说明考虑事项。
ASP.NET Forms/MVC 区别和迁移策略
上面显示的 ASP.NET Forms 方法并没有使用任何特别的潮流技术。它遵循基于服务器的应用程序结构。WeekView.aspx.cs 中的 C# 代码页面加载使用存储过程获取数据并将值分配给 Web 控件。
需要立即注意的事项是:
1) (粉色)视图区域代表着理解和实现所需更改的陡峭学习曲线。这是主要差异所在,并直接构成了我们迁移策略的第一部分。我们必须了解 WeekView.aspx.cs 的哪些部分必须剥离并在 WeekView.cshtml 中实现。
2) ASP.NET MVC 控制器“不了解”视图控件。您必须设计如何选择将数据获取并绑定到视图控件。调度器网站选择的方法是使用 JavaScript 的 '$(document).ready',这与 .aspx.cs 的 'Page_Load' 非常相似,因为这两个函数都在页面加载时启动。JavaScript 的 '$(document).ready' 函数使用 Ajax/JSON 获取数据,并通过调用 Controller/Action 来访问未更改的数据适配器、存储过程和数据库表。
3) 上文中的“未更改”一词暗示了所选的迁移策略:将 Web 控件从 .aspx/.aspx.cs 解耦到 .cshtml 视图中。我们失去的是备受喜爱的拖放 Visual Studio 设计器以及双击控件以创建代码隐藏 asp.control 方法存根的功能。
4) CSS3、HTML 5、Razor、JavaScript、JSON、AJAX(更不用说 NuGet)都应被视为独立的语言。因此,我们不再有 asp.controls 语法、事件处理程序和 C# 代码隐藏,而是要克服一个非常陡峭的学习曲线。至少在一开始,当需要考虑如此多不同“语言”的层次时,很难可视化设计。
5) 如果您接受上述第 3 点和第 4 点,那么在专注于使 View 正常工作的同时,忽略 Control-to-Model 方面的任何改进也应该是有道理的。回顾上面的 MVC 结构摘要图,我们应该注意到企业框架 (EF) 和 LINQ/ORM 被划掉了。好的做法是记录并“搁置”任何建议,然后继续前进。调度器网站的设计假定一个稀疏矩阵,这意味着数据库可能只有 250 多个 15 分钟预约时段的少量预订。可用的存储过程处理 CRUD 操作和一些简单的调度规则。关键是,在实现 EF 或 LINQ/ORM 之前,需要进行一些认真的设计、概念测试和编程。
6) 部分业务逻辑需要移至视图,而其他部分保持不变。例如,搜索特定公司专家的代码应保留在 Controller-Action/Data Adapter/Stored Procedure 空间中。从 Controller-Action 接收数据然后更新 <select> 下拉列表的代码应移至视图的 Javascript。事实上,我们将根据下面的具体示例部分来查看其实现。
一个具体例子
首先,让我们提一下一些痛点。实现正确且最新的 JavaScript 库是一个痛点。NuGet 绝对有帮助,因为它将维护库之间的依赖关系。您仍然需要正确引用/调用库。您很可能会使用第三方 JavaScript 库。“jqueri-ui”是一个非常流行的库,因为它为 Visual Studio/Razor 附带的非常基本的控件添加了功能。调度器网站实现了日期选择器 ajax jquery-ui 控件。
另一个痛点是建立 JavaScript/Ajax/JSON/Controller-Action 链接。像 Action 前缺少 [HttpPost] 这样的简单问题,都可能导致显示一个无用的“500”弹出窗口。最大的帮助是关键字 debugger;,然后逐步执行代码。我学会了从现有的 Action 存根复制,而不是创建新的。
现在来看我们的具体示例。这是 WeekView.aspx.cs 中的代码,它(在页面加载时)删除任何现有选项,获取公司专家的数据,并更新公司专家的下拉列表。
关键是 ExpertDropDownList asp 控件可以很容易地通过代码后台更新。
现在深吸一口气,因为一旦你习惯了 View/JavaScript/Controller 方法,它就会变得相当熟悉。
事实上,上面的 View 代码是更大代码的一部分,因此闭合标签可能不完全正确;尽管被认为是正确的。任何发现改进之处的人都会获得一颗金星。此外,欢迎提供关于何处能找到描述 CSS3、HTML 5、Razor、JavaScript、JSON、AJAX 的优秀资源的评论。
摘要
在我学习 MVC(和 Azure 编程)直到大脑感觉快要沸腾之后,我决定将 MVC 原则应用于现有的调度网站。
作为对我使用过的许多论坛帖子和文章的回报,这是我分享学习经验的尝试。
从 ASP.NET Forms 转向 MVC 学习曲线很陡峭。Razor 有其自己的语法。JavaScript、JSON、AJAX 也都是独立的微专题领域。此外,还需要考虑架构和设计上的变化。我记得一位 Microsoft ASP.NET 大师说过,世界上最好的代码是已经编写好并且可以重用的代码。这里采用的方法遵循了这一思想,并符合敏捷对“质量”的定义。
我希望这篇文章能为我们的共享知识库做出贡献。如果在我开始这段旅程时能读到这篇文章,我个人会非常感激。我搜索过,但目前还没有找到完全相同的文章。现在我说了这些,我确信会有人告诉我我应该在哪里找。
建议文章
https://codeproject.org.cn/Articles/38778/ASP-NET-WebForms-and-ASP-NET-MVC-in-Harmony
https://codeproject.org.cn/Articles/552846/Why-s-How-s-of-Asp-Net-MVC-Part
文档历史
版本 1 2014 年 4 月 6 日。