zoukankan      html  css  js  c++  java
  • NumericUpDown

    NumericUpDown控件主要功能是为一个TextBox控件添加上下按钮,当单击按钮时实现数字的加减,同时也可以提供静态数据,实现这些数据的上下选择。

    属性列表:
         TargetControlID:该控件的目标作用控件。
          Width:该控件加上目标TextBox控件的宽度,要是不设定将看不到TextBox控件。
          RefValues:该控件中使用的一个字符串列,用于在TextBox中递增递减。
          ServiceUpPath:调用增加值的web方法时的路径。
          ServiceDownPath:调用减少值的web方法时的路径。
          ServiceUpMethod:调用增加值的web方法。
          ServiceDownMethod:调用减少值的web方法。
          TargetButtonUpID:自定义的增加值的控件按钮。
          TargetButtonDownID:自定义的减少值的控件按钮。

    实例解析一、简单实现三种样式的增减方式(为防止回调应加入UpdatePanel)

        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>   
        </div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <table style=" 734px; height: 4px">
                        <tr>
                            <td style=" 100px">
                                默认无值的TEXTBOX</td>
                            <td style=" 87px">
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                <cc1:numericupdownextender id="NumericUpDownExtender1" runat="server" targetcontrolid="TextBox1"
                                    width="150"></cc1:numericupdownextender>
                            </td>
                            <td style=" 100px">
                            </td>
                        </tr>
                        <tr>
                            <td style=" 100px; height: 39px">
                                默认值为星期的TEXTBOX:</td>
                            <td style=" 87px; height: 39px">
                                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                                <cc1:numericupdownextender id="NumericUpDownExtender2" runat="server" refvalues="星期一;星期二;星期三;星期四;星期五;星期六;星期日"
                                    step="2" targetcontrolid="TextBox2" width="150"></cc1:numericupdownextender>
                            </td>
                            <td style=" 100px; height: 39px">
                            </td>
                        </tr>
                        <tr>
                            <td style=" 100px">
                                自定义按钮的TEXTBOX:</td>
                            <td style=" 87px">
                                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="up.gif" />
                                <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="down.gif" />
                                <cc1:numericupdownextender id="NumericUpDownExtender4" runat="server" targetbuttondownid="ImageButton1"
                                    targetbuttonupid="ImageButton2" targetcontrolid="TextBox4"></cc1:numericupdownextender>
                            </td>
                            <td style=" 100px">
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>

    实例解析二、简单实现的三种方式
    <!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>NumericUpDown Demo</title>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="sm" runat="server">
            </asp:ScriptManager>
            输入数字并按上下箭头按钮:<br />
            <asp:TextBox ID="tbNumter" Text="10" runat="server"></asp:TextBox><br />
            按上下箭头按钮在日期之间切换:<br />
            <asp:TextBox ID="tbDay" Text="星期三" runat="server"></asp:TextBox><br />
            最小值,最大值,单步步长:<br />
            <asp:TextBox ID="tbLimited" Text="40" runat="server"></asp:TextBox><br />
            <ajaxToolkit:NumericUpDownExtender ID="nudeNumber" TargetControlID="tbNumter" Width="100"
                runat="server" />
            <ajaxToolkit:NumericUpDownExtender ID="nudeDay" TargetControlID="tbDay" Width="100"
                RefValues="星期一;星期二;星期三;星期四;星期五;星期六;星期日" runat="server" />
            <ajaxToolkit:NumericUpDownExtender ID="nudeLimited" TargetControlID="tbLimited" Width="100"
                ServiceDownPath="NumericUpDownService.asmx" ServiceDownMethod="GetPreviousValue"
                ServiceUpPath="NumericUpDownService.asmx" ServiceUpMethod="GetNextValue" runat="server" />
        </form>
    </body>

    2.WEB服务NumericUpDownService.asmx
    <%@ WebService Language="C#" Class="NumericUpDownService" %>

    using System;
    using System.Web;
    using System.Web.Services;
    using System.Web.Services.Protocols;

    [WebService(Namespace = "http://www.dflying.net/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.Web.Script.Services.ScriptService()]
    public class NumericUpDownService  : System.Web.Services.WebService {

        private const int MAXVALUE = 100;
        private const int MINVALUE = 0;
        private const int DELTA = 20;
       
        [WebMethod]
        public int GetNextValue(int current, string tag)
        {
            if (current + NumericUpDownService.DELTA < NumericUpDownService.MAXVALUE)
                return current + NumericUpDownService.DELTA;
            else
                return NumericUpDownService.MAXVALUE;
        }
       
        [WebMethod]
        public int GetPreviousValue(int current, string tag)
        {
            if (current - NumericUpDownService.DELTA > NumericUpDownService.MINVALUE)
                return current - NumericUpDownService.DELTA;
            else
                return NumericUpDownService.MINVALUE;
        }
       
    }


     

  • 相关阅读:
    HashTable和HashMap
    TreeSet的剖析
    TreeMap--左旋右旋
    TreeMap的实现--红黑树
    AarryList和LinkedList比较
    由浅入深解析HashMap系列二---扩容
    由浅入深解析HashMap系列一---HashMap简单实现 增、删、查。
    由浅入深解析HashMap
    重入锁----ReentrantLock
    系统多语言实现
  • 原文地址:https://www.cnblogs.com/astar/p/967984.html
Copyright © 2011-2022 走看看