NumericUpDown:用上下箭头调整TextBox中的值

最新推荐文章于 2019-07-19 10:26:00 发布

Kalen_Chen

最新推荐文章于 2019-07-19 10:26:00 发布

阅读量7.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX ASP.NET系列文章标签： textbox webservice server asp stylesheet random

本文链接：https://blog.youkuaiyun.com/Kalen_Chen/article/details/1656318

AJAX ASP.NET系列专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用NumericUpDown扩展器控件将TextBox控件模拟成NumericUpDown控件，并通过示例代码展示了如何实现数值增减及自定义上下箭头等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NumericUpDown扩展器控件可以将某个TextBox模拟成NumericUpDown控件，即在该TextBox的右边添加一对上下箭头按钮，点击其中的某个按钮可以相应地增加或减少TextBox中的值。
示例运行效果：

图(1)

图(2)

图(3)

NumericUpDown.asmx代码示例：

using System;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

/// <summary>

/// NumericUpDown 的摘要说明

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class NumericUpDown : System.Web.Services.WebService {

[WebMethod]

public int NextValue(int current, string tag) {

return new Random().Next(Math.Min(1000, Math.Max(0, current)), 1001);

}

[WebMethod]

public int PrevValue(int current, string tag) {

return new Random().Next(0, Math.Min(1000, Math.Max(0, current)));

}

NumericUpDownDemo.aspx代码示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NumericUpDownDemo.aspx.cs" Inherits="Chapter09_NumericUpDownDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>NumericUpDown Demo</title>

</head>

<body>

<asp:ScriptManager ID="sm" runat="server" />

<div class="demoheading">用上下箭头调整TextBox中的值</div>

<asp:UpdatePanel ID="up" runat="server">

<table>

<tr>

<td>Enter a numeric value and use the up and down

buttons to increment/decrement</td>

</tr>

<tr>

<td>Choose your favorite month</td>

</tr>

<tr>

<td>Let the web service pick a random number between 0 and 1000

that is higher/lower than the displayed value</td>

</tr>

<tr>

<td>Use the arrow images to increment/decrement the value</td>

<td>

<asp:TextBox ID="tbImage" runat="server" Text="0" Width="60" style="text-align:center;" />

<asp:ImageButton ID="ibDown" runat="server"

ImageUrl="images/down.gif" AlternateText="Down" Width="15" Height="15" />

<asp:ImageButton ID="ibUp" runat="server"

ImageUrl="images/Up.gif" AlternateText="Up" Width="15" Height="15" />

</td>

</tr>

</table>

<br />

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

<asp:Label ID="lblResult" runat="server" Text="[No response provided yet]" />

<ajaxToolkit:NumericUpDownExtender ID="nue1" runat="server"

TargetControlID="tbNumber"

Width="120"

RefValues=""

ServiceDownMethod=""

ServiceUpMethod=""

TargetButtonDownID=""

TargetButtonUpID="" />

<ajaxToolkit:NumericUpDownExtender ID="nue2" runat="server"

TargetControlID="tbMonth"

Width="120"

RefValues="January;February;March;April;May;Jue;July;August;September;October;November;December"

ServiceDownMethod=""

ServiceUpMethod=""

TargetButtonDownID=""

TargetButtonUpID="" />

<ajaxToolkit:NumericUpDownExtender ID="nue3" runat="server"

TargetControlID="tbRandomNumber"

Tag=""

Width="120"

ServiceUpPath="numericupdown.asmx"

ServiceDownPath="numericupdown.asmx"

ServiceUpMethod="NextValue"

ServiceDownMethod="PrevValue"

RefValues=""

TargetButtonDownID=""

TargetButtonUpID="" />

<ajaxToolkit:NumericUpDownExtender ID="nue4" runat="server"

TargetControlID="tbImage"

Width="80"

TargetButtonDownID="ibDown"

TargetButtonUpID="ibUp"

RefValues=""

ServiceDownMethod=""

ServiceUpMethod="" />

<!--

TargetControlID：该扩展器目标TextBox控件的ID，即将要被“升级”模拟为NumericUpDown的TextBox的ID

Width：扩展后的目标TextBox控件加上默认的上下箭头的总宽度。即模拟出的NumericUpDown控件的宽度，单位为像素(px)

RefValues：由分号(;)作为分隔符的一个列表，将被NumericUpDown控件枚举并依次显示到其中

TargetButtonDownID：自定义的向上(即增加)按钮的ID

TargetButtonUpID：自定义的向下(即减少)按钮的ID

ServiceDownPath：用来取得该NumericUpDown的下一个值的Web Service的URL

ServiceDownMethod：ServiceDownPath所指定的Web Service中某个Web Method名称，或页面中某个Page Method的名称，

用来取得NumericUpDown的下一个值

ServiceUpPath：用来取得该NumericUpDown的上一个值的Web Service的URL

ServiceUpMethod：ServiceUpPath所指定的Web Service中某个Web Method名称，或页面中某个Page Method的名称，

用来取得NumericUpDown的上一个值

Tag：传递给ServiceDownMethod或ServiceUpMethod所指定的Web Method的参数，可用于传递给服务器当前的上下文信息

-->

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

NumericUpDownDemo.aspx.cs代码示例：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class Chapter09_NumericUpDownDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

lblResult.Text = string.Format("Value: <b>{0}</b><br />Month: <b>{1}</b><br />Random Value: <b>{2}</b><br />Value: <b>{3}</b>",

tbNumber.Text, tbMonth.Text, tbRandomNumber.Text, tbImage.Text);

}