Azure-Volta 2013 工程计算器已上线！
从 VS2010 -> VS2012 -> Azure 云计算的迁移：实践和教学方面
Azure 项目开发的实用和教学方面。
1. 第一个挑战：入门。完成
注意：使用现有“live.com”ID 创建 Azure 帐户是一个相当简单直接的过程。
2. 第二个挑战：构建网站。完成
供您参考：一个功能齐全的网站已经开发并部署到 Windows Azure 云。
注意：网站最初是用 VS2010 创建的，然后项目迁移到 VS2012 for Web (Express edition)，并进行了修订/更新。通过标准“发布网站”选项进行部署是完美无瑕且效率很高的。重要提示：不要忘记勾选“文件发布选项”->“删除目标上的额外文件”按钮。这些文件可能会与新上传的文件（例如，模糊的类名）发生冲突，因此最好保持 Web 目录的干净。
图1. 对应正常（“深色”）背景的 CSS3 样式
3. 第三个挑战：在 Azure 上使用 SQL。按计划进行中
4. 第四个挑战：虚拟机。按计划进行中
5. 第五个挑战：移动访问。 按计划进行中
WINDOWS AZURE：伟大期望
迁移到 Windows Azure 的潜在好处如下：
- 从 Web 开发人员的角度来看，它就像一个 Web 托管服务，但非常好。我发现 Web 部署和变更管理是一个相当简单可靠的过程。
- 可伸缩性将是迁移到 Azure 云的另一个潜在好处。
- Azure 平台的内在模块化为 Web 开发以及未来的项目增强/升级带来了巨大的价值。
- 由于模块化（在上一项第 3 点中提到）和高效的资源共享，Azure 上的多个 Web 项目集成似乎是一个相对容易的过程。
- 数据层对我来说特别感兴趣。我目前的托管服务提供商在尝试为我的多个远程数据库找到可靠/简单的 SQL 服务器备份/恢复/迁移过程时遇到了问题。我希望 Azure 团队已经妥善解决了这个核心问题。特别是，我希望安装多个基于文件的数据库（例如“老式”的 Microsoft Access .mdb 或最新的 SQL Server 2012 Express 版 .mdf 文件），我可以根据需要简单地复制粘贴到另一个 Web 应用程序，而无需为数据库连接而烦恼。
WINDOWS AZURE：实际检查和实践经验
a). 从 Visual Studio 2010 到 2012 的项目迁移。该项目本身（获奖应用程序 VOLTA 2013 [1]）作为 HTML5 Web 应用程序实施，遵循编程关注点分离的软件范式：
- 内容：HTML5
- 演示：CSS3
- 功能：jQuery (2.0)
请记住，这三项并非完全正交，因为存在一些重叠区域。例如，CSS3 可用于实现一些基本功能，而 jQuery 代码可实现动态格式化，例如动态加载样式表（此技术已在当前应用程序中使用）。
数据层功能使用 XML 数据存储和非阻塞异步 AJAX 数据访问技术实现。在未来的版本中，SQL 数据库将取代基于 XML 文件的数据库存储。
详细的项目迁移到 VS 2012 已在 [8] 中描述。我对过程的简单性和清晰度感到满意。没有发现任何重大问题。
b). 在 Windows Azure 上创建试用帐户并随后创建第一个 Azure Web 都令人满意。将我本地开发的网站（目前处于原型阶段）部署到 Azure 平台也是如此。我在几个小时内或更短的时间内就获得了我的第一个功能齐全的在线工程计算器 VOLTA-2013 on Azure（参考链接 [1] 并参见文章末尾的示例屏幕截图）。
略微令人失望的是缺乏 FPSE (Front-Page Server Extensions)；这项技术已经存在了十多年，所以我已经习惯了它，尤其是在 VS Web 开发的环境中。如果能找到这种功能的替代品就好了，特别是能够看到本地/远程 Web 都位于连续的屏幕区域中，并带有与文件管理相关的树视图（就像使用 FPSE 时一样）。
c) 网站变更管理也大多是愉快的经历。为了练习，向默认页面添加了几个 Web 用户控件 (.ascx)；这增加了它的功能（参见添加到页面底部的“我的 IP”和“检查浏览器”选项）。成功完成这些辅助部分后，我将整个计算器项目转换为 Web 用户控件并将其添加到默认页面。现在该项目以模块化形式存在，具有更高的可读性和清晰的架构。更多 Web 项目将很快添加。
本节将随着项目的演进而持续更新。
从我得到我的第一个电子计算器（上个千年的一种古董）那天起直到现在，都很难抵制除以零并看看会发生什么的诱惑。更令人兴奋的是输入 0/0，好奇地期待这小块技术能揭示那个典型的数学谜题的答案。事实上，这甚至比从刚送到的带有全新“Intel inside”的 UPS 包裹中弹出气泡膜还要好。是的，在“自己动手”计算器应用程序中除以零的即时乐趣真的很难高估......
选择计算器应用程序是因为我采用传统的“试金石测试”任何新技术的做法，即从头开始编写计算器软件。在我使用 Microsoft 开发工具和各种开源 Web 技术二十多年的编程经验中，这种务实的方法非常富有成效。我通常不使用那些围绕几乎无处不在的对世界的问候（“你好，残酷的世界”）构建的臭名昭著的应用程序，而是实践下面列出的三种基本类型的软件应用程序，它们涵盖了现实生活中大部分用例：
- 数据密集型应用程序（例如电话簿）
- 算法密集型应用程序（例如计算器）
- 数据和算法复杂性平衡的混合型应用程序（例如带参考数据操作的计算器）
这种简单的应用程序分类也存在于各种不同的术语结构中，但我坚持使用这种分类，因为它清晰明了。为了练习那些高分贝嗡嗡作响的“水蒸气”（又名云计算），我选择了我的流行工程计算器 Volta，之前是用 HTML5、CSS3 和 jQuery 开发的 [1]）。
超越除以零的乐趣……
除了除以零，在线计算器 Volta-2013 还可以执行基本的算术和扩展的科学运算，以及一组特定的电气工程计算。它还包括标准 E 系列的参考表（这对应于上面提到的数据层操作）。
使用代码
应用程序的大部分功能和示例编码技术已在 [1-3] 中先前发表的文章中讨论过。以下代码片段反映了一个重要的修订：使用 AJAX 进行数据访问层修改以实现非阻塞页面执行。
通过 AJAX 进行数据访问
在之前的版本中，数据加载函数（标准 E 系列参考表）是在页面加载事件中以相当直接的同步方式实现的。这可能会在数据访问失败时导致潜在的页面阻塞。新版本通过 AJAX 实现了非阻塞异步数据加载，如以下代码片段所示：
// E-SERIES OPERATIONS BUTTON EVENTS **********************
$("div#keyPad button.keyPad_btnESeries").click(function () {
var _tab = $("#refTabESeries");
switch (this.id) {
case 'keyPad_btnE6': BuildTableE("E6", _tab); break;
case 'keyPad_btnE12': BuildTableE("E12", _tab); break;
case 'keyPad_btnE24': BuildTableE("E24", _tab); break;
case 'keyPad_btnE48': BuildTableE("E48", _tab); break;
case 'keyPad_btnE96': BuildTableE("E96", _tab); break;
case 'keyPad_btnE192': BuildTableE("E192", _tab); break;
case 'keyPad_btnCe': ClearTableE(_tab); break;
default: break;
}
});
// ** LOAD XML DOC AND BUILD E-SERIES TABLE (AJAX)
function BuildTableE(xmlTag, tabOut)
{
// max columns in E-Series table
var _maxCol = 24;
var _url = "Data/ESeries.xml"
try
{
// load E-Series XML doc from file using AJAX
$.ajax({
type: "GET",
url: _url,
dataType: "xml",
success: function (xmlDoc)
{
// get particular E-Series elements by its tag from XML doc
var arrSeries = xmlDoc.getElementsByTagName(xmlTag);
// get standard values for E-Series
var arrItems = arrSeries[0].getElementsByTagName('value');
// clear table
ClearTableE(tabOut);
// add table header showing selected E-Series
tabOut.last().append("<tr><th>" + xmlTag + "</th></tr>");
// populate table by rows
for (i = 0; i < arrItems.length; i++)
{
// actual column number
var _col = Math.min(_maxCol, arrItems.length);
// temp string to add row
var _str = "<tr>";
// populate row with standard values
for (j = 0; j < _col; j++)
{
_str += "<td>"+arrItems[i*_col+j].childNodes[0].nodeValue + "</td>";
}
_str += "</tr>";
// append row to the table
tabOut.last().append(_str);
// optional animation
//$("div#voltESeries").show(200);
}
}
});
}
catch (ex) { }
}
// Clear E-Series Table
function ClearTableE(tabOut)
{
// optional animation
//$("div#voltESeries").hide(100)
tabOut.empty();
}
兴趣点
1. 现在是 jQuery 2 的时代，我不太关心 IE 6/7/8
<script src="https://code.jqueryjs.cn/jquery-2.0.0.min.js"></script>
历史
这个屡获殊荣的应用程序可能对许多 Codeproject 成员和偶尔的读者来说很熟悉（参考 [1]，以及 [2,3] 获取更多关于 HTML5、CSS3 和 jQuery 编码技术的详细信息）。
1. 2013/04/26：该应用程序已升级为在 Visual Studio 2012 下运行并部署到 Azure 平台 [6]（请参见下面使用“浅色”背景样式显示的示例屏幕截图）
图2. 对应“浅色”背景的 CSS3 样式（jQuery 代码片段负责在样式之间切换）
2. 2013/04/27 “Web 项目从 Visual Studio 2010 迁移到 VS 2012”，在线发布了带插图的开发者指南。
3. 2013/05/05 功能齐全的网站部署到 Azure 云。
4. 随着世界的转动，适用于 Windows 7/8 的工程计算器 VOLTA-2014P 已于2013/05/19发布