maskededit.aspx

AJAX 应用 实现页面的无刷新

<%@ Page
    Language="C#"
    MasterPageFile="~/DefaultMaster.master"
    AutoEventWireup="true"
    Inherits="CommonPage"
    Culture="auto"
    UICulture="auto"
    Title="MaskedEdit Sample"
    Theme="SampleSiteTheme" %>
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>
<%@ Import Namespace="System.Threading" %>
<asp:Content ContentPlaceHolderID="SampleContent" runat="Server">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1"  EnableScriptGlobalization="true" EnableScriptLocalization="true" />
    <div class="demoarea">
        <div class="demoheading">MaskedEdit Demonstration</div>

        <strong>Enter a Number (format: <em>9,999,999.99</em>):</strong>
        <br />
        <asp:TextBox ID="TextBox2" runat="server" Width="130px" Height="16px" ValidationGroup="MKE" />
        <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender2" runat="server"
            TargetControlID="TextBox2"
            Mask="9,999,999.99"
            MessageValidatorTip="true"
            OnFocusCssClass="MaskedEditFocus"
            OnInvalidCssClass="MaskedEditError"
            MaskType="Number"
            InputDirection="RightToLeft"
            AcceptNegative="Left"
            DisplayMoney="Left"
            ErrorTooltipEnabled="True" />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator2" runat="server"
            ControlExtender="MaskedEditExtender2"
            ControlToValidate="TextBox2"
            IsValidEmpty="False"
            MaximumValue="12000"
            EmptyValueMessage="Number is required"
            InvalidValueMessage="Number is invalid"
            MaximumValueMessage="Number &gt; 12000"
            MinimumValueMessage="Number &lt; -100"
            MinimumValue="-100"
            Display="Dynamic"
            TooltipMessage="Input a number from -100 to 12000"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            MaximumValueBlurredMessage="*"
            MinimumValueBlurredText="*"
            ValidationGroup="MKE" />
        <br />
        <em><span style="font-size: 8pt">Tip: Type '.' to switch</span></em>
        <br />
        <br />

        <strong>Enter Time (format: <em>99:99:99</em>):</strong>
        <br />
        <asp:TextBox ID="TextBox3" runat="server" Width="130px" Height="16px" ValidationGroup="MKE" />
        <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender3" runat="server"
            TargetControlID="TextBox3" 
            Mask="99:99:99"
            MessageValidatorTip="true"
            OnFocusCssClass="MaskedEditFocus"
            OnInvalidCssClass="MaskedEditError"
            MaskType="Time"
            AcceptAMPM="True"
            ErrorTooltipEnabled="True" />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator3" runat="server"
            ControlExtender="MaskedEditExtender3"
            ControlToValidate="TextBox3"
            IsValidEmpty="False"
            EmptyValueMessage="Time is required"
            InvalidValueMessage="Time is invalid"
            Display="Dynamic"
            TooltipMessage="Input a time"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE"/>
        <br />
        <em><span style="font-size: 8pt">Tip: Type 'A' or 'P' to switch AM/PM</span></em>
        <br />
        <br />

        <strong>Enter Date (format: <em>99/99/9999</em>):</strong>
        <br />
        <asp:TextBox ID="TextBox5" runat="server" Width="130px" MaxLength="1" style="text-align:justify" ValidationGroup="MKE" />
        <asp:ImageButton ID="ImgBntCalc" runat="server" ImageUrl="~/images/Calendar_scheduleHS.png" CausesValidation="False" />
        <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender5" runat="server"
            TargetControlID="TextBox5"
            Mask="99/99/9999"
            MessageValidatorTip="true"
            OnFocusCssClass="MaskedEditFocus"
            OnInvalidCssClass="MaskedEditError"
            MaskType="Date"
            DisplayMoney="Left"
            AcceptNegative="Left"
            ErrorTooltipEnabled="True" />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator5" runat="server"
            ControlExtender="MaskedEditExtender5"
            ControlToValidate="TextBox5"
            EmptyValueMessage="Date is required"
            InvalidValueMessage="Date is invalid"
            Display="Dynamic"
            TooltipMessage="Input a date"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE" />
         <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox5" PopupButtonID="ImgBntCalc" />
        <br />
        <em><span style="font-size: 8pt">Tip: The date format is mm/dd/yyyy for this example and a Calendar is also available for date selection</span></em>
        <br />
         <br />

        <strong>Enter Date and Time (format: <em>99/99/9999 99:99:99</em>)</strong>
        <br />
        <asp:TextBox ID="TextBox6" runat="server" Width="180px" ValidationGroup="MKE" />
        <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender6" runat="server"
            TargetControlID="TextBox6" 
            Mask="99/99/9999 99:99:99"
            MessageValidatorTip="true"
            OnFocusCssClass="MaskedEditFocus"
            OnInvalidCssClass="MaskedEditError"
            MaskType="DateTime"
            AcceptAMPM="True"
            ErrorTooltipEnabled="True" />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator6" runat="server"
            ControlExtender="MaskedEditExtender6"
            ControlToValidate="TextBox6"
            IsValidEmpty="False"
            EmptyValueMessage="Date and time are required"
            InvalidValueMessage="Date and/or time is invalid"
            Display="Dynamic"
            TooltipMessage="Input a date and time"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE" />
        <br />
    </div>
    <div class="demobottom" style="font-size: 9pt"></div>

    <asp:Panel ID="description_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" AlternateText="collapse"  />
            MaskedEdit Description</div>
    </asp:Panel>
    <asp:Panel ID="description_ContentPanel" runat="server" Style="overflow: hidden;">
        <p>
            MaskedEdit is an ASP.NET AJAX extender that attaches to a TextBox control to restrict the kind of text that can be entered.
            MaskedEdit applies a "mask" to the input that permits only certain types of characters/text to be entered.
            The supported data formats are: Number, Date, Time, and DateTime.
            MaskedEdit uses the culture settings specified in the CultureName property. If none is specified
            the culture setting will be the same as the page: <strong><%=  Thread.CurrentThread.CurrentCulture.NativeName %></strong>.
        </p>
    </asp:Panel>

    <asp:Panel ID="properties_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand"  />
            MaskedEdit Properties
        </div>
    </asp:Panel>
    <asp:Panel ID="properties_ContentPanel" runat="server" Style="overflow: hidden;" Height="0px">
        <p>
            The number control above is initialized with this code. The <em>italic</em> properties are optional.
        </p>
<pre>&lt;ajaxToolkit:MaskedEditExtender
    TargetControlID="TextBox2" 
    Mask="9,999,999.99"
    <em>MessageValidatorTip</em>="true" 
    <em>OnFocusCssClass</em>="MaskedEditFocus" 
    <em>OnInvalidCssClass</em>="MaskedEditError"
    <em>MaskType</em>="Number" 
    <em>InputDirection</em>="RightToLeft" 
    <em>AcceptNegative</em>="Left" 
    <em>DisplayMoney</em>="Left"
    <em>ErrorTooltipEnabled</em>="True"/&gt;</pre>
        <ul>