it-swarm.com.de

Rendern von ASP.NET-Textfeldern als HTML5-Eingabetyp "Number"

Wenn ein ASP.NET-Textfeld dargestellt wird, wird Folgendes erzeugt:

<input type="text" />

Ich brauche es jedoch, um stattdessen als HTML5-Zahlentyp zu rendern, wie:

<input type="number" />

Ist das möglich?

36
Curt

Ich hatte die gleiche Anforderung für eine mobile Website mit ASP.NET. Nachdem ich keine gute Lösung gefunden hatte, versuchte ich einfach, type="number" direkt in der Textbox einzustellen. Zu meiner Überraschung hat es funktioniert! Unglaublich, ich habe ein einfaches Testprojekt erstellt, um es noch einmal zu überprüfen. Ich habe diese Codezeile in jeder .NET-Version ausgeführt:

<!-- this HTML tested in each .NET version -->
<asp:TextBox runat="server" type="number" />

Hier sind die Ergebnisse:

<!-- ASP.NET 2.0, 3.0, and 3.5 -->
<input name="ctl01" type="text" type="number" />

<!-- ASP.NET 4.0 and 4.5 -->
<input name="ctl01" type="number" />

Fazit: Wenn Sie ASP.NET 4.0 oder neuer verwenden, fügen Sie einfach type="number" in Ihr Textfeld ein.

55
zacharydl

Überschreiben Sie das Basis-Textfeld-Steuerelement

public class HTML5TextBox : TextBox
{
.....
protected override void Render(HtmlTextWriter writer)
{
//Sth like the code below, you need do some research though
 writer.AddAttribute(HtmlTextWriterAttribute.Type,"Number");
 writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_displayTXT");
 writer.AddAttribute(HtmlTextWriterAttribute.Name,this.UniqueID + "t1");
 writer.AddAttribute(HtmlTextWriterAttribute.Value,base.Text);
 writer.RenderBeginTag(HtmlTextWriterTag.Input);       
 writer.RenderEndTag(); 
}
....
}

Oder Sie können das, was ich gerade gefunden habe, unter http://www.codeproject.com/Articles/68834/Enhanced-Textbox-Control überprüfen.

5
ValidfroM

Die Eigenschaft TextMode wird dafür verwendet, z.

<asp:TextBox ID="uPhone" CssClass="formEntry" TextMode="Phone" ClientIDMode="Static" runat="server"></asp:TextBox>

könnte als gerendert werden

<input name="ctl00$ContentPlaceHolder1$uPhone" id="uPhone" class="formEntry" type="tel">

Die Textmodi zusätzlich zu [MultiLine | Passwort | SingleLine] wurde einige Zeit nach VS2010 eingeführt - die Dokumentation sagt mir nicht genau wann.

4
Andrew Morton

Ich konnte dies mit einem dynamisch erstellten Steuerelement wie folgt ausführen:

TextBox control = new TextBox();
control.Attributes.Add("Type", "number");
3
ariscris

sie müssten ein neues Steuerelement erstellen, das von TextBox erbt, und das Rendering überschreiben. Alternativ können Sie ein JavaScript-Snippet generieren, um es nachträglich zu ändern.

2
lincolnk

Sie können die Mitglieder des Enum TextBoxMode verwenden 

<asp:TextBox ID="MyAwesomeId" runat="server" TextMode="Number"></asp:TextBox>

Dies machen 

<input type="number" value="5" id="MainContent_MyAwesomeId" c>

das volle Enum ist 

public enum TextBoxMode
{
    SingleLine = 0,
    MultiLine = 1,
    Password = 2,
    Color = 3,
    Date = 4,
    DateTime = 5,
    DateTimeLocal = 6,
    Email = 7,
    Month = 8
    Number = 9,
    Range = 10,
    Search = 11,
    Phone = 12,
    Time = 13,
    Url = 14,
    Week = 15
}

setze type="number" in <asp:textbox type="number" runat="server"> Unabhängig davon, dass es nicht in der Liste erscheint, funktioniert es überraschenderweise

0
Marwah Abdelaal