2013-05-14 20 views
9

Có cách nào tôi có thể sử dụng một số updown trong ASP.NET mà không cần sử dụng JavaScript?Có điều khiển UpDown dạng số cho ASP.NET không?

Và nếu không, có cách nào khác không?

+0

thay thế cho vấn đề gì? Bạn có ý nghĩa gì với "không sử dụng Javascript?" HTML thuần túy? Không có: http://tjvantoll.com/2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/ –

+0

@CasparKleijne cách thay thế để nhận loại này kiểm soát mà không cần sử dụng Javascript – LukeHennerley

+0

Tôi có một trường được gọi là Số lượng trong biểu mẫu web của tôi. Một textbox sẽ đòi hỏi rất nhiều trình xác nhận hợp lệ để đảm bảo nó là số nên tôi nghĩ một đối tượng updown dạng số sẽ thân thiện với người dùng hơn đối với giao diện và mã. Bất kỳ thay thế cho đối tượng updown? khác với một hộp văn bản? – HelpASisterOut

Trả lời

4

Hãy nhìn vào Control Ajax 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" /> 

Cũng xem xét thêm các tài liệu tham khảo với NuGet bằng cách sử dụng PM> Install-Package AjaxControlToolkit

+0

-1 OP rõ ràng cần một giải pháp mà không cần sử dụng javascript. Giải pháp này yêu cầu javascript. –

+2

@CasparKleijne Tại thời điểm nào mã trên sử dụng javascript? Đó là HTML thuần túy và có lẽ là giải pháp tốt nhất/duy nhất có sẵn cho anh ta. Các mã cơ bản có thể sử dụng javascript tuy nhiên các giải pháp không, tôi sẽ nói lý do chính OP không muốn sử dụng javascript là bởi vì họ không hiểu nó không phải vì họ không thể sử dụng nó. – LukeHennerley

0

Tôi nghĩ html sau đây có thể trả lời câu hỏi của bạn:

<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> 

Và sau đó trên máy chủ asp side code trong C# hoặc Visual Basic, bạn có thể coi đó như HiddenField NumericUpDown, nhưng lưu ý rằng giá trị của mình là chuỗikhông thập phân, như điều khiển System.Windows.Forms.NumericUpDown , hoặc float, hoặc double, hoặc int, vì vậy bạn sẽ phải phân tích cú pháp nó thành một trong những kiểu này cho những gì bạn cần nhất.

Nếu bạn muốn phong cách số lên xuống, sau đó trong javascript nó rất đơn giản. Chỉ cần thiết lập document.getElementById ("numericUpDown1") phong cách, nhưng nếu bạn muốn làm điều đó thông qua máy chủ asp side code trong C# hoặc Visual Basic, sau đó html phải thể khác nhau:.

<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 là trường được bảo vệ có loại là chuỗi được xác định trong mã phía máy chủ asp trong C# hoặc Visual Basic.

Nếu bạn muốn cung cấp cho nó một lớp và không để định dạng, sau đó html phải:

<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 là một lĩnh vực bảo vệ có loại là chuỗi định nghĩa trong asp mã phía máy chủ trong C# hoặc Visual Basic.

Nếu bạn muốn để định dạng và cung cấp cho nó một lớp, sau đó html giống như html # 2 hoặc html # 3, nhưng sự thay đổi duy nhất là trong dòng sau:

<% 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)); %> 

Tôi nghĩ rằng bạn biết những gì là numericUpDown1StylenumericUpDown1CssClass từ # 2 và # 3

đƯỢC KHUYẾN TIP:

Nếu trang web của bạn chứa nhiều điều khiển lên xuống được sử dụng trong mã phía máy chủ asp của bạn và điều này là bất lợi khi tạo tất cả theo cách này, sau đó bạn có thể thêm mục "Kiểm soát người dùng web" mới vào trang web của mình và đặt tên cho nó " NumericUpDown ".Sau đó, trong html nguồn của nó, bạn có thể sao chép html # 1 hoặc html # 2 hoặc html # 3 hoặc html # 4 mà tôi đã đăng ở trên (phụ thuộc vào việc bạn muốn tạo kiểu cho số lên hay không, hoặc cho nó một lớp hay không , hoặc cả hai hoặc không) với một số loại bỏ và thay đổi, bởi vì nó không phải là "WebForm", nhưng "Web User Control" và trong mã phía máy chủ asp thực hiện các thuộc tính sau đây (Chúng nằm trong C#, nhưng nếu bạn sử dụng Visual Basic , tôi không nghĩ rằng nó sẽ là một vấn đề đối với bạn để dịch mã):

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. 

Nếu bạn tạo kiểu cho NumericUpDown, vì vậy biết cũng rằng trong mọi điều khiển ASP.NET, bạn có thể gõ sau ID của họ. Kiểu ["style"] = "value".

Nếu bạn muốn để có thể làm điều này với NumericUpDown quá, sau đó thay đổi các loại lĩnh vực bảo vệ phong cách từ chuỗi để MyStyle

Có là định nghĩa của 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 + ';') 
     } 
    } 
} 

Thêm lớp này vào Mã kiểm soát người dùng web và thay đổi thuộc tính Kiểu:

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

và sau đó thêm tài sản:

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

và thay đổi dòng từ:

protected string style; 

tới:

protected readonly MyStyle style = new MyStyle(); 

Đừng quên trong html nguồn Web User Control, để thay thế điều này. Kiểu này. Kiểu.

LƯU Ý: Tôi không có sự kiên nhẫn để tự mình kiểm tra mã, vì vậy nó có thể không hoạt động, vì vậy bạn sẽ phải tự khắc phục. Ít nhất bạn hiểu ý tưởng của tôi.

Sau khi khắc phục, bạn có thể chỉnh sửa câu trả lời của mình và thay thế mã sai bằng mã cố định của bạn.

Tôi sẽ đánh giá cao nó rất nhiều!

Điều khiển người dùng web này là ASP NumericUpDown mà bạn muốn!

16

Tôi đã cố gắng làm điều tương tự và hóa ra hộp văn bản asp có tùy chọn cho nó. những gì đã làm việc cho tôi là:

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

Điều này đã cho tôi hộp văn bản khi di chuột qua hoặc lấy nét, hiển thị điều khiển từ trên xuống và chỉ cho phép số từ min đến tối đa. hoạt động giống như

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

[Các giá trị TextMode như 'Số'] (https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textboxmode (v = vs.110) .aspx) có sẵn trong phiên bản 4.5 (không phải 4) của .NET Framework. – ChrisW

0

Nếu bạn bị kẹt trên .NET 4.0 và bạn muốn sử dụng bản địa HTML5 loại đầu vào "number" (chứ không phải là NumericUpDown từ Ajax Control Toolkit), bạn có thể sử dụng một sự kết hợp của các TextBox kiểm soát ASP với thêm "loại" tag:

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

Nếu bạn muốn ngăn chặn bất kỳ đầu vào văn bản nào, bạn thậm chí có thể thêm một FilteredTextBoxExtender từ Bộ công cụ Kiểm soát Ajax:

<ajaxToolkit:FilteredTextBoxExtender runat="server" TargetControlID="txtMyTextBox" FilterType="Numbers" /> 
Các vấn đề liên quan