asp:Wizard导航的应用CheckOut.aspx

刚开始接触asp:Wizard的时候摸不着头脑，不知道这个是什么东东，因为之前自己没有用过这个控件，算自己长见识了。故今天把它记录下来。

<asp:Wizard ID="wzdCheckOut" runat="server" DisplaySideBar="False" OnActiveStepChanged="wzdCheckOut_ActiveStepChanged"
                    OnFinishButtonClick="wzdCheckOut_FinishButtonClick" SkinID="wzdCheckOut">
<WizardSteps>
                    
<asp:WizardStep ID="wzdStep1" runat="server" Title="Billing Address">
<asp:Panel ID="panFicusStep1" runat="server" DefaultButton="StartNextButton">
<PetShopControl:AddressForm ID="billingForm" runat="server"/><!--billForm-->
<table border="0" cellpadding="0" cellspacing="0" class="checkoutButtonBg" width="100%">
<tr>
<td></td>
<td align="right">
<asp:LinkButton ID="StartNextButton" runat="server" 
                                            CommandName="MoveNext" CssClass="continue" OnClick="StartNextButton_Click">Next
</asp:LinkButton></td>
</tr>
</table>
</asp:Panel>    
</asp:WizardStep>
<asp:WizardStep ID="wzdStep2" runat="server" Title="Shipping Address">
<asp:Panel ID="panFicusStep2" runat="server" DefaultButton="StepNextButton">
<div class="checkOutLabel">
<asp:CheckBox ID="chkShipToBilling" runat="server" AutoPostBack="True" OnCheckedChanged="chkShipToBilling_CheckedChanged"
                                    Text="Ship to billing address"/></div>
<PetShopControl:AddressForm ID="shippingForm" runat="server"/>
<table border="0" cellpadding="0" cellspacing="0" class="checkoutButtonBg" width="100%">
<tr>
<td align="left"><asp:LinkButton ID="StepPreviousButton" runat="server" CausesValidation="False" CommandName="MovePrevious"
                                CssClass="back">Previous</asp:LinkButton></td><td align="right"><asp:LinkButton ID="StepNextButton" runat="server" CommandName="MoveNext" CssClass="continue">Next</asp:LinkButton></td>
</tr>
</table>
</asp:Panel>
</asp:WizardStep>
<asp:WizardStep ID="wzdStep3" runat="server" Title="Payment Information">
<asp:Panel ID="panFicusStep3" runat="server" DefaultButton="StepNextButton2">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="label">Credit Card Number<br />
<asp:TextBox ID="txtCCNumber" runat="server" CssClass="checkoutTextbox" Width="330px">4444123412341234</asp:TextBox><br />
<asp:RequiredFieldValidator ID="valCCNumber" runat="server" ControlToValidate="txtCCNumber"
                                            Display="Dynamic" ErrorMessage="Please enter card number."></asp:RequiredFieldValidator><asp:RegularExpressionValidator
ID="valCCNumber1" runat="server" ControlToValidate="txtCCNumber"
                                                Display="Dynamic" ErrorMessage="Card number invalid." ValidationExpression="^([0-9]{15,16})$"></asp:RegularExpressionValidator>&nbsp;</td>
</tr>
<tr>
<td class="label">Expiration Date (MM/YYYY)<br />
<asp:TextBox ID="txtExpDate" runat="server" CssClass="checkoutTextbox" Width="155px">12/2009</asp:TextBox><br />
<asp:RequiredFieldValidator ID="valExpDate" runat="server" ControlToValidate="txtExpDate"
                                            Display="Dynamic" ErrorMessage="Please enter expiration date."></asp:RequiredFieldValidator><asp:RegularExpressionValidator
ID="valExpDate1" runat="server" ControlToValidate="txtExpDate"
                        ErrorMessage="Invalid date format." ValidationExpression="^((0[1-9])|(1[0-2]))\/(\d{4})$" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:CustomValidator ID="valExpDate2" runat="server" ClientValidationFunction="ClientValidate"
                            ControlToValidate="txtExpDate" Display="Dynamic" ErrorMessage="Expiration date invalid."
                            OnServerValidate="ServerValidate"></asp:CustomValidator>&nbsp;</td>
</tr>
<tr>
<td class="label">Credit card Type<br />
<asp:DropDownList ID="listCCType" runat="server" CssClass="checkoutDropdown">
<asp:ListItem>Visa</asp:ListItem>
<asp:ListItem>Master Card</asp:ListItem>
<asp:ListItem>American Express</asp:ListItem>
<asp:ListItem>Discovery</asp:ListItem>
</asp:DropDownList></td><td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<table border="0" cellpadding="0" cellspacing="0" class="checkoutButtonBg" width="100%">
<tr>
<td align="left"><asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="MovePrevious"
                                CssClass="back">Previous</asp:LinkButton></td><td align="right"><asp:LinkButton ID="StepNextButton2" runat="server" CommandName="MoveNext"
                                        CssClass="continue">Next</asp:LinkButton></td>
</tr>
</table>
</asp:Panel>
</asp:WizardStep>
<asp:WizardStep ID="wzdStep4" runat="server" StepType="Finish" Title="Confirmation">
<asp:Panel ID="panFicusStep4" runat="server" DefaultButton="FinishButton">
<div class="checkOutLabel">
                                Your order will not be processed until you select "Submit Order" below.<br /><br />
<strong>Billing address:<br />
</strong>
<PetShopControl:AddressConfirm ID="billingConfirm" runat="server">
</PetShopControl:AddressConfirm><br />
<strong>Shipping address:<br />
</strong>
<PetShopControl:AddressConfirm ID="shippingConfirm" runat="server">
</PetShopControl:AddressConfirm>
</div>
<div class="checkOutLabel">
                                A total of <span class="labelBold">
<asp:Literal ID="ltlTotal" runat="server"></asp:Literal></span> will be charged
                                to your credit card, ending with <span class="labelBold">
<asp:Literal ID="ltlCreditCard" runat="server"></asp:Literal></span>.
</div>
<table border="0" cellpadding="0" cellspacing="0" class="checkoutButtonBg" width="100%">
<tr>
<td align="left"><asp:LinkButton ID="FinishPreviousButton" runat="server" CausesValidation="False"
                                CommandName="MovePrevious" CssClass="back">Previous</asp:LinkButton></td><td align="right"><asp:LinkButton ID="FinishButton" runat="server" CommandName="MoveComplete" CssClass="submit">Submit Order</asp:LinkButton></td>
</tr>
</table>
</asp:Panel>
</asp:WizardStep>
<asp:WizardStep ID="wzdStep5" runat="server" AllowReturn="False" StepType="Complete"
                            Title="Receipt">
<div class="checkOutLabel">
                                Thank you for your order!<br /><br />
<PetShopControl:CartList ID="CartListOrdered" runat="server"/>
<br />
                               
<p>
                                    A total of <strong>
<asp:Literal ID="ltlTotalComplete" runat="server"></asp:Literal></strong> is
                                    being charged to your credit card, ending with <strong>
<asp:Literal ID="ltlCreditCardComplete" runat="server"></asp:Literal></strong>.</p>
<p>
                                    If you have any questions regarding this order, please contact our customer service
                                    at anytime.</p>
<p>
                                    The .NET Pet Shop Team</p>
</div>                           
</asp:WizardStep>
</WizardSteps>
<HeaderStyle HorizontalAlign="Left"/>
<HeaderTemplate>
<%= wzdCheckOut.ActiveStep.Title %>
</HeaderTemplate>
<StartNavigationTemplate>
                        
</StartNavigationTemplate>
<StepNavigationTemplate>
                       
</StepNavigationTemplate>
<FinishNavigationTemplate>
                        
</FinishNavigationTemplate>
</asp:Wizard>

这个控件定义了要交易的五个步骤，具体我就用图片来表示吧：

步骤一：

步骤二：

步骤三：

步骤四：

步骤五出错了：

服务器 'ZGC-20101011UKH' 上的 MSDTC 不可用。

后来在找到错误原因，并进行了配置。备注：MSDTC是协调跨多个数据库、消息队列个文件的资源管理器服务。

那么第五步不言而喻，是对订单的汇总啦：

原来这个步骤流程倒是挺好用的，姑且记下它。

/******************************************************************************************************/

步骤三用到了一个CustomValidator控件，算了还是把代码贴出来，这样好说明：

<asp:CustomValidator ID="valExpDate2" runat="server" ClientValidationFunction="ClientValidate"
                            ControlToValidate="txtExpDate" Display="Dynamic" ErrorMessage="Expiration date invalid."
                            OnServerValidate="ServerValidate">
                            </asp:CustomValidator>

<asp:TextBox ID="txtExpDate" runat="server" CssClass="checkoutTextbox" Width="155px">12/2009</asp:TextBox><br />

原来在CustomValidator验证控件也可以调用函数，那么来看下这个javascript函数吧：

<script type="text/javascript" language="javascript">
        function ClientValidate(source, arguments) {
            var dtNow =new Date();//声明一个以当前时间为值的日期对象
            var tmp =new String(arguments.Value); //获得TextBox控件的值把           
            var dtCard =new Date();//声明一个以当前时间为值的日期对象
            dtCard.setFullYear(tmp.split("/")[1]);//获得年份
            dtCard.setMonth(tmp.split("/")[0]-1);//获得月份
            dtCard.setDate(30);//天数设定默认30
            if (dtNow < dtCard)//如果写下去的时间大于当前时间 一般会大把 因为她的天数是30了
                arguments.IsValid =true;
            else
                arguments.IsValid =false;
        }
    </script>