这个不是我写的，老美写的开源项目，值得一看
附母版页的代码 ：<html xmlns="http://www.w3.org/1999/xhtml"><head id="head" runat="server"><meta http-equiv="content-type" content="text/html; charset=utf-8"><asp:ContentPlaceHolder Id="HeadContent" runat="server"> </asp:ContentPlaceHolder> <!-- META Tag Macro --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="false" /> <!--Styles--> <link rel="stylesheet" type="text/css" href="/css/custom.css" media="screen"/> <!--Scrips--> <script type="text/javascript" src="/scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/scripts/jquery.cycle.all.min.js"></script> <script type="text/javascript">$(document).ready(function(){ /* Dots Slider 1 */ $(function(){ $('#imageSlider') .after('<div id="imageSliderNav">') .cycle({ fx: 'fade', speed: 1550, timeout: 8000, pager: '#imageSliderNav' }); });});</script></head><body class="t"> <div id="logo" style="display:none"> <h1><a href="/"><umbraco:item runat="server" field="siteName" recursive="true"></umbraco:item></a></h1> </div> <div id="page"> <div id="header"> <a href="/"><img src="/images/logo.gif" width="259" height="65" /></a> <div id="sitedescription"> <h1>Runway</h1> <h1>Off to a great start</h1> </div> <div id="mainmenu"> <umbraco:Macro Alias="umbTopNavigation" runat="server"></umbraco:Macro> </div> <div class="mainmenucorner"> </div> </div><asp:contentplaceholder id="cp_top" runat="server"> </asp:contentplaceholder> <div id="content"> <div id="leftcontent"> <form id="RunwayMasterForm" runat="server"> <asp:contentplaceholder id="cp_content" runat="server"></asp:contentplaceholder> </form> </div> <div id="rightcontent"> <div class="hotspot"> <h4>Edit the right column</h4> <img src="/images/icons/dezinerfolio/info.png" width="52" height="52"/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo lectus, iaculis a laoreet in, lobortis in ligula. Proin in diam elit. Nulla facilisi. </p> <a href="#">Find more packages</a> </div> <div class="hotspot"> <h4>Create your own Macros and unleash the power of XSLT </h4> <img src="/images/icons/dezinerfolio/info.png" width="52" height="52"/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo lectus, iaculis a laoreet in, lobortis in ligula. Proin in diam elit. Nulla facilisi. </p> <a href="#">Using XSLT</a> </div> </div> </div> <div id="footer"> <div id="footermenu"> <h4>Navigation</h4> <umbraco:Macro Alias="umbTopNavigation" runat="server"></umbraco:Macro> </div> <div id="footershare"> <h4>Share/Social</h4> <ul> <li><a href="/company-news.aspx"><img src="images/icons/social_twitter.png" width="28" height="22" />Twitter</a></li> <li><a href="/company-blog.aspx"><img src="images/icons/social_facebook.png" width="28" height="22" />Facebook</a></li> <li><a href="/about.aspx"><img src="images/icons/social_linkedin.png" width="28" height="22" />Linkedin</a></li> <li><a href="/contact-us.aspx"><img src="images/icons/social_su.png" width="28" height="22" />Stumpled upon</a></li> </ul> </div> <div id="footercontact"> <h4>Contact information</h4> Company Name<br /> 918 East Test Rd. Test, WA 99206, USA<br /> <br />Telephone: 0 123 456 789 <br />Email: <a href="mailto:email@example.com">email@example.com</a> </div> <div id="footerabout"> <h4>About us</h4> You can edit these texts directly in the templates<br /><br /> Umbraco provides a full-featured web content management system that is easy to use, simple to customize, and robust enough to run the largest sites </div> <div id="footer-end"> Powered by <a href="http://umbraco.org" title="Umbraco - The open source ASP.NET CMS">Umbraco</a> | Skin created by <a href="http://www.mediaworkers.dk" title="Umbraco Solution Provider">Mediaworkers</a> </div> </div><!-- end div#wrapper --></body></html></asp:content>
再附上数据库安装部分的：<%@ Control Language="c#" AutoEventWireup="True" CodeBehind="database.ascx.cs" Inherits="Umbraco.Web.UI.Install.Steps.Database" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %><%@ Import Namespace="Umbraco.Core.Configuration" %><asp:PlaceHolder ID="settings" runat="server" Visible="true"> <!-- database box --> <div class="tab main-tabinfo"> <div class="container"> <h1>Database configuration</h1> <p> <strong>To complete this step you will either need a blank database or, if you do not have a blank database available, choose the SQL CE 4 embeddeddatabase (This is the recommended approach for first time users or if you are unsure).</strong> </p> <p> If you are not using the SQL CE 4 embedded database you will need the connection details for your database, such as the"connection string". You may need to contact your system administrator or web host for this information. </p> </div> <!-- database --> <div class="database-hold"> <form action="#"> <fieldset> <div class="step"> <div class="container"> <p> <strong>1. Select which database option best fits you:</strong> </p> <ul> <li> <input type="radio" id="databaseOptionBlank" name="database" value="blank" /> <label for="databaseOptionBlank">I already have a blank SQL Server, SQL Azure or MySQL database</label> </li> <li> <input type="radio" id="databaseOptionEmbedded" name="database" value="embedded" /> <label for="databaseOptionEmbedded">I want to use SQL CE 4, a free, quick-and-simple embedded database</label> </li> <li> <input type="radio" id="databaseOptionAdvanced" name="database" value="advanced" /> <label for="databaseOptionAdvanced">I'm an advanced user, let me put in the connection string</label> </li> <li> <input type="radio" id="databaseOptionHelp" name="database" value="help" /> <label for="databaseOptionHelp">I need help</label> </li> </ul> </div> </div> <!-- database options --> <div id="database-options"> <!-- blank option --> <div id="database-blank" class="database-option"> <div class="step"> <div class="container"> <p> <strong>2. Now choose your database type below.</strong> </p> <div class="select"> <asp:DropDownList runat="server" ID="DatabaseType" CssClass="sel"> <asp:ListItem Value="" Text="Please choose" Selected="True" /> <asp:ListItem Value="SqlServer" Text="Microsoft SQL Server" /> <asp:ListItem Value="SqlAzure" Text="SQL Azure" /> <asp:ListItem Value="MySql" Text="MySQL" /> </asp:DropDownList> </div> </div> </div> <div class="step" id="database-blank-inputs"> <div class="container"> <p class="instructionText"> <strong>3. Connection details:</strong> Please fill out the connection information for your database. </p> <div class="instruction-hold"> <asp:PlaceHolder ID="ph_dbError" runat="server" Visible="false"> <div class="row error"> <p class="text"> <strong> <asp:Literal ID="lt_dbError" runat="server" /></strong> </p> </div> <script type="text/javascript"> jQuery(document).ready(function () { showDatabaseSettings(); }); </script> </asp:PlaceHolder> <div class="row sql" runat="server" id="DatabaseServerItem"> <asp:Label runat="server" AssociatedControlID="DatabaseServer" ID="DatabaseServerLabel">Server:</asp:Label> <span> <asp:TextBox runat="server" CssClass="text" ID="DatabaseServer" /></span> </div> <div class="row sql" runat="server" id="DatabaseNameItem"> <asp:Label runat="server" AssociatedControlID="DatabaseName" ID="DatabaseNameLabel">Database name:</asp:Label> <span> <asp:TextBox runat="server" CssClass="text" ID="DatabaseName" /></span> </div> <div class="row sql" runat="server" id="DatabaseUsernameItem"> <asp:Label runat="server" AssociatedControlID="DatabaseUsername" ID="DatabaseUsernameLabel">Username:</asp:Label> <span> <asp:TextBox runat="server" CssClass="text" ID="DatabaseUsername" /></span> </div> <div class="row sql" runat="server" id="DatabasePasswordItem"> <asp:Label runat="server" AssociatedControlID="DatabasePassword" ID="DatabasePasswordLabel">Password:</asp:Label> <span> <asp:TextBox runat="server" ID="DatabasePassword" CssClass="text" TextMode="Password" /></span> </div> </div> </div> <!-- btn box --> </div> </div> <!-- embedded option --> <div id="database-embedded" class="database-option"> <div class="step"> <div class="container"> <p class="instructionText"> <strong>2. Simple file-based database:</strong> </p> <div class="instruction-hold"> <div class="row embeddedError" runat="server" id="embeddedFilesMissing" style="display: none;"> <p> <strong>Missing files:</strong> SQL CE 4 requires that you manually add the SQLCE 4 runtime to your Umbraco installation.<br /> You can either use the following <a href="http://our.umbraco.org/wiki/install-and-setup/using-sql-ce-4-with-umbraco-46" target="_blank">instructions</a> on how to add SQL CE 4 or select another database type from the dropdown above. </p> </div> <div class="row embedded" style="display: none;"> <p> <strong>Nothing to configure:</strong>SQL CE 4 does not require any configuration, simply click the "install" button to continue. </p> </div> </div> </div> </div> </div> <!-- advanced option --> <div id="database-advanced" class="database-option"> <div class="step"> <div class="container"> <p> <strong>2. Connection details:</strong> Please fill out the connection information for your database.</strong> </p> <div class="instruction-hold"> <div class="row custom" runat="server" id="DatabaseConnectionString"> <asp:Label runat="server" AssociatedControlID="ConnectionString" ID="ConnectionStringLabel">Connection string:</asp:Label> <span class="textarea"> <asp:TextBox runat="server" TextMode="MultiLine" CssClass="text textarea" ID="ConnectionString" /></span> </div> <div class="row custom check-hold"> <p> Example: <tt>datalayer=MySQL;server=192.168.2.8;user id=user;password=***;database=umbraco</tt> </p> </div> </div> </div> </div> </div> <!-- help option --> <div id="database-help" class="database-option"> <div class="step"> <div class="container"> <p> <strong>2. Getting a database setup for umbraco.</strong><br /> For first time users, we recommend you select "quick-and-simple embedded database". This will install an easy to use database, that does not require any additional software to use.<br /> Alternatively, you can install Microsoft SQL Server, which will require a bit more work to get up and running.<br /> We have provided a step-by-step guide in the video instructions below. </p> <span class="btn-link"><a href="http://umbraco.org/getting-started" target="_blank">Open video instructions</a></span> </div> </div> </div> <footer class="btn-box installbtn"> <div class="t"> </div> <asp:LinkButton runat="server" class="single-tab submit btn-install" OnClick="SaveDbConfig"><span>install</span> </asp:LinkButton> </footer> </div> </fieldset> </form> </div> </div> <script type="text/javascript"> var hasEmbeddedDlls = <%= HasEmbeddedDatabaseFiles.ToString().ToLower() %>; var currentVersion = '<%=UmbracoVersion.Current.ToString(3)%> <%=UmbracoVersion.CurrentComment%> '; var configured = <%= IsConfigured.ToString().ToLower() %>; jQuery(document).ready(function(){ <asp:literal runat="server" id="jsVars" /> $("input[name='database']").change(function() { switch($(this).val()) { case "blank": $(".database-option").hide(); $("#database-blank").show(); $(".installbtn").show(); break; case "embedded": $(".database-option").hide(); $("#database-embedded").show(); if (!hasEmbeddedDlls) { $('.embeddedError').show(); $(".installbtn").hide(); } else { $('.embedded').show(); $(".installbtn").show(); } break; case "advanced": $(".database-option").hide(); $("#database-advanced").show(); $(".installbtn").show(); break; case "help": $(".database-option").hide(); $("#database-help").show(); $(".installbtn").hide(); break; } }); <asp:Literal id="dbinit" runat="server"></asp:Literal> }); </script></asp:PlaceHolder><asp:PlaceHolder ID="installing" runat="server" Visible="false"> <!-- installing umbraco --> <div class="tab install-tab" id="datebase-tab"> <div class="container"> <asp:PlaceHolder ID="installProgress" runat="server" Visible="True"> <div class="progress-status-container"> <h1>Installing Umbraco</h1> <p> The Umbraco database is being configured. This process populates your chosen database with a blank Umbraco instance. </p> </div> <div class="result-status-container" style="display: none;"> <h1>Database installed</h1> <div class="success"> <p> Umbraco <%=UmbracoVersion.Current.ToString(3)%> <%=UmbracoVersion.CurrentComment%> has now been copied to your database. Press <b>Continue</b> to proceed. </p> </div> </div> </asp:PlaceHolder> <asp:PlaceHolder ID="upgradeProgress" runat="server" Visible="False"> <div class="progress-status-container"> <h1>Upgrading Umbraco</h1> <p> The Umbraco database is being configured. This process upgrades your Umbraco database. </p> </div> <div class="result-status-container" style="display: none;"> <h1>Database upgraded</h1> <div class="success"> <p> Your database has been upgraded to version: <%=UmbracoVersion.Current.ToString(3)%>.<br /> Press <b>Continue</b> to proceed. </p> </div> </div> </asp:PlaceHolder> <div class="loader"> <div class="hold"> <div class="progress-bar"> </div> <span class="progress-bar-value">0%</span> </div> <strong></strong> </div> </div> <!-- btn box --> <footer class="btn-box" style="display: none;"> <div class="t"> </div> <asp:LinkButton class="btn-step btn btn-continue" runat="server" OnClick="GotoNextStep"><span>Continue</span></asp:LinkButton> <asp:LinkButton class="btn-step btn btn-back" Style="display: none;" runat="server" OnClick="GotoSettings"><span>Back</span></asp:LinkButton> </footer> </div> <script type="text/javascript"> jQuery(document).ready(function() { updateProgressBar("5"); updateStatusMessage("Connecting to database.."); $.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', data: '{}', dataType: 'json', url: 'InstallerRestService.aspx/InstallOrUpgrade', success: function(data) { var json = JSON.parse(data.d); updateProgressBar(json.Percentage); updateStatusMessage(json.Message); if (json.Success) { $(".btn-box").show(); $('.ui-progressbar-value').css("background-image", "url(../umbraco_client/installer/images/pbar.gif)"); $(".result-status-container").show(); $(".progress-status-container").hide(); } else { $(".btn-continue").hide(); $(".btn-back").show(); $(".btn-box").show(); } } }); }); </script></asp:PlaceHolder>
评论