Asp.Net实现在线网站安装（下）——最终实现与发布

翅膀的初衷

发表于2014-07-18 21:59:48

上二篇文章我们介绍了网站在线安装的下载功能与压缩打包与解压功能，基本重点内容都已经实现，本文重点讲解如何调用上成介绍的内整，并将他们整合到一起。

我们新建一个aspx页，同理，将所有的不相干的cs文件删掉，这就是我们的最终页了，在这里，只要用户一点开始安装，系统就自动下载安装文件包，下载完成后，解压，开始正式安装。

首先输入如下HTML标签

<input type="button" value="开始" onclick="start()" />
<div id="Msg"></div>

这个按扭我们用来控制开始操作。

而Msg用来显示提示信息，其它所有操作，通过后台与JS的互动来实现。

var processBar;
var processBarBox;
function start(){
    processBarBox = document.createElement("div");
    processBarBox.style.cssText = "width:200px; border:solid 1px #00f; height:30px; margin:auto; background-color:#f5f5f5;";
    processBar  = document.createElement("div");
    processBar.style.cssText = "width:50%;  border:solid 1px #f5f5f5; background-color:#00f; height:28px; overflow:hidden";
    processBarBox.appendChild(processBar);
    document.body.appendChild(processBarBox);
    var frame = document.createElement("iframe");
    frame.src="JNSETUPTEMPDOWN.ASPX";
    frame.frameborder="0";
    frame.width="0";
    frame.height="0";
    document.body.appendChild(frame);
}
function DeCompress(){
    processBar.style.width = "100%";
    document.getElementById("Msg").innerHTML = "开始解压……";
}
function DeCompressCompleted(){
    document.getElementById("Msg").innerHTML = "解压完成，正在开始安装向导……";
    location.href='/install/index.aspx';
}
function DownloadProgressChanged(value){
    processBar.style.width = value + "%";
}
function ErrorMessage(value){
    document.getElementById("Msg").innerHTML = '<span style="color:#f00">'+value+'</span>';
}

实现原理就是：当用户一点开始，我们通过JS创建一个iframe元素，通过它调用我们刚才创建DownloadAndDeCompress.aspx。

事实上，这个页面是一个长链接，它在进行下载时，会不停的输出JS，调用父页面的相关方法，推动父页面的进度条滚动。

至此，功能就全了，但是，这里还是有二个文件，并没有达到我们只需要一个文件目标，怎么办？

我的解决方法是将DownloadAndDeCompress.aspx页面序例化成字符串保存在setup.aspx中，在setup.aspx访问时，再释放出来。

Convert.ToBase64String(
            System.IO.File.ReadAllBytes(Server.MapPath("~/DownloadAndDeCompress.aspx"))
        )

通过上面的方法，可以将DownloadAndDeCompress.aspx页面序例化成Base64的字符串，然后将其保存在setup.aspx中即可。

setup.aspx完整代码如下：

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>安装向导</title>
</head>
<body>
<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    if (!System.IO.File.Exists(Server.MapPath("~/DownloadAndDeCompress.ASPX")))
    {
        System.IO.File.WriteAllBytes(Server.MapPath("~/DownloadAndDeCompress.ASPX"), Convert.FromBase64String("77u/PCVAIFBhZ2UgTGFuZ3VhZ2U9IkMjIiBBdXRvRXZlbnRXaXJldXA9InRydWUiIENvZGVCZWhpbmQ9InRlc3QyLmFzcHguY3MiIEFzeW5jPSJ0cnVlIiAgJT4NCjxzY3JpcHQgdHlwZT0idGV4dC9DIyIgcnVuYXQ9InNlcnZlciI+DQpwcm90ZWN0ZWQgdm9pZCBQYWdlX0xvYWQob2JqZWN0IHNlbmRlciwgRXZlbnRBcmdzIGUpDQp7DQogICAgdXNpbmcgKFN5c3RlbS5OZXQuV2ViQ2xpZW50IHdjID0gbmV3IFN5c3RlbS5OZXQuV2ViQ2xpZW50KCkpDQogICAgew0KICAgICAgICB3Yy5Eb3dubG9hZFByb2dyZXNzQ2hhbmdlZCArPSBuZXcgU3lzdGVtLk5ldC5Eb3dubG9hZFByb2dyZXNzQ2hhbmdlZEV2ZW50SGFuZGxlcihkb3dubG9hZFByb2dyZXNzQ2hhbmdlZCk7DQogICAgICAgIHdjLkRvd25sb2FkRmlsZUNvbXBsZXRlZCArPSBuZXcgU3lzdGVtLkNvbXBvbmVudE1vZGVsLkFzeW5jQ29tcGxldGVkRXZlbnRIYW5kbGVyKGRvd25sb2FkRmlsZUNvbXBsZXRlZCk7DQogICAgICAgIHdjLkRvd25sb2FkRmlsZUFzeW5jKG5ldyBVcmkoImh0dHA6Ly9sb2NhbGhvc3Q6OTU4Mi9zZXR1cC56aXAiKSwgU2VydmVyLk1hcFBhdGgoIn4vc2V0dXAuemlwIikpOw0KICAgIH0NCn0NCg0KcHJpdmF0ZSB2b2lkIGRvd25sb2FkRmlsZUNvbXBsZXRlZChvYmplY3Qgc2VuZGVyLCBTeXN0ZW0uQ29tcG9uZW50TW9kZWwuQXN5bmNDb21wbGV0ZWRFdmVudEFyZ3MgZSkNCnsNCiAgICBSZXNwb25zZS5Xcml0ZSgiPHNjcmlwdD53aW5kb3cucGFyZW50LkRlQ29tcHJlc3MoKTwvIisic2NyaXB0PiIpOw0KICAgIFJlc3BvbnNlLkZsdXNoKCk7DQogICAgRGVDb21wcmVzcyhTZXJ2ZXIuTWFwUGF0aCgifi9zZXR1cC56aXAiKSwgU2VydmVyLk1hcFBhdGgoIn4vIikpOw0KICAgIFJlc3BvbnNlLldyaXRlKCI8c2NyaXB0PndpbmRvdy5wYXJlbnQuRGVDb21wcmVzc0NvbXBsZXRlZCgpPC8iKyJzY3JpcHQ+Iik7DQogICAgUmVzcG9uc2UuRmx1c2goKTsNCn0NCg0KcHJpdmF0ZSB2b2lkIGRvd25sb2FkUHJvZ3Jlc3NDaGFuZ2VkKG9iamVjdCBzZW5kZXIsIFN5c3RlbS5OZXQuRG93bmxvYWRQcm9ncmVzc0NoYW5nZWRFdmVudEFyZ3MgZSkNCnsNCiAgICAvL3NjcmlwdA0KICAgIFJlc3BvbnNlLldyaXRlKCI8c2NyaXB0PndpbmRvdy5wYXJlbnQuRG93bmxvYWRQcm9ncmVzc0NoYW5nZWQoIiArIGUuUHJvZ3Jlc3NQZXJjZW50YWdlLlRvU3RyaW5nKCkgKyAiKTwvIisic2NyaXB0PiIpOw0KICAgIFJlc3BvbnNlLkZsdXNoKCk7DQp9DQoNCnB1YmxpYyB2b2lkIERlQ29tcHJlc3Moc3RyaW5nIGZpbGVOYW1lLCBzdHJpbmcgZGlyUGF0aCkNCnsNCiAgICB1c2luZyAoU3lzdGVtLklPLlN0cmVhbSBzb3VyY2UgPSBTeXN0ZW0uSU8uRmlsZS5PcGVuUmVhZChmaWxlTmFtZSkpDQogICAgew0KICAgICAgICB1c2luZyAoU3lzdGVtLklPLlN0cmVhbSBkZXN0aW5hdGlvbiA9IG5ldyBTeXN0ZW0uSU8uTWVtb3J5U3RyZWFtKCkpDQogICAgICAgIHsNCiAgICAgICAgICAgIHVzaW5nIChTeXN0ZW0uSU8uQ29tcHJlc3Npb24uR1ppcFN0cmVhbSBpbnB1dCA9IG5ldyBTeXN0ZW0uSU8uQ29tcHJlc3Npb24uR1ppcFN0cmVhbShzb3VyY2UsIFN5c3RlbS5JTy5Db21wcmVzc2lvbi5Db21wcmVzc2lvbk1vZGUuRGVjb21wcmVzcywgdHJ1ZSkpDQogICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgYnl0ZVtdIGJ5dGVzID0gbmV3IGJ5dGVbNDA5Nl07DQogICAgICAgICAgICAgICAgaW50IG47DQogICAgICAgICAgICAgICAgd2hpbGUgKChuID0gaW5wdXQuUmVhZChieXRlcywgMCwgYnl0ZXMuTGVuZ3RoKSkgIT0gMCkNCiAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgIGRlc3RpbmF0aW9uLldyaXRlKGJ5dGVzLCAwLCBuKTsNCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQogICAgICAgICAgICBkZXN0aW5hdGlvbi5GbHVzaCgpOw0KICAgICAgICAgICAgZGVzdGluYXRpb24uUG9zaXRpb24gPSAwOw0KICAgICAgICAgICAgRGVTZXJpYWxpemVGaWxlcyhkZXN0aW5hdGlvbiwgZGlyUGF0aCk7DQogICAgICAgIH0NCiAgICB9DQp9DQoNCnByaXZhdGUgdm9pZCBEZVNlcmlhbGl6ZUZpbGVzKFN5c3RlbS5JTy5TdHJlYW0gcywgc3RyaW5nIGRpclBhdGgpDQp7DQogICAgU3lzdGVtLlJ1bnRpbWUuU2VyaWFsaXphdGlvbi5Gb3JtYXR0ZXJzLkJpbmFyeS5CaW5hcnlGb3JtYXR0ZXIgYiA9IG5ldyBTeXN0ZW0uUnVudGltZS5TZXJpYWxpemF0aW9uLkZvcm1hdHRlcnMuQmluYXJ5LkJpbmFyeUZvcm1hdHRlcigpOw0KICAgIFN5c3RlbS5Db2xsZWN0aW9ucy5HZW5lcmljLkRpY3Rpb25hcnk8c3RyaW5nLCBvYmplY3Q+IGxpc3QgPSAoU3lzdGVtLkNvbGxlY3Rpb25zLkdlbmVyaWMuRGljdGlvbmFyeTxzdHJpbmcsIG9iamVjdD4pYi5EZXNlcmlhbGl6ZShzKTsNCiAgICBEZUZpbGVzKGxpc3QsIGRpclBhdGgpOw0KfQ0KDQpwcml2YXRlIHZvaWQgRGVGaWxlcyhTeXN0ZW0uQ29sbGVjdGlvbnMuR2VuZXJpYy5EaWN0aW9uYXJ5PHN0cmluZywgb2JqZWN0PiBsaXN0LCBzdHJpbmcgZGlyUGF0aCkNCnsNCiAgICBmb3JlYWNoIChTeXN0ZW0uQ29sbGVjdGlvbnMuR2VuZXJpYy5LZXlWYWx1ZVBhaXI8c3RyaW5nLCBvYmplY3Q+IG4gaW4gbGlzdCkNCiAgICB7DQogICAgICAgIHN0cmluZyBuZXdOYW1lID0gc3RyaW5nLkNvbmNhdChkaXJQYXRoLCBuLktleS5SZW1vdmUoMCwgMSkpOw0KICAgICAgICBpZiAobi5LZXlbMF0gPT0gJzAnKQ0KICAgICAgICB7DQogICAgICAgICAgICBTeXN0ZW0uSU8uRGlyZWN0b3J5LkNyZWF0ZURpcmVjdG9yeShuZXdOYW1lKTsNCiAgICAgICAgICAgIGlmIChuLlZhbHVlICE9IG51bGwpDQogICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgRGVGaWxlcygoU3lzdGVtLkNvbGxlY3Rpb25zLkdlbmVyaWMuRGljdGlvbmFyeTxzdHJpbmcsIG9iamVjdD4pbi5WYWx1ZSwgZGlyUGF0aCk7DQogICAgICAgICAgICB9DQogICAgICAgIH0NCiAgICAgICAgZWxzZQ0KICAgICAgICB7DQoNCiAgICAgICAgICAgIHVzaW5nIChTeXN0ZW0uSU8uRmlsZVN0cmVhbSBmcyA9IG5ldyBTeXN0ZW0uSU8uRmlsZVN0cmVhbShuZXdOYW1lLCBTeXN0ZW0uSU8uRmlsZU1vZGUuQ3JlYXRlLCBTeXN0ZW0uSU8uRmlsZUFjY2Vzcy5Xcml0ZSkpDQogICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgYnl0ZVtdIGJ5dGVzID0gKGJ5dGVbXSluLlZhbHVlOw0KICAgICAgICAgICAgICAgIGZzLldyaXRlKGJ5dGVzLCAwLCBieXRlcy5MZW5ndGgpOw0KICAgICAgICAgICAgICAgIGZzLkNsb3NlKCk7DQogICAgICAgICAgICB9DQogICAgICAgIH0NCiAgICB9DQp9DQo8L3NjcmlwdD4="));
    }
}
</script>
<input type="button" value="开始" onclick="start()" />
<div id="Msg"></div>
<script type="text/javascript">
var processBar;
var processBarBox;
function start(){
    processBarBox = document.createElement("div");
    processBarBox.style.cssText = "width:200px; border:solid 1px #00f; height:30px; margin:auto; background-color:#f5f5f5;";
    processBar  = document.createElement("div");
    processBar.style.cssText = "width:50%;  border:solid 1px #f5f5f5; background-color:#00f; height:28px; overflow:hidden";
    processBarBox.appendChild(processBar);
    document.body.appendChild(processBarBox);
    var frame = document.createElement("iframe");
    frame.src="DownloadAndDeCompress.ASPX";
    frame.frameborder="0";
    frame.width="0";
    frame.height="0";
    document.body.appendChild(frame);
}
function DeCompress(){
    processBar.style.width = "100%";
    document.getElementById("Msg").innerHTML = "开始解压……";
}
function DeCompressCompleted(){
    document.getElementById("Msg").innerHTML = "解压完成，正在开始安装向导……";
    location.href='/install/index.aspx';
}
function DownloadProgressChanged(value){
    processBar.style.width = value + "%";
}
function ErrorMessage(value){
    document.getElementById("Msg").innerHTML = '<span style="color:#f00">'+value+'</span>';
}
</script>
</body>
</html>

至此，大功告成，最后，考虑下载的超时问题，我们的安装包，也尽量控制一下大小。如果要美化此页面，css,js,及图片等资源，放在一个远程服务器上即可，不需要用户下载

来源：本站原创点击：54747