Question

有没有一种方法可以在不使用JavaScript的情况下在ASP.NET中使用数字更新？

如果没有，还有替代方案吗？

Answer 1

我试图做同样的事情，事实证明asp文本框有一个选项。对我有用的是：

<asp:TextBox TextMode="Number" runat="server" min="0" max="20" step="1"/>

这给了我一个文本框，当鼠标悬停在它上面或被给定焦点时，显示上下控件，并且只允许从最小到最大的数字。它的工作原理与

相同

<input type="number" min="0" max="20" step="1" />

Answer 2

请查看Ajax Control Toolkit

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/NumericUpDown/NumericUpDown.aspx

<ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server"
    TargetControlID="TextBox1" 
    Width="100"
    RefValues="January;February;March;April"
    TargetButtonDownID="Button1"
    TargetButtonUpID="Button2"
    ServiceDownPath="WebService1.asmx"
    ServiceDownMethod="PrevValue"
    ServiceUpPath="WebService1.asmx"
    ServiceUpMethod="NextValue"
    Tag="1" />

另请考虑使用PM> Install-Package AjaxControlToolkit

在NuGet添加引用

Answer 3

我认为以下HTML可以回答您的问题：

<head runat="server">
    <title>Numeric Up Down</title>
    <script type="text/jscript">
        function Load() {
           /*numericUpDown1.value = or*/ document.getElementById("numericUpDown1").value = parseFloat(document.getElementById("<%=NumericUpDown1.ClientID%>").value);
        }
        function Change() {
           document.getElementById("<%=NumericUpDown1.ClientID%>").value = document.getElementById("numericUpDown1").value; //or numericUpDown1.value
        }
    </script>
</head>
<body onload="Load()">
    <form id="form1" runat="server">
    <div>
       <input type="number" id="numericUpDown1" onchange="Change()" />
       <asp:HiddenField ID="NumericUpDown1" runat="server" />
    </div>
</form>
</body>

然后在C＃或Visual Basic中的asp服务器端代码中，您可以将HiddenField视为NumericUpDown，但注意，其值为 string ，并且不十进制，如System.Windows.Forms.NumericUpDown控件，或float，double或int，因此您必须将其解析为其中一种类型，以满足您的需求。

如果您希望样式数字向下，那么在javascript中它很简单。只需设置document.getElementById（＆＃34; numericUpDown1＆＃34;）。style，但是如果你想通过C＃或Visual Basic中的asp服务器端代码来实现它，那么html 必须不同：

<head runat="server">
    <title>Numeric Up Down</title>
    <script type="text/jscript">
        function Change() {
           document.getElementById("<%=NumericUpDown1.ClientID%>").value = document.getElementById("numericUpDown1").value; //or numericUpDown1.value
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <% this.Response.Write(string.Format("<input type='number' id='numericUpDown1' value='{0}' onchange='Change()' style='{1}' />", this.NumericUpDown1.Value, this.numericUpDown1Style)); %>
       <asp:HiddenField ID="NumericUpDown1" runat="server" />
    </div>
</form>
</body>

numericUpDown1Style 是受保护的字段，其类型为字符串，在C＃或Visual Basic中的asp服务器端代码中定义。

如果你想给它一个类而不是它的样式，那么html必须是：

<head runat="server">
    <title>Numeric Up Down</title>
    <script type="text/jscript">
        function Change() {
           document.getElementById("<%=NumericUpDown1.ClientID%>").value = document.getElementById("numericUpDown1").value; //or numericUpDown1.value
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <% this.Response.Write(string.Format("<input type='number' id='numericUpDown1' value='{0}' onchange='Change()' class='{1}' />", this.NumericUpDown1.Value, this.numericUpDown1CssClass)); %>
       <asp:HiddenField ID="NumericUpDown1" runat="server" />
    </div>
</form>
</body>

numericUpDown1CssClass 是受保护的字段，其类型为字符串，在C＃或Visual Basic的asp服务器端代码中定义。

如果你想给它设置样式并给它一个类，那么html就像html＃2或html＃3，但唯一的变化是在以下行：

<% this.Response.Write(string.Format("<input type='number' id='numericUpDown1' value='{0}' onchange='Change()' style='{1}' class='{2}' />", this.NumericUpDown1.Value, this.numericUpDown1Style, this.numericUpDown1CssClass)); %>

我想你知道来自＃2和＃3的 numericUpDown1Style 和 numericUpDown1CssClass 是什么

推荐提示：

如果您的网站包含很多用于您的asp服务器端代码的数字向上控制，这不利于以这种方式创建所有这些，那么您可以添加新的＆＃34; Web用户控件＆＃34 ;项目到您的网站并命名为＆＃34; NumericUpDown＆＃34;。然后在它的源代码html中你可以复制我在上面发布的html＃1或html＃2或html＃3或html＃4（取决于你是否要将数字设置为或不设置，或者是否给它一个类或者两者都有，有些删除和更改，因为它不是＆＃34; WebForm＆＃34;，但是＆＃34; Web用户控件＆＃34; 并在asp服务器端代码中创建以下属性（它们在C＃中，但如果您使用Visual Basic，我认为翻译代码将不会是一个问题）：

    public decimal Value
    {
        get
        {
            return decimal.Parse(this.HiddenField.Value);
        }
        set
        {
            this.HiddenField.Value = value.ToString();
        }
    }
    //Like the System.Windows.Forms.NumericUpDown.Value, but if you dislike 'decimal', and you want other type, then you can change the return type and the type Parse.
//Note that the ID of the HiddenField is simply "HiddenField", and not "NumericUpDown1", so make sure in the Source html to rename "NumericUpDown1" to "HiddenField", but probably you would like a different ID, so if you gave it different ID, then ensure that in the code you refer this HiddenField with the ID you chose, and not "HiddenField" or "NumericUpDown1".

    //The following properties are for only if you want to style your Numeric Up Down:
    protected string style;
    public string Style
    {
        get
        {
            return this.style;
        }
        set
        {
            this.style = value;
        }
    }
    //If you chose, copied, pasted and changed html #2 or html #4, then don't forget to replace this.numericUpDown1Style to this.Style in the source html of the Web User Control.
    //Optional
    public Unit Width
    {
       get
       {
           int startIndex = this.style.IndexOf("width") + 6;
           if (index != -1)
           {
               int endIndex = this.style.IndexOf(';', startIndex);
               return Unit.Parse(this.style.Substring(startIndex, endIndex - startIndex));
           }
           return Unit.Empty;
       }
       set
       {
          if (this.style.Contains("width"))
          {
              this.style = this.style.Replace("width:" + this.Width.ToString() + ';', "width:" + value.ToString() + ';');
          }
          else
          {
              this.style += "width:" + value.ToString() + ';';
          }
       }
    }
//The same you can do with the Height property.
//You can replace all the style code with the CssClass code instead, or just add it:
protected string cssClass;
public string CssClass
{
    get
    {
        return this.cssClass;
    }
    set
    {
        this.cssClass = value;
    }
}
    //If you chose, copied, pasted and changed html #3 or html #4, then don't forget to replace this.numericUpDown1CssClass to this.CssClass in the source html of the Web User Control.

如果你设置了NumericUpDown的样式，那么也要知道在每个ASP.NET控件中，你可以在它们的ID后键入.Style [＆＃34; style＆＃34;] =＆＃34; value＆＃34;。

如果您希望能够使用NumericUpDown执行此操作，请将受保护字段样式的类型从字符串更改为 MyStyle

MyStyle 的定义：

public class MyStyle
{
    internal string style;
    public string this[string style]
    {
        get
        {
            int startIndex = this.style.IndexOf(style) + style.Length + 1;
            int endIndex = this.style.IndexOf(';', startIndex);
            return this.style.Substring(startIndex, endIndex - startIndex)
        }
        set
        {
            this.style = this.style.Replace(style + ':' + this[style] + ';', style + ':' + value + ';')
        }
    }
}

将此类添加到Web用户控件的代码中，并更改Style属性：

public string Styles
{
    get
    {
        return this.style.style;
    }
    set
    {
        this.style.style = value;
    }
}

然后添加属性：

public MyStyle Style
{
    get
    {
        return this.style;
    }
}

并更改以下行：

protected string style;

为：

protected readonly MyStyle style = new MyStyle();

不要忘记在Web用户控件的源html中，将this.Style替换为this.Styles。

注意：我没有耐心自己测试代码，所以它可能不起作用，所以你必须自己修复它。至少你了解我的想法。

修复完成后，您可以编辑我的答案并用固定代码替换错误的代码。

我非常感激！

此Web用户控件是您想要的ASP NumericUpDown！

Answer 4

如果您坚持使用.NET 4.0并且想要使用本机HTML5输入类型“number”（而不是Ajax Control Toolkit中的NumericUpDown），则可以使用ASP TextBox控件与额外“type”标记的组合：

<asp:TextBox runat="server" ID="txtMyTextBox" type="number" min="0" max="10" step="1"/>

如果您想阻止任何文本输入，您甚至可以从Ajax Control Toolkit添加FilteredTextBoxExtender：

<ajaxToolkit:FilteredTextBoxExtender runat="server" TargetControlID="txtMyTextBox" FilterType="Numbers" />

是否有ASP.NET的数字UpDown控件？

4 个答案: