从ASP.NET Forms到ASP.NET MVC的迁移案例研究

在迁移一个使用Visual Studio 2005和C#构建的小型商务预约和支付跟踪网站到ASP.NET MVC的过程中,遇到了一些挑战和学习曲线。本文旨在通过一个简单的案例研究,概述迁移过程中的关键概念,并提供一些代码示例以强调重点。

ASP.NET Forms和MVC之间的区别在许多优秀的文章中都有阐述(参见参考文献)。网站使用了SQL Server存储过程来处理大多数的CRUD操作,并采用ADO.NET方法来跟踪支付。

虽然迁移的网站可能性质完全不同,但本文中的概念应该仍然适用,尽管细节可能不那么相关。例如,视频/音乐或零售网站可能不会像预约网站那样频繁使用基于日期的方法。

网站的核心功能

小型公司通常由为客户端提供服务的专家组成,这些专家可能是理疗师、水管工、移动美发师等。很可能有一位秘书为多位专家安排预约。因此,核心流程包括:“接受预约”、“出席预约”、“接收付款”和“催收付款”。

这个网站旨在解决的问题包括:水管工到达工作现场时不知道会发生什么,以及客户向接待员和水管工解释需要做什么,这是多么不专业。其他好处包括尽可能提高专家的效率,并确保逾期发票全额支付。小型公司通常负担不起昂贵的IT系统。网站方法采用SaaS交付模型,允许IT随着公司的成长而扩展/支付。MVC(和Azure)的互操作性特性最大化了在整个业务周期中使用移动设备的可能性。

迁移策略

ASP.NET Forms和ASP.NET MVC之间的差异以及用于调度器网站的迁移策略通过几个图表进行了说明。然后使用代码片段来说明需要考虑的问题。

ASP.NET Forms/MVC差异和迁移策略

上面展示的ASP.NET Forms方法并没有使用任何特别的趋势。它遵循基于服务器的应用程序结构。WeekView.aspx.cs中的C#代码页面加载时使用存储过程获取数据,并为Web控件分配值。

立即要注意的是:

  • (粉色)视图区域代表了理解和然后实现所需更改的陡峭学习曲线。这是主要差异所在,也是迁移策略的第一部分。必须理解WeekView.aspx.cs的哪些部分必须剥离并在WeekView.cshtml中实现。
  • ASP.NET MVC控制器没有“了解”视图控件。必须设计选择的方式来获取数据并绑定到视图控件。调度器网站选择的方法是使用JavaScript '$(document).ready',这与.aspx.cs的'Page_Load'非常相似,因为这两个函数都在页面加载时开始。JavaScript '$(document).ready'函数使用Ajax/JSON调用控制器/操作来获取数据,而数据适配器、存储过程和数据库表保持不变。

“不变”这个词暗示了将Web控件从.aspx/.aspx.cs解耦到.cshtml视图的迁移策略。失去的是Visual Studio设计器的拖放功能,以及双击控件创建asp.control方法存根的便利。

CSS3、HTML5、Razor、JavaScript、JSON、AJAX(更不用说NuGet)应该被视为单独的语言。因此,不再有asp.controls语法、事件处理程序和C#代码后台,而是有一个非常陡峭的学习曲线需要克服。至少在开始时,当有这么多不同“语言”的层次需要考虑时,很难想象设计。

如果接受上述第3点和第4点,那么专注于让视图工作,同时忽略对控件到模型方面的任何改进也是有意义的。回顾上面的MVC结构总结图,应该注意到企业框架(EF)和LINQ/ORM被划掉了。记录并“停放”任何建议,然后继续前进是个好习惯。调度器网站的设计假设了一个稀疏矩阵,这意味着数据库可能只有几个预约,用于250多个,15分钟的预约时间段。可用的存储过程处理CRUD操作和一些简单的调度规则。关键是在实施EF或LINQ/ORM之前,需要进行一些严肃的设计、概念测试和编程。

一些业务逻辑需要移动到视图,而其他部分将保持不变。例如,搜索特定公司的专家的代码应该保留在控制器操作/数据适配器/存储过程空间。从控制器操作接收数据然后更新

具体示例

首先,让提到一些痛苦的领域。实现正确和最新的JavaScript库是痛苦的。NuGet肯定有帮助,因为它会维护库之间的依赖关系。仍然需要正确引用/调用库。可能会使用第三方JavaScript库。'jquery-ui'是一个非常流行的库,因为它增加了Visual Studio/Razor附带的基本控件。调度器网站实现了datepicker ajax jquery-ui控件。

另一个痛苦的领域是让JavaScript/Ajax/JSON/控制器操作链接工作。像在操作前遗漏[HttpPost]这样的简单事情可能意味着会显示一个不有帮助的'500'弹出窗口。最大的帮助是调试器关键字;然后逐步通过代码。学会了从现有的操作存根复制,而不是创建新的。

现在让来看一个具体的例子。这里是WeekView.aspx.cs中的代码(在页面加载时)删除任何现有选项,获取公司的专家数据,并更新公司的专家下拉列表:

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ExpertDropDownList.Items.Clear(); FillDropDownList(ExpertDropDownList, "SELECT ExpertID, ExpertName FROM Experts"); } }

关键是ExpertDropDownList asp控件可以通过代码后台轻松更新。

现在深呼吸,因为一旦习惯了视图/JavaScript/控制器方法,它就变得相当熟悉了:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WeekView.aspx.cs" Inherits="Scheduler.Web.WeekView" %> <%@ Import Namespace="Scheduler.BLL" %> <!DOCTYPE html> <html> <head runat="server"> <title>Week View</title> <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $.ajax({ type: "POST", url: "WeekView.aspx/GetExperts", data: JSON.stringify({ CompanyID: '<%= CompanyID %>' }), contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { var ddl = document.getElementById('<%= ExpertDropDownList.ClientID %>'); $.each(response.d, function (i, item) { var opt = document.createElement('option'); opt.value = item.ExpertID; opt.innerHTML = item.ExpertName; ddl.appendChild(opt); }); }, error: function (msg) { alert('Error: ' + msg); } }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="ExpertDropDownList" runat="server"></asp:DropDownList> </div> </form> </body> </html>

上面的视图代码是更大代码片段的一部分,所以闭合标签可能不完全正确;尽管被认为是正确的。如果有人发现任何改进,将获得金星。此外,欢迎对在哪里找到描述CSS3、HTML5、Razor、JavaScript、JSON、AJAX的优秀资源发表评论。

在经历了ASP.NET MVC(和Azure编程)的学习,直到大脑感觉要沸腾之后,决定将MVC原则应用于现有的调度网站。

作为对许多论坛帖子和文章的回报,这里是分享学习经验的尝试。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485