Cómo permitir solo números en el cuadro de texto en mvc4 razor

Tengo 3 cuadros de texto que toman valores de código postal y número de móvil y número residencial. Obtuve la solución para permitir solo el número en el cuadro de texto usando jquery de Bellow post.

Me gustaría hacer que un cuadro de texto EditFor acepte solo números

pero, ¿podemos hacer esto usando anotaciones de datos ya que estoy usando la maquinilla de afeitar MVC4?

Estaba jugando con HTML5 input type = number. si bien no es compatible con todos los navegadores, espero que sea el camino a seguir para manejar el manejo específico del tipo (número por ejemplo). bastante simple de hacer con maquinilla de afeitar (ex es VB)

@Html.TextBoxFor(Function(model) model.Port, New With {.type = "number"})

y gracias a Lee Richardson, la forma c #

@Html.TextBoxFor(i => i.Port, new { @type = "number" }) 

más allá del alcance de la pregunta, pero puede hacer este mismo enfoque para cualquier tipo de entrada html5

Utilice una expresión regular, p. Ej.

[RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")]
public int Count { get; set; }

@Html.TextBoxFor(m => m.PositiveNumber, 
                      new { @type = "number", @class = "span4", @min = "0" })

en MVC 5 con Razor, puede agregar cualquier atributo de entrada html en el objeto anónimo como en el ejemplo anterior para permitir solo números positivos en el campo de entrada.

en el cuadro de texto escriba este código onkeypress="return isNumberKey(event)" y la función para esto está justo debajo.

<script type="text/javascript">
function isNumberKey(evt)
{
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
}
</script>

Utilice el atributo DataType, pero esto excluirá los valores negativos, por lo que la expresión regular a continuación evitará esto

   [DataType(DataType.PhoneNumber,ErrorMessage="Not a number")]
   [Display(Name = "Oxygen")]
   [RegularExpression( @"^\d+$")]
   [Required(ErrorMessage="{0} is required")]
   [Range(0,30,ErrorMessage="Please use values between 0 to 30")]
    public int Oxygen { get; set; }

Esto funcionó para mí:

<input type="text" class="numericOnly" placeholder="Search" id="txtSearch">

Javacript:

//Allow users to enter numbers only
$(".numericOnly").bind('keypress', function (e) {
    if (e.keyCode == '9' || e.keyCode == '16') {
        return;
    }
    var code;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if (e.which == 46)
        return false;
    if (code == 8 || code == 46)
        return true;
    if (code < 48 || code > 57)
        return false;
});

//Disable paste
$(".numericOnly").bind("paste", function (e) {
    e.preventDefault();
});

$(".numericOnly").bind('mouseenter', function (e) {
    var val = $(this).val();
    if (val != '0') {
        val = val.replace(/[^0-9]+/g, "")
        $(this).val(val);
    }
});

Use esta función en su secuencia de comandos y coloque un intervalo cerca del cuadro de texto para mostrar el mensaje de error

$(document).ready(function () {
    $(".digit").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            $("#errormsg").html("Digits Only").show().fadeOut("slow");
            return false;
        }
    });
});

@Html.TextBoxFor(x => x.company.ContactNumber, new { @class = "digit" })
<span id="errormsg"></span>

can we do this using data annotations as I am using MVC4 razor ?

No, según entiendo tu pregunta, la validación discreta solo mostrará errores. La forma más sencilla es usar el complemento jquery:

Complemento de entrada enmascarado

Aquí está el javascript que le permitirá ingresar solo números.

Suscríbete al onkeypressevento para el cuadro de texto.

@Html.TextBoxFor(m=>m.Phone,new { @onkeypress="OnlyNumeric(this);"})

Aquí está el javascript para ello:

<script type="text/javascript">
function OnlyNumeric(e) {
            if ((e.which < 48 || e.which > 57)) {
                if (e.which == 8 || e.which == 46 || e.which == 0) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
</script>

Espero que te ayude.

para valores decimales mayores que cero, HTML5 funciona de la siguiente manera:

<input id="txtMyDecimal" min="0" step="any" type="number">

Tal vez puedas usar la anotación de datos [Integer] (si usas DataAnnotationsExtensions http://dataannotationsextensions.org/ ). Sin embargo, esto solo verificará si el valor es un número entero, no si está completo (por lo que es posible que también necesite el atributo [Requerido]).

Si habilita la Validación discreta, la validará en el lado del cliente, pero también debe usar Modelstate.Valid en su acción POST para rechazarla en caso de que las personas tengan Javascript deshabilitado.

DataTypetiene un segundo constructor que toma una cadena. Sin embargo, internamente, esto es lo mismo que usar el UIHintatributo.

No es posible agregar un nuevo DataType principal ya que la DataTypeenumeración es parte del marco .NET. Lo más cercano que puede hacer es crear una nueva clase que herede de DataTypeAttribute. Luego, puede agregar un nuevo constructor con su propia DataTypeenumeración.

public NewDataTypeAttribute(DataType dataType) : base(dataType)
 { }

public NewDataTypeAttribute(NewDataType newDataType) : base (newDataType.ToString();

También puede ir a través de este enlace. Pero te recomendaré que uses Jquery para lo mismo.

Hola, prueba lo siguiente ...

<div class="editor-field">
  <%: Html.TextBoxFor(m => m.UserName, new {onkeydown="return ValidateNumber(event);" })%>
  <%: Html.ValidationMessageFor(m => m.UserName) %>
</div>

GUIÓN

<script type="text/javascript">
   function ValidateNumber(e) {
       var evt = (e) ? e : window.event;
       var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
       if (charCode > 31 && (charCode < 48 || charCode > 57)) {
           return false;
       }
       return true;
   };

@Html.TextBoxFor(x => x.MobileNo, new { @class = "digit" , @maxlength = "10"})

@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
         $(".digit").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
            {
                $("#errormsg").html("Digits Only").show().fadeOut("slow");
                return false;
            }
         });
    </script>
}

<input type = "number" @ bind = "Cantidad" class = "txt2" />

Utilice el tipo = "número"

function NumValidate(e) {
    var evt = (e) ? e : window.event;
    var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        alert('Only Number ');
        return false;
    }    return true;
}  function NumValidateWithDecimal(e) {

var evt = (e) ? e : window.event;
var charCode = (evt.keyCode) ? evt.keyCode : evt.which;

if (!(charCode == 8 || charCode == 46 || charCode == 110 || charCode == 13 || charCode == 9) && (charCode < 48 || charCode > 57)) {
    alert('Only Number With desimal e.g.: 0.0');
    return false;
}
else {
    return true;
} } function onlyAlphabets(e) {
try {
    if (window.event) {
        var charCode = window.event.keyCode;
    }
    else if (e) {
        var charCode = e.which;
    }
    else { return true; }

    if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 46) || (charCode == 32))
        return true;
    else
        alert("Only text And White Space And . Allow");
    return false;

}
catch (err) {
    alert(err.Description);
}} function checkAlphaNumeric(e) {

if (window.event) {
    var charCode = window.event.keyCode;
}
else if (e) {
    var charCode = e.which;
}
else { return true; }

if ((charCode >= 48 && charCode <= 57) || (charCode >= 65 && charCode <= 90) || (charCode == 32) || (charCode >= 97 && charCode <= 122)) {
    return true;
} else {
    alert('Only Text And Number');
    return false;
}}