Dev Express 控件对于异步刷新和异步调用有很好的封装。具体的详细分析见下次文档。这篇文档主要是代码的使用：有前段和后端。
JS代码部分：
var step = 1; var CCTypeEnum = { Visa: 0, MasterCard: 1, Discover_Novus: 2, Amex: 3 } var _ccTypeEnum; var _planId; function openPurchaseWizard(Id) { step = 1; _planId = Id; ClearAllFields(); initPlanInfo.PerformCallback(JSON.stringify({ planId: Id.toString() })); SetStepVisibility(); } function ClearAllFields() { _ccTypeEnum = null; var result = document.getElementById("cbAgree"); result.checked = false; txtCardNumber.SetText(""); cmbExpMonth.SetText(""); cmbExpYear.SetText(""); } function initPlanInfoCallBack_CallbackComplete(s, e) { purchasePlanWizardLightbox.Show(); } function PurchasePlanWizardTopCloseButton_Click(s, e) { document.getElementById('PurchasePlanClose_Contents').innerHTML = messageLanguagePurchasePlanWizard.Get("PurchasePlanWizardJS_CloseWizard"); purchasePlanCloseMsg.Show(); document.body.style.overflow = "auto"; document.documentElement.style.overflow = 'auto'; } function PurchasePlanPrintButton_Click(s, e) { document.getElementById('PurchasePlanPrintIframe').focus(); document.getElementById('PurchasePlanPrintIframe').contentWindow.focus(); document.getElementById('PurchasePlanPrintIframe').contentWindow.print(); } function PurchasePlanNextButton_Click(s, e) { if (step == 1) { var result = document.getElementById("cbAgree"); if (!result.checked) { document.getElementById('PurchasePlanAlert_Contents').innerHTML = messageLanguagePurchasePlanWizard.Get("PurchasePlanWizardJS_CheckAgreeAlert"); purchasePlanSlideOutMsg.Show(); return; } } if (step == 2) { if (hasBlankField() || (!ValidateField())) { document.getElementById('PurchasePlanAlert_Contents').innerHTML = messageLanguagePurchasePlanWizard.Get("PurchasePlanWizardJS_IsRequiredFields"); purchasePlanSlideOutMsg.Show(); return; } var cardNumber = txtCardNumber.GetText(); for (var i = 0; i < cardNumber.length - 4; i++) { cardNumber=cardNumber.replace(cardNumber[i].toString(), '●'); } document.getElementById("txtConfirmCardNumber").innerHTML = cardNumber; document.getElementById("txtConfirmExpDate").innerHTML = cmbExpMonth.GetValue() + "/" + cmbExpYear.GetValue(); ; document.getElementById("txtConfirmBillingZip").innerHTML = txtPostalCode.GetText(); } step++; SetStepVisibility(); } function SetStepVisibility() { switch (step) { case 1: document.getElementById("PurchasePlanTitle").innerHTML = messageLanguagePurchasePlanWizard.Get("PurchasePlan_ReviewTermsConditions"); break; case 2: document.getElementById("PurchasePlanTitle").innerHTML = messageLanguagePurchasePlanWizard.Get("PurchasePlan_TitleEnterBillingInformation"); break; case 3: document.getElementById("PurchasePlanTitle").innerHTML = messageLanguagePurchasePlanWizard.Get("PurchasePlan_TitleReviewAndConfirmPurchase"); break; } document.getElementById("ReviewTermsDiv").style.visibility = step == 1 ? "visible" : "hidden"; document.getElementById("ReviewTermsDiv").style.display = step == 1 ? "" : "none"; document.getElementById("ReviewTermsDivFooter").style.visibility = step == 1 ? "visible" : "hidden"; document.getElementById("ReviewTermsDivFooter").style.display = step == 1 ? "" : "none"; document.getElementById("EnterBillingInfoDiv").style.visibility = step == 2 ? "visible" : "hidden"; document.getElementById("EnterBillingInfoDiv").style.display = step == 2 ? "" : "none"; document.getElementById("ConfirmPurchaseDiv").style.visibility = step == 3 ? "visible" : "hidden"; document.getElementById("ConfirmPurchaseDiv").style.display = step == 3 ? "" : "none"; PurchasePlanWizardPreviousButton.SetVisible(step > 1 && step < 4); document.getElementById("ReviewTermsStepDiv").className = document.getElementById("ReviewTermsStepDiv").className. replace("purchase-plan-step-div" + (step == 1 ? "" : "-current"), "purchase-plan-step-div" + (step == 1 ? "-current" : "")); document.getElementById("EnterBillingInfoStepDiv").className = document.getElementById("EnterBillingInfoStepDiv").className. replace("purchase-plan-step-div" + (step == 2 ? "" : "-current"), "purchase-plan-step-div" + (step == 2 ? "-current" : "")); document.getElementById("ConfirmPurchaseStepDiv").className = document.getElementById("ConfirmPurchaseStepDiv").className. replace("purchase-plan-step-div" + (step == 3 ? "" : "-current"), "purchase-plan-step-div" + (step == 3 ? "-current" : "")); document.getElementById("ReviewTermsIconDiv").className = step == 1 ? "purchase-plan-step-icon" : "purchase-plan-step-icon-inactive"; document.getElementById("EnterBillingInfoIconDiv").className = step == 2 ? "purchase-plan-step-icon" : "purchase-plan-step-icon-inactive"; document.getElementById("ConfirmPurchaseIconDiv").className = step == 3 ? "purchase-plan-step-icon" : "purchase-plan-step-icon-inactive"; PurchasePlanWizardNextButton.SetVisible(step < 3); PurchasePlanWizardConfirmButton.SetVisible(step == 3); } function PurchasePlanPreviousButton_Click(s, e) { step--; SetStepVisibility(); } function CCTypeButton_Click(CCType) { switch (CCType) { case CCTypeEnum.Visa: document.getElementById("CCType_Visa").className = "purchase-plan-card-visa-select"; document.getElementById("CCType_Mastercard").className = "purchase-plan-card-mastercard-unselect"; document.getElementById("CCType_Discover").className = "purchase-plan-card-discover-unselect"; document.getElementById("CCType_Amex").className = "purchase-plan-card-amex-unselect"; _ccTypeEnum = CCTypeEnum.Visa; break; case CCTypeEnum.MasterCard: document.getElementById("CCType_Mastercard").className = "purchase-plan-card-mastercard-select"; document.getElementById("CCType_Visa").className = "purchase-plan-card-visa-unselect"; document.getElementById("CCType_Discover").className = "purchase-plan-card-discover-unselect"; document.getElementById("CCType_Amex").className = "purchase-plan-card-amex-unselect"; _ccTypeEnum = CCTypeEnum.MasterCard; break; case CCTypeEnum.Discover_Novus: document.getElementById("CCType_Discover").className = "purchase-plan-card-discover-select"; document.getElementById("CCType_Visa").className = "purchase-plan-card-visa-unselect"; document.getElementById("CCType_Mastercard").className = "purchase-plan-card-mastercard-unselect" document.getElementById("CCType_Amex").className = "purchase-plan-card-amex-unselect"; _ccTypeEnum = CCTypeEnum.Discover_Novus; break; case CCTypeEnum.Amex: document.getElementById("CCType_Amex").className = "purchase-plan-card-amex-select"; document.getElementById("CCType_Visa").className = "purchase-plan-card-visa-unselect"; document.getElementById("CCType_Mastercard").className = "purchase-plan-card-mastercard-unselect"; document.getElementById("CCType_Discover").className = "purchase-plan-card-discover-unselect"; _ccTypeEnum = CCTypeEnum.Amex; break; } } function OnCountryChanged(s) { cmbStateProvince.PerformCallback(s.GetValue()); } function cmbStateProvince_EndCallBack(s, e) { cmbStateProvince.SetText(""); } function hasBlankField() { var hasBlank = false; ImageAddress_ConInvalidCharacter.SetVisible(false); ImageCity_ConInvalidCharacter.SetVisible(false); ImageStateProvince_ConInvalidCharacter.SetVisible(false); ImageCountry_ConInvalidCharacter.SetVisible(false); ImagePostalCode_ConInvalidCharacter.SetVisible(false); ImageCardNummber_ConInvalidCharacter.SetVisible(false); ImageExpDate_Error.SetVisible(false); ImageCardType_Error.SetVisible(false); if (_ccTypeEnum == null) { ImageCardType_Error.SetVisible(true); hasBlank = true; } if (IsBlank(txtCardNumber, ImageCardNummber_Error)) { hasBlank = true; } if (ValidateExpDateBlank()) { hasBlank = true; } if (IsBlank(txtAddress, ImageAddress_ConError)) { hasBlank = true; } if (IsBlank(txtCity, ImageCity_ConError)) { hasBlank = true; } if (IsBlank(cmbStateProvince, ImageStateProvince_ConError)) { hasBlank = true; } if (IsBlank(cmbCountry, ImageCountry_ConError)) { hasBlank = true; } if (IsBlank(txtPostalCode, ImagePostalCode_ConError)) { hasBlank = true; } return hasBlank; } function IsBlank(instanceName, instanceErrorName) { if (Dyna.len(instanceName.GetText().Trim()) < 1) { instanceErrorName.SetVisible(true); return true; } else { instanceErrorName.SetVisible(false); return false; } } function ValidateField() { var valid = true; switch (_ccTypeEnum) { case CCTypeEnum.Visa: if (!validateVisaCard(txtCardNumber.GetText())) { ImageCardNummber_ConInvalidCharacter.SetVisible(true); valid = false; } break; case CCTypeEnum.MasterCard: if (!validateMasterCardCard(txtCardNumber.GetText())) { ImageCardNummber_ConInvalidCharacter.SetVisible(true); valid = false; } break; case CCTypeEnum.Discover_Novus: if (!validateDiscover_NovusCard(txtCardNumber.GetText())) { ImageCardNummber_ConInvalidCharacter.SetVisible(true); valid = false; } break; case CCTypeEnum.Amex: if (!validateAmexCard(txtCardNumber.GetText())) { ImageCardNummber_ConInvalidCharacter.SetVisible(true); valid = false; } break; } if (!ValidateExpDateField()) { valid = false; ImageExpDate_Error.SetVisible(true); } if (!validateAddress1(txtAddress.GetText())) { ImageAddress_ConInvalidCharacter.SetVisible(true); valid = false; } if (!validateCity(txtCity.GetText())) { ImageCity_ConInvalidCharacter.SetVisible(true); valid = false; } if (!validateZip(txtPostalCode.GetText())) { ImagePostalCode_ConInvalidCharacter.SetVisible(true); valid = false; } return valid; } function ValidateExpDateBlank() { if ((Dyna.len(cmbExpMonth.GetText().Trim()) < 1) || (Dyna.len(cmbExpYear.GetText().Trim()) < 1)) { ImageExpDate_ConError.SetVisible(true); return true; } else { ImageExpDate_ConError.SetVisible(false); return false; } } function ValidateExpDateField() { var valid = true; var month = cmbExpMonth.GetValue(); var year = cmbExpYear.GetValue(); var date = new Date() var nowYear = date.getFullYear(); var nowMonth = date.getMonth()+1; if ((nowYear == year) && (month <= nowMonth)) { valid = false; } return valid; } function PurchasePlanConfirmButton_Click(s, e) { if ((IsBlank(txtEmailTo, ImageSentEmail_ConError))) { document.getElementById('PurchasePlanAlert_Contents').innerHTML = messageLanguagePurchasePlanWizard.Get("PurchasePlan_EmailAddressIsARequiredField"); purchasePlanSlideOutMsg.Show(); return; } if (!validateEmailAddress(txtEmailTo.GetText())) { ImageSentEmail_ConInvalidCharacter.SetVisible(true); document.getElementById('PurchasePlanAlert_Contents').innerHTML = messageLanguagePurchasePlanWizard.Get("PurchasePlan_EmailAddressContainsInvalidCharacters"); purchasePlanSlideOutMsg.Show(); return; } SavePurchasePlanCallBack.PerformCallback(JSON.stringify({ planId: _planId.toString() })); } function savePurchasePlan_CallbackComplete(s, e) { if (SavePurchasePlanCallBack.cpError) { ShowSimpleAlert(messageLanguagePurchasePlanWizard.Get("PurchasePlanWizardJS_Error"), messageLanguagePurchasePlanWizard.Get("PurchasePlanWizardJS_AnErrorOccurred")); return; } if (SavePurchasePlanCallBack.cpFlag) { //Call Salesforce to convert lead Dyna.Net.callMethod({ ok: convertLeadSuccess, fail: convertLeadFail, type: 'Domain.Services.PartnerService', method: 'PartnerSalesForceConvertLead', args: [ { name: 'username', value: SavePurchasePlanCallBack.cpUsername } ] }); window.location.href = "../home/Home.aspx"; } else { ShowSimpleAlert(messageLanguagePurchasePlanWizard.Get("PurchasePlanWizardJS_Error"), messageLanguagePurchasePlanWizard.Get("PurchasePlanWizardJS_AnErrorOccurred")); } } function convertLeadSuccess() { //return true; } function convertLeadFail() { //return false; }
主要的HTML代码部分：
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PurchasePlanWizardForm.ascx.cs" Inherits="WebPortalApplication.App_Components.Forms.PurchasePlanWizardForm" %> <%@ Register TagPrefix="intronis" TagName="PurchasePlanWizardCloseLightbox" Src="~/App_Components/LightBox/PurchasePlanWizardCloseLightbox.ascx" %> <%@ Register TagPrefix="intronis" TagName="PurchasePlanSlideOutLightbox" Src="~/App_Components/LightBox/PurchasePlanSlideOutLightbox.ascx" %> <%@ Register TagPrefix="intronis" TagName="ImageButton" Src="~/App_Components/Buttons/ImageButton.ascx" %> <div id="purchasePlanWizardDiv"></div> <div class="purchase-plan-div"> <div class="purchase-plan-title" id="PurchasePlanTitle" clientidmode="Static"> </div> <div class="lbHeaderClosePanel purchase-plan-close" onclick="PurchasePlanWizardTopCloseButton_Click()" title=""></div> <div class="purchase-plan-step-left"> <div id="ConfirmPurchaseStepDiv" class="purchase-plan-step-float purchase-plan-step-div" style="margin-right:-23px;"> <div id="ConfirmPurchaseIconDiv" class="purchase-plan-step-icon-inactive"> </div> <div class="purchase-plan-step-text confirm-purchase-title-div"><asp:Localize ID="Localize4" Text="<%$resources:Language,PurchasePlan_ConfirmPurchase%>" runat="server"/></div> </div> <div id="EnterBillingInfoStepDiv" class="purchase-plan-step-float purchase-plan-step-div" style="margin-right:-27px;"> <div id="EnterBillingInfoIconDiv" class="purchase-plan-step-icon-inactive"> </div> <div class="purchase-plan-step-text enter-billingInfo-title-div"><asp:Localize ID="Localize3" Text="<%$resources:Language,PurchasePlan_EnterBillingInfo%>" runat="server"/></div> </div> <div id="ReviewTermsStepDiv" class="purchase-plan-step-float purchase-plan-step-div-current" style="margin-right:-16px;"> <div id="ReviewTermsIconDiv" class="purchase-plan-step-icon"> </div> <div class="purchase-plan-step-text reviewterms-title-div"><asp:Localize ID="Localize2" Text="<%$resources:Language,PurchasePlan_ReviewTerms%>" runat="server"/> </div> </div> </div> <br /> <div class="purchase-plan-line"></div> <dxcp:ASPxCallbackPanel ID="InitPlanInfo" runat="server" SkinID="NoLoading" HideContentOnCallback="False" ClientInstanceName="initPlanInfo" OnCallback="InitPlanInfoCallBack_Callback"> <ClientSideEvents EndCallback="initPlanInfoCallBack_CallbackComplete" /> <PanelCollection> <dxp:PanelContent> <dxhf:ASPxHiddenField ID="OriginalBillingAddressHiddenField" runat="server" ClientInstanceName="OriginalBillingAddressHiddenField" /> <div id="ReviewTermsDiv" class="purchase-plan-reviewterms" runat="server" clientidmode="Static"> <div id="ReviewTermsContentDiv" > <div class="plan-summary"> <asp:Localize ID="PlanSummary" runat="server"/> </div> <div style=" margin-top:10px;"> <span class="plan-summary"><asp:Localize ID="Localize1" Text="<%$resources:Language,PurchasePlan_OnlineBackupPlan%>" runat="server"/></span> <span class="plan-detail"> <asp:Localize ID="OnlineBackupPlan" runat="server" /></span> </div> <div> <span class="plan-summary"><asp:Localize ID="Localize6" Text="<%$resources:Language,PurchasePlan_EffectiveDate%>" runat="server"/></span> <span class="plan-detail"><asp:Localize ID="EffectiveDate" runat="server"/></span> </div> <div> <span class="plan-summary"><asp:Localize ID="Localize8" Text="<%$resources:Language,PurchasePlan_PaymentSchedule%>" runat="server"/></span> <span class="plan-detail"><asp:Localize ID="PaymentSchedule" runat="server"/></span> </div> </div> <div style="margin-top:35px;"> <iframe id="PurchasePlanPrintIframe" class="purchase-plan-doc" src="../../docs/localization/en-us/ZeroTouchPlanPurchaseTsCs.htm"></iframe> </div> </div> <div id="EnterBillingInfoDiv" runat="server" clientidmode="Static" class="purchase-plan-reviewterms" style="visibility: hidden;display:none;margin-top:22px;"> <div id="EnterBillingInfoContentDiv"> <div class="purchase-plan-step-enter-text"> <asp:Localize ID="Localize5" Text="<%$resources:Language,PurchasePlan_EnterBillingInfo_Content%>" runat="server"/> </div> <div class="purchase-plan-cridit-card-details"> <div class="purchase-plan-card-text"> <asp:Localize ID="Localize7" Text="<%$resources:Language,PurchasePlan_CreditCardDetails%>" runat="server"/> </div> <div class="purchase-plan-card-type-text"> <asp:Localize ID="Localize9" Text="<%$resources:Language,PurchasePlan_CardType%>" runat="server"/><span class="required-indicator-red">*</span> </div> <div style="height:30px;"> <div id="CCType_Visa" class="purchase-plan-card-visa-unselect" onclick="CCTypeButton_Click(<% =(int)Infrastructure.Maestro.PortalTypes.CCTypeEnum.Visa%>)"></div> <div id="CCType_Mastercard" class="purchase-plan-card-mastercard-unselect" onclick="CCTypeButton_Click(<% =(int)Infrastructure.Maestro.PortalTypes.CCTypeEnum.MasterCard%>)"></div> <div id="CCType_Discover"class="purchase-plan-card-discover-unselect" onclick="CCTypeButton_Click(<% =(int)Infrastructure.Maestro.PortalTypes.CCTypeEnum.Discover_Novus%>)"></div> <div id="CCType_Amex" class="purchase-plan-card-amex-unselect" onclick="CCTypeButton_Click(<% =(int)Infrastructure.Maestro.PortalTypes.CCTypeEnum.Amex%>)"></div> <div class="purchase-plan-card-type-error"><dxe:ASPxImage ID="ImageCardType_Error" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageCardType_Error" ToolTip="<%$ Resources:Language,PurchaseCardTypeIsARequiredField %>" ClientVisible="false" /> </div> </div> <div class="purchase-plan-card-number-text"> <asp:Localize ID="Localize12" Text="<%$resources:Language,PurchasePlan_CardNumber%>" runat="server"/><span class="required-indicator-red">*</span> <div class="purchase-plan-card-number-edit"> <div style=" float:left"><dxe:ASPxTextBox runat="server" ID="CardInput" ClientInstanceName="txtCardNumber" CssClass="purchase-plan-card-number-field" /> </div> <div class="purchase-plan-error-image"> <dxe:ASPxImage ID="ImageCardNummber_ConInvalidCharacter" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageCardNummber_ConInvalidCharacter" ToolTip="<%$ Resources:Language,PurchasePlan_ValidCardErrorMessage %>" ClientVisible="false" /> <dxe:ASPxImage ID="ImageCardNummber_Error" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageCardNummber_Error" ToolTip="<%$ Resources:Language,PurchaseCardNumberIsARequiredField %>" ClientVisible="false" /> </div> </div> </div> <div class="purchase-plan-exp-text"> <asp:Localize ID="Localize11" Text="<%$resources:Language,PurchasePlan_ExpirationDate%>" runat="server"/><span class="required-indicator-red">*</span> <div> <div style=" float:left"><dxe:ASPxComboBox ID="cmbExpMonth" ClientInstanceName="cmbExpMonth" CssClass="purchase-plan-input-expdate" ItemStyle-CssClass="combobox-item" ItemStyle-SelectedStyle-CssClass="combo-selected-item" ItemStyle-HoverStyle-CssClass="combo-hover-item" runat="server" DataSourceID="dataExpMonth" TextField="Text" ValueField="Value" /></div> <div class="purchase-plan-forward-slash-divider" style=" float:left">/</div> <div style=" float:left"><dxe:ASPxComboBox ID="cmbExpYear" ClientInstanceName="cmbExpYear" CssClass="purchase-plan-input-expdate" ItemStyle-CssClass="combobox-item" ItemStyle-SelectedStyle-CssClass="combo-selected-item" ItemStyle-HoverStyle-CssClass="combo-hover-item" runat="server" DataSourceID="dataExpYear" /></div> </div> <div class="purchase-plan-error-image"> <dxe:ASPxImage ID="ImageExpDate_Error" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageExpDate_Error" ToolTip="<%$ Resources:Language,PurchasePlan_ExpDateErrorMessage %>" ClientVisible="false" /> <dxe:ASPxImage ID="ImageExpDate_ConError" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageExpDate_ConError" ToolTip="<%$ Resources:Language,PurchaseExpDateIsARequiredField %>" ClientVisible="false" /> </div> </div> </div> <div class="purchase-plan-billing-details" style=" margin-left:50px"> <div class="purchase-plan-billing-text"> <asp:Localize ID="Localize13" Text="<%$resources:Language,PurchasePlan_BillingAddress%>" runat="server"/> </div> <div class="purchase-plan-billing-detail-text" style="margin-top:20px;"> <asp:Localize ID="Localize14" Text="<%$resources:Language,PurchasePlan_Address%>" runat="server"/><span class="required-indicator-red">*</span> <div class="purchase-plan-card-number-edit"> <dxe:ASPxTextBox runat="server" ID="AddressInput" ClientInstanceName="txtAddress" CssClass="purchase-plan-address-field" /> </div> <div class="purchase-plan-billing-error-image" style=" margin-top:0px;"> <dxe:ASPxImage ID="ImageAddress_ConInvalidCharacter" runat="server" SkinID="purchasePlanErrorIcon" ToolTip="<%$ Resources:Language,BillingAddressContainsInvalidCharacters %>" ClientInstanceName="ImageAddress_ConInvalidCharacter" ClientVisible="false" /> <dxe:ASPxImage ID="ImageAddress_ConError" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageAddress_ConError" ToolTip="<%$ Resources:Language,BillingAddressIsARequiredField %>" ClientVisible="false" /> </div> </div> <div style="margin-top:30px;"> <div class="purchase-plan-billing-address"> <asp:Localize ID="Localize15" Text="<%$resources:Language,PurchasePlan_City%>" runat="server"/><span class="required-indicator-red">*</span> <div class="purchase-plan-card-number-edit"> <dxe:ASPxTextBox runat="server" ID="CityInput" ClientInstanceName="txtCity" CssClass="purchase-plan-city-field" /> </div> </div> <div class="purchase-plan-billing-error-image"> <dxe:ASPxImage ID="ImageCity_ConInvalidCharacter" runat="server" SkinID="purchasePlanErrorIcon" ToolTip="<%$ Resources:Language,BillingCityContainsInvalidCharacters %>" ClientInstanceName="ImageCity_ConInvalidCharacter" ClientVisible="false" /> <dxe:ASPxImage ID="ImageCity_ConError" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageCity_ConError" ToolTip="<%$ Resources:Language,BillingCityIsARequiredField %>" ClientVisible="false" /> </div> <div class="purchase-plan-billing-address"> <asp:Localize ID="Localize16" Text="<%$resources:Language,PurchasePlan_State%>" runat="server"/><span class="required-indicator-red">*</span> <div class="purchase-plan-card-number-edit"> <dxe:ASPxComboBox ID="cmbState" ClientInstanceName="cmbStateProvince" CssClass="purchase-plan-state-field" ItemStyle-CssClass="combobox-item" ItemStyle-SelectedStyle-CssClass="combo-selected-item" ItemStyle-HoverStyle-CssClass="combo-hover-item" runat="server" ValueField = "Code" TextField = "Name" OnCallback="cmbState_Callback"> <ClientSideEvents EndCallback="cmbStateProvince_EndCallBack"/> </dxe:ASPxComboBox> </div> </div> <div class="purchase-plan-billing-error-image"> <dxe:ASPxImage ID="ImageStateProvince_ConInvalidCharacter" runat="server" SkinID="purchasePlanErrorIcon" ToolTip="<%$ Resources:Language,StateProvinceContainsInvalidCharacters %>" ClientInstanceName="ImageStateProvince_ConInvalidCharacter" ClientVisible="false" /> <dxe:ASPxImage ID="ImageStateProvince_ConError" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageStateProvince_ConError" ToolTip="<%$ Resources:Language,StateFieldIsRequiredField %>" ClientVisible="false" /> </div> </div> <div style="margin-top:80px;"> <div class="purchase-plan-billing-address" > <asp:Localize ID="Localize17" Text="<%$resources:Language,PurchasePlan_Country%>" runat="server"/><span class="required-indicator-red">*</span> <div class="purchase-plan-card-number-edit"> <dxe:ASPxComboBox ID="cmbCountry" ClientInstanceName="cmbCountry" CssClass="purchase-plan-state-field" ItemStyle-CssClass="combobox-item" ItemStyle-SelectedStyle-CssClass="combo-selected-item" ItemStyle-HoverStyle-CssClass="combo-hover-item" runat="server" DataSourceID="dataCountry" TextField="Name" ValueField="Code"> <ClientSideEvents SelectedIndexChanged="function(s, e) { OnCountryChanged(s); }" /> </dxe:ASPxComboBox> </div> </div> <div class="purchase-plan-billing-error-image"> <dxe:ASPxImage ID="ImageCountry_ConInvalidCharacter" runat="server" SkinID="purchasePlanErrorIcon" ToolTip="<%$ Resources:Language,CountryFieldContainsInvalidCharacters %>" ClientInstanceName="ImageCountry_ConInvalidCharacter" ClientVisible="false" /> <dxe:ASPxImage ID="ImageCountry_ConError" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageCountry_ConError" ToolTip="<%$ Resources:Language,CountryFieldIsRequiredField %>" ClientVisible="false" /> </div> <div class="purchase-plan-billing-address"> <asp:Localize ID="Localize18" Text="<%$resources:Language,PurchasePlan_PostalCode%>" runat="server"/><span class="required-indicator-red">*</span> <div class="purchase-plan-card-number-edit"> <dxe:ASPxTextBox runat="server" ID="PostalCodeInput" ClientInstanceName="txtPostalCode" CssClass="purchase-plan-state-field" /> </div> </div> <div class="purchase-plan-billing-error-image"> <dxe:ASPxImage ID="ImagePostalCode_ConInvalidCharacter" runat="server" SkinID="purchasePlanErrorIcon" ToolTip="<%$ Resources:Language,PostalCodeContainsInvalidCharacters %>" ClientInstanceName="ImagePostalCode_ConInvalidCharacter" ClientVisible="false" /> <dxe:ASPxImage ID="ImagePostalCode_ConError" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImagePostalCode_ConError" ToolTip="<%$ Resources:Language,PostalCodeIsARequiredField %>" ClientVisible="false" /> </div> </div> </div> </div> </div> <div id="ConfirmPurchaseDiv" runat="server" clientidmode="Static" style="visibility: hidden;display:none;"> <div class="purchase-plan-confirm-payment-notice"> <asp:Localize ID="FirstPaymentNotice" runat="server"/> </div> <div class="purchase-plan-reviewterms" style="margin-top:10px;"> <div class="purchase-plan-step-enter-text"> <asp:Localize ID="Localize19" Text="<%$resources:Language,PurchasePlan_ConfirmInstructions%>" runat="server"/> </div> <div> <div class="purchase-plan-confirm-detail-left"> <div class="purchase-plan-confirm-detail" > <asp:Localize ID="Localize20" Text="<%$resources:Language,PurchasePlan_ConfirmPlanDetails%>" runat="server"/> </div> <div style=" margin-top:10px;"> <div class="purchase-plan-confirm-detail-content"><asp:Localize ID="Localize21" Text="<%$resources:Language,PurchasePlan_ConfirmPlanSize%>" runat="server"/></div> <div class="purchase-plan-confirm-detail-content-lable"><asp:Localize ID="txtPlanSize" runat="server"/></div> </div> <div style=" margin-top:30px;"> <div class="purchase-plan-confirm-detail-content"><asp:Localize ID="Localize23" Text="<%$resources:Language,PurchasePlan_ConfirmBaseMonthlyPrice%>" runat="server"/></div> <div class="purchase-plan-confirm-detail-content-lable"><asp:Localize ID="txtBaseMonthlyPrice" runat="server"/></div> </div> <div style=" margin-top:50px;"> <div class="purchase-plan-confirm-detail-content"><asp:Localize ID="Localize25" Text="<%$resources:Language,PurchasePlan_ConfirmExtraGB%>" runat="server"/></div> <div class="purchase-plan-confirm-detail-content-lable"><asp:Localize ID="txtExtraGB" runat="server"/></div> </div> </div> <div class="purchase-plan-confirm-detail-left" style="margin-left:15px;"> <div class="purchase-plan-confirm-detail" > <asp:Localize ID="Localize22" Text="<%$resources:Language,PurchasePlan_ConfirmPaymentDetails%>" runat="server"/> </div> <div style=" margin-top:10px;"> <div class="purchase-plan-confirm-detail-content"><asp:Localize ID="Localize24" Text="<%$resources:Language,PurchasePlan_ConfirmCardNumber%>" runat="server"/></div> <div class="purchase-plan-confirm-detail-content-lable" id="txtConfirmCardNumber"></div> </div> <div style=" margin-top:30px;"> <div class="purchase-plan-confirm-detail-content"><asp:Localize ID="Localize27" Text="<%$resources:Language,PurchasePlan_ConfirmExpDate%>" runat="server"/></div> <div class="purchase-plan-confirm-detail-content-lable" id="txtConfirmExpDate"></div> </div> <div style=" margin-top:50px;"> <div class="purchase-plan-confirm-detail-content"><asp:Localize ID="Localize29" Text="<%$resources:Language,PurchasePlan_ConfirmBillingZip%>" runat="server"/></div> <div class="purchase-plan-confirm-detail-content-lable" id="txtConfirmBillingZip"></div> </div> </div> </div> <div class="purchase-plan-confirm-billing-works"> <asp:Localize ID="Localize26" Text="<%$resources:Language,PurchasePlan_ConfirmHowBillingWorks%>" runat="server"/> </div> <div class="purchase-plan-confirm-billing-works-content"> <asp:Localize ID="Localize28" Text="<%$resources:Language,PurchasePlan_ConfirmHowBillingWorks_Content%>" runat="server"/> </div> <div style="margin-top:20px;"> <div class="purchase-plan-confirm-sent-email"><asp:Localize ID="Localize30" Text="<%$resources:Language,PurchasePlan_ConfirmSentEmail%>" runat="server"/><span class="required-indicator-red">*</span></div> <div class="purchase-plan-card-number-edit"> <dxe:ASPxTextBox runat="server" ID="txtEmailTo" ClientInstanceName="txtEmailTo" CssClass="purchase-plan-email-field" /> </div> <div class="purchase-plan-billing-error-image" style=" margin-top:0px"> <dxe:ASPxImage ID="ImageSentEmail_ConInvalidCharacter" runat="server" SkinID="purchasePlanErrorIcon" ToolTip="<%$ Resources:Language,PurchasePlan_EmailAddressContainsInvalidCharacters %>" ClientInstanceName="ImageSentEmail_ConInvalidCharacter" ClientVisible="false" /> <dxe:ASPxImage ID="ImageSentEmail_ConError" runat="server" SkinID="purchasePlanErrorIcon" ClientInstanceName="ImageSentEmail_ConError" ToolTip="<%$ Resources:Language,PurchasePlan_EmailAddressIsARequiredField %>" ClientVisible="false" /> </div> </div> </div> </div> </dxp:PanelContent> </PanelCollection> </dxcp:ASPxCallbackPanel> <div id="ReviewTermsDivFooter" class="purchase-plan-reviewterms-footer" runat="server" clientidmode="Static"> <div style=" margin-top:10px;"> <div style="float:left"> <intronis:ImageButton runat="server" ID="PrintButton" DefaultText="<%$ Resources:Language,PurchasePlan_Print %>" InstanceName="PurchasePlanPrintButton" IconCssClass="image-button-no-icon" ClickFunction="PurchasePlanPrintButton_Click" ClientVisible="true"/> </div> <div style="float:right"> <span class="purchase-plan-check-agree"><asp:Localize ID="Localize10" Text="<%$resources:Language,PurchasePlan_CheckAgree%>" runat="server"/></span> <span style="float:right;"><asp:CheckBox ID="cbAgree" ClientIDMode="Static" runat="server" /></span> </div> </div> </div> <div class="purchase-plan-next"> <div style="float:right;margin-left:5px;"> <intronis:ImageButton runat="server" ID="Confirm" DefaultText="<%$ Resources:Language,PurchasePlan_Confirm %>" InstanceName="PurchasePlanWizardConfirmButton" IconCssClass="image-button-no-icon" ClientVisible="false" ClickFunction="PurchasePlanConfirmButton_Click" /> </div> <div style="float:right;margin-left:5px;"> <intronis:ImageButton runat="server" ID="NextButton" DefaultText="<%$ Resources:Language,BrandingWizard_Next %>" InstanceName="PurchasePlanWizardNextButton" IconCssClass="image-button-icon-next image-button-icon-next-arrow" ClickFunction="PurchasePlanNextButton_Click"/> </div> <div style="float:right;margin-left:5px;"> <intronis:ImageButton runat="server" ID="PreviousButton" DefaultText="<%$ Resources:Language,BrandingWizard_Previous %>" InstanceName="PurchasePlanWizardPreviousButton" IconCssClass="image-button-icon-back image-button-icon-back-arrow" ClickFunction="PurchasePlanPreviousButton_Click" ClientVisible="false" /> </div> </div> </div> <dxhf:ASPxHiddenField ID="PurchasePlanWizardHiddenField" runat="server" ClientInstanceName="PurchasePlanWizardHiddenField" /> <intronis:PurchasePlanSlideOutLightbox runat="server" ID="PurchasePlanSlideOutLightbox"/> <intronis:PurchasePlanWizardCloseLightbox runat="server" ID="PurchasePlanWizardCloseLightbox" /> <dxhf:ASPxHiddenField ID="messageLanguagePurchasePlanWizard" runat="server" ClientInstanceName="messageLanguagePurchasePlanWizard" /> <asp:ObjectDataSource ID="dataExpMonth" runat="server" TypeName="Domain.Maestro.DAL.GeneralDataSource" SelectMethod="ExpMonthList"></asp:ObjectDataSource> <asp:ObjectDataSource ID="dataExpYear" runat="server" TypeName="Domain.Maestro.DAL.GeneralDataSource" SelectMethod="ExpYearList"></asp:ObjectDataSource> <asp:ObjectDataSource ID="dataCountry" runat="server" TypeName="Domain.Maestro.DAL.GeneralDataSource" SelectMethod="CountryList"></asp:ObjectDataSource> <dxcb:ASPxCallback ID="SavePurchasePlanCallBack" runat="server" ClientInstanceName="SavePurchasePlanCallBack" oncallback="SavePurchasePlanCallBack_Callback"> <ClientSideEvents CallbackComplete="savePurchasePlan_CallbackComplete" /> </dxcb:ASPxCallback>
服务端部分：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using Resources; using Domain.Utilities; using Infrastructure.Maestro.PortalTypes.Billing; using Domain.Maestro.DAL; using Infrastructure.Maestro.PortalTypes; using DynaLoad.Server; using Domain.Data; using DevExpress.Web.ASPxClasses; using Domain.Maestro; using Infrastructure.Maestro.Utilities; using Domain.Constants; using Domain; namespace WebPortalApplication.App_Components.Forms { public partial class PurchasePlanWizardForm : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { PageResource.IncludeScript("/js/ValidateFields.js", this); PageResource.IncludeScript("/js/common.js", this); PageResource.IncludeScript("/js/lightboxes/PurchasePlanWizard.js", this); this.CardInput.MaxLength = (int)ColumnLengths.CreditCard; this.PostalCodeInput.MaxLength = (int)ColumnLengths.Zip; this.CityInput.MaxLength = (int)ColumnLengths.City; this.AddressInput.MaxLength = (int)ColumnLengths.Address; this.cmbExpMonth.DropDownButton.Image.Url = VirtualPathUtility.ToAbsolute("~/App_Themes/" + Page.Theme + "/") + "images/icons/MenuDropdown.png"; this.cmbExpYear.DropDownButton.Image.Url = VirtualPathUtility.ToAbsolute("~/App_Themes/" + Page.Theme + "/") + "images/icons/MenuDropdown.png"; this.cmbState.DropDownButton.Image.Url = VirtualPathUtility.ToAbsolute("~/App_Themes/" + Page.Theme + "/") + "images/icons/MenuDropdown.png"; this.cmbCountry.DropDownButton.Image.Url = VirtualPathUtility.ToAbsolute("~/App_Themes/" + Page.Theme + "/") + "images/icons/MenuDropdown.png"; this.messageLanguagePurchasePlanWizard.Set("PurchasePlanWizardJS_CloseWizard", Language.PurchasePlanWizardJS_CloseWizard); this.messageLanguagePurchasePlanWizard.Set("PurchasePlanWizardJS_CheckAgreeAlert", Language.PurchasePlanWizardJS_CheckAgreeAlert); this.messageLanguagePurchasePlanWizard.Set("PurchasePlanWizardJS_IsRequiredFields", Language.PurchasePlanWizardJS_IsRequiredFields); this.messageLanguagePurchasePlanWizard.Set("PurchasePlan_ReviewTermsConditions", Language.PurchasePlan_ReviewTermsConditions); this.messageLanguagePurchasePlanWizard.Set("PurchasePlan_TitleEnterBillingInformation", Language.PurchasePlan_TitleEnterBillingInformation); this.messageLanguagePurchasePlanWizard.Set("PurchasePlan_TitleReviewAndConfirmPurchase", Language.PurchasePlan_TitleReviewAndConfirmPurchase); this.messageLanguagePurchasePlanWizard.Set("PurchasePlan_EmailAddressIsARequiredField", Language.PurchasePlan_EmailAddressIsARequiredField); this.messageLanguagePurchasePlanWizard.Set("PurchasePlan_EmailAddressContainsInvalidCharacters", Language.PurchasePlan_EmailAddressContainsInvalidCharacters); this.messageLanguagePurchasePlanWizard.Set("PurchasePlanWizardJS_Error", Language.PurchasePlanWizardJS_Error); this.messageLanguagePurchasePlanWizard.Set("PurchasePlanWizardJS_AnErrorOccurred", Language.PurchasePlanWizardJS_AnErrorOccurred); } protected void InitPlanInfoCallBack_Callback(object source, CallbackEventArgsBase e) { var commandArgs = Json.Import<CustomCallbackCommandArgs>(e.Parameter); int planId = 0; if (commandArgs == null) return; if (commandArgs.ContainsKey("planId")) planId = commandArgs.PlanId; Plan plan = PlanDataSource.GetPlanInfo(planId); this.PlanSummary.Text = string.Format(Language.PurchasePlan_PlanSummary, FileSize.ToText(plan.TotalSize, false, 0)); string costExtraBlock = string.Format("{0:C2}", plan.CostExtraBlock); string totalSize = FileSize.ToText(plan.TotalSize, false); string blockSize = FileSize.ToText(plan.BlockSize, false); this.OnlineBackupPlan.Text = string.Format(Language.PurchasePlan_OnlineBackupPlanContent, totalSize, costExtraBlock, blockSize); switch (plan.Frequency) { case (int)Infrastructure.Maestro.PortalTypes.PaymentSchedule.Recurring_Monthly: this.PaymentSchedule.Text = Language.PaymentSchedule_Recurring_Monthly; break; case (int)Infrastructure.Maestro.PortalTypes.PaymentSchedule.Recurring_Quarterly: this.PaymentSchedule.Text = Language.PaymentSchedule_Recurring_Quarterly; break; case (int)Infrastructure.Maestro.PortalTypes.PaymentSchedule.Recurring_bi_Annually: this.PaymentSchedule.Text = Language.PaymentSchedule_Recurring_bi_Annually; break; case (int)Infrastructure.Maestro.PortalTypes.PaymentSchedule.Recurring_Yearly: this.PaymentSchedule.Text = Language.PaymentSchedule_Recurring_Yearly; break; default: this.PaymentSchedule.Text = string.Format(Language.PaymentSchedule_Default_Recurring_Months, plan.Frequency); break; }; string formattedDate = DateTime.Today.AddDays(1).ToString(CultureInfoHelper.DateFormat); this.EffectiveDate.Text = formattedDate; Partner info = PartnersDataSource.Info(); //only seve the original values which are not changed this.OriginalBillingAddressHiddenField.Set("BillingAddress_Company", info.BillingAddress.Company); this.OriginalBillingAddressHiddenField.Set("BillingAddress_Fax", info.BillingAddress.Fax); this.OriginalBillingAddressHiddenField.Set("BillingAddress_Extension", info.BillingAddress.Extension); this.OriginalBillingAddressHiddenField.Set("BillingAddress_Name", info.BillingAddress.Name); this.OriginalBillingAddressHiddenField.Set("BillingAddress_Phone", info.BillingAddress.Phone); this.OriginalBillingAddressHiddenField.Set("BillingAddress_Website", info.BillingAddress.Website); this.OriginalBillingAddressHiddenField.Set("BillingAddress_Email", info.BillingAddress.Email); AddressInput.Text = (info.BillingAddress.Address1 + " " + info.BillingAddress.Address2).Trim(); CityInput.Text = info.BillingAddress.City; PostalCodeInput.Text = info.BillingAddress.Zip; string[] arrSupportedUSCountry = { "US", "USA", "United States" }; string[] arrSupportedCACountry = { "CA", "CAN", "Canada" }; string countryCode = "USA"; if (arrSupportedUSCountry.Contains(info.BillingAddress.Country)) { cmbCountry.SelectedIndex = 0; } else if (arrSupportedCACountry.Contains(info.BillingAddress.Country)) { cmbCountry.SelectedIndex = 1; countryCode = "CAN"; } var stateList = StateProvinceNameList(countryCode); cmbState.DataSource = stateList; cmbState.DataBind(); int index = -1; index = stateList.FindIndex(state => state.Code.ToLower() == info.BillingAddress.State.ToLower()); if (index < 0) { index = stateList.FindIndex(state => state.Name.ToLower() == info.BillingAddress.State.ToLower()); } cmbState.SelectedIndex = index; double currentEstimatedCost = plan.Price; string currentEstimatedCostFormated = string.Format("{0:C2}", currentEstimatedCost); FirstPaymentNotice.Text = string.Format(Language.PurchasePlan_FirstPaymentNotice, currentEstimatedCostFormated, formattedDate); this.txtPlanSize.Text = FileSize.ToText(plan.TotalSize, false, 0); this.txtBaseMonthlyPrice.Text = string.Format("{0:C2}", plan.Price); this.txtExtraGB.Text = string.Format("{0:C2}", plan.CostExtraBlock); this.txtEmailTo.Text = info.Email; } private List<StateProvince> StateProvinceNameList(string countryCode) { List<StateProvince> ls = new List<StateProvince>(); List<StateProvince> stateList = GeneralDataSource.StateProvinceList(); var result = stateList.Where(s => (s.CountryCode.ToLower() == countryCode.ToLower())); ls = result.ToList(); return ls; } protected void cmbState_Callback(object sender, CallbackEventArgsBase e) { string countryCode = "USA"; if (cmbCountry.SelectedIndex == 0) { countryCode = "USA"; } else if (cmbCountry.SelectedIndex == 1) { countryCode = "CAN"; } cmbState.DataSource = StateProvinceNameList(countryCode); cmbState.DataBind(); } protected void SavePurchasePlanCallBack_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e) { var commandArgs = Json.Import<CustomCallbackCommandArgs>(e.Parameter); int planId = 0; if (commandArgs == null) return; if (commandArgs.ContainsKey("planId")) planId = commandArgs.PlanId; Address currentBillingAdress = new Address(); currentBillingAdress.Company = OriginalBillingAddressHiddenField.Get("BillingAddress_Company").ToString(); currentBillingAdress.Fax = OriginalBillingAddressHiddenField.Get("BillingAddress_Fax").ToString(); currentBillingAdress.Extension = OriginalBillingAddressHiddenField.Get("BillingAddress_Extension").ToString(); currentBillingAdress.Name = OriginalBillingAddressHiddenField.Get("BillingAddress_Name").ToString(); currentBillingAdress.Phone = OriginalBillingAddressHiddenField.Get("BillingAddress_Phone").ToString(); currentBillingAdress.Website = OriginalBillingAddressHiddenField.Get("BillingAddress_Website").ToString(); currentBillingAdress.Email = OriginalBillingAddressHiddenField.Get("BillingAddress_Email").ToString(); currentBillingAdress.Address1 = AddressInput.Text; currentBillingAdress.Address2 = string.Empty; currentBillingAdress.City = CityInput.Text; currentBillingAdress.Country = cmbCountry.Value.ToString(); currentBillingAdress.State = cmbState.ClientValue.ToString(); currentBillingAdress.Zip = PostalCodeInput.Text; string cardNumber = CardInput.Text; int expMonth = Convert.ToInt32(cmbExpMonth.Value); int expYear = Convert.ToInt32(cmbExpYear.Value); string confirmEmailTo = txtEmailTo.Text; try { bool isSave = PartnersDataSource.PartnerTrialConvertToZeroTouch(PageHelper.CustomerUsername, planId, cardNumber, expYear, expMonth, currentBillingAdress, confirmEmailTo); if (isSave) { Session["PartnerCategory"] = (int)PartnerCategory.PARTNER_CATEGORY_FULL; Session["TrialRemaining"] = null; Session["EndDate"] = null; Session["DisplayResources"] = null; Session["DisplayBilling"] = null; Session["DisplayManageIntegrations"] = null; Session["DisplayAccountSnapshot"] = null; Session["DisplayDeployableInstaller"] = null; SavePurchasePlanCallBack.JSProperties["cpFlag"] = true; SavePurchasePlanCallBack.JSProperties["cpUsername"] = PageHelper.CustomerUsername; } else { SavePurchasePlanCallBack.JSProperties["cpFlag"] = false; } } catch (Exception) { SavePurchasePlanCallBack.JSProperties["cpError"] = true; } } } internal class CustomCallbackCommandArgs : JsonDictionary { public int PlanId { get { return ContainsKey("planId") ? Convert.ToInt32(base["planId"]) : -1; } } } }