1. Dom
  2. Pytanie i odpowiedź
  3. Czy istnieje numeryczna kontrolka UpDown dla ASP.NET?

Czy istnieje numeryczna kontrolka UpDown dla ASP.NET?

2013-05-14 15 views
9

Czy istnieje sposób mogę użyć numeryczne updown w ASP.NET bez używania JavaScript?Czy istnieje numeryczna kontrolka UpDown dla ASP.NET?

A jeśli nie, czy istnieje alternatywa?

Źródło

2013-05-14 HelpASisterOut

+0

alternatywa dla jakiego problemu? Co masz na myśli mówiąc "bez JavaScriptu?" zwykły HTML? Nie ma żadnych: http://tjvantoll.com/2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/ –

+0

@CasparKleijne alternatywny sposób uzyskania tego typu kontrola bez używania Javascript – LukeHennerley

+0

Mam pole o nazwie Ilość w moim formularzu internetowym. Pole tekstowe wymagałoby wielu walidatorów, aby upewnić się, że jest to numeryczne, więc pomyślałem, że numeryczny obiekt do aktualizacji jest bardziej przyjazny dla interfejsu i kodu. Dowolna alternatywa dla obiektu uprowadzonego? inne niż pole tekstowe? – HelpASisterOut

Odpowiedz

4

Proszę spojrzeć na Toolkit Ajax sterowania

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

także rozważyć dodanie odniesienia z NuGet za pomocą PM> Install-Package AjaxControlToolkit

Źródło

2013-05-14 08:24:35 LukeHennerley

+0

-1 PO wyraźnie wymaga rozwiązania bez używania javascript. To rozwiązanie wymaga javascript. –

+2

@CasparKleijne W którym punkcie powyższy kod korzysta z javascript? Jest to czysty HTML i prawdopodobnie najlepsze/jedyne dostępne rozwiązanie. Kod źródłowy może używać javascript, jednak rozwiązanie nie, powiedziałbym, że głównym powodem, dla którego OP nie chciał używać javascript jest to, że nie rozumieją go nie dlatego, że nie mogą z niego korzystać. – LukeHennerley

0

myślę następujące html może odpowiedzieć na pytanie:

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

A potem na serwerze asp kodu po stronie C# lub Visual Basic, można traktować tego jako NumericUpDown HiddenField, ale uwaga, że jego wartość jest ciąg i nie dziesiętny, jak kontrola System.Windows.Forms.NumericUpDown lub float, lub double, lub int, więc będziesz musiał Parsować go do jednego z tych typów dla tego, czego potrzebujesz najbardziej.

Jeśli chcesz styl numeric w dół, a następnie w javascript jest to proste. Wystarczy ustawić document.getElementById ("numericUpDown1") styl, ale jeśli chcesz to zrobić za pośrednictwem serwera asp kodu po stronie C# lub Visual Basic, a następnie html musi być różne.

<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 to chronione pole, którego typ to string zdefiniowany w kodzie strony serwera asp w języku C# lub Visual Basic.

Jeśli chcesz, aby nadać mu klasę i go nie styl, to html musi być:

<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 jest polem chroniony którego typ jest ciąg z definicją zawartą w ASP kod po stronie serwera w C# lub Visual Basic.

Jeśli chcesz projektować je i nadać mu klasę, następnie HTML jest jak html # 2 lub html # 3, ale jedyną zmianą jest w następujący wiersz:

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

Myślę, że wiesz co jest numericUpDown1Style i numericUpDown1CssClass z # 2 i # 3

zalecana końcówka:

Jeśli twoja strona zawiera wiele kontroli numerycznych w górę, które są używane w kodzie strony serwera asp, a to jest niekorzystne, aby utworzyć je wszystkie w ten sposób, możesz dodać nowy element "Kontrola sieci Web" do swojej witryny i nazwać go " NumericUpDown ".Następnie w źródłowym html możesz skopiować html # 1 lub html # 2 lub html # 3 lub html # 4, które zamieściłem powyżej (zależy od tego, czy chcesz ustawić numeric w dół, czy nie, lub nadać mu klasę lub nie lub oba lub nie) z pewnymi usunięciami i zmianami, ponieważ nie jest to "WebForm", ale "Kontrola użytkownika WWW" oraz w kodzie strony serwera asp tworzą następujące właściwości (Są w języku C#, ale jeśli korzystasz z Visual Basic , nie sądzę, że będzie to problemem, aby przetłumaczyć kod):

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.

Jeśli Style NumericUpDown, więc wiem, że w każdej kontroli ASP.NET, można wpisać po ich ID. Styl ["styl"] = "wartość".

Jeśli chcesz być w stanie to zrobić z NumericUpDown zbyt, a następnie zmienić typ pola chronionego stylu z ciąg do MyStyle

Istnieje definicja 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 + ';') 
     } 
    } 
}

Dodaj tę klasę do Kodeksu Kontroli użytkownika w Internecie i zmień właściwość Style:

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

a następnie dodać właściwość:

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

i zmienić linię od:

protected string style;

do:

protected readonly MyStyle style = new MyStyle();

Nie zapomnij w html źródłowym Web User Control, w celu zastąpienia tego.Zastosuj do tego.Style.

UWAGA: Nie miał cierpliwości do przetestowania kodu przez siebie, więc to nie może pracować, więc trzeba będzie to naprawić samemu. Przynajmniej zrozumiałeś mój pomysł.

Po poprawkach można edytować odpowiedź i zastąpić nieprawidłowy kod stałym kodem.

Doceniam to bardzo!

Ta internetowa kontrola użytkownika to ASP NumericUpDown, którego chciałeś!

Źródło

2014-04-28 23:12:34

16

Próbowałem zrobić to samo, i okazało się, że pole tekstowe asp ma dla niego opcję. co pracował dla mnie było to,

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

ten dał mi tekstowe, które po mouseovered lub podane ostrości, pokazuje kontrole góra-dół i pozwala tylko numery od min do max. to działa tak samo jak

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

Źródło

2014-11-21 19:36:30 Armando

+6

[Wartości TextMode, takie jak "Numer"] (https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textboxmode (v = vs.110) .aspx) są dostępne w wersji 4.5 (nie 4) .NET Framework. – ChrisW

0

Jeśli utkniesz na .NET 4.0 i chcesz skorzystać z natywną HTML5 input type „Number” (zamiast NumericUpDown z Ajax sterowania Toolkit) można użyć kombinacji kontroli TextBox ASP z dodatkowym „typ” tag:

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

Jeśli chcesz zapobiec wprowadzaniu tekstu, możesz nawet dodać FilteredTextBoxExtender z Ajax Control Toolkit:

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

Źródło

2017-04-18 08:07:12 breez

Powiązane problemy

 Powiązane problemy