2

Criei minha classe com o tipo int

[Required(ErrorMessage = "Preencha o Numero")]
[DisplayName("Numero")]
public int Number { get; set; }

e ai no Layout gerou estas setinhas, como faço para remover as setinhas?

inserir a descrição da imagem aqui

Código da view:

<!--Number-->
<div class="alinhado col-md-4">
    <div class="form-group">
        <div class=" alinhadoLabel">
            @Html.LabelFor(model => model.Number,
                        htmlAttributes: new { @class = "control-label" })
        </div>
        <div class="alinhadoEditor">
            @Html.EditorFor(model => model.Number, 
                  new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Number, "", 
                  new { @class = "text-danger" })
        </div>
    </div>
</div>
<!--End Number-->
1
  • Essa notação ocorre naturalmente pelo fato de você estar usando inteiros na hora de definir seus campos. As setas permitem que seu usuário possa facilmente incrementar ou decrementar o valor do campo. Não é uma funcionalidade do ASP.NET MVC em si ou do Razor, mas do HTML5. Commented 13/12/2016 às 3:17

2 Respostas 2

3

Coloque TextBoxFor no lugar de EditorFor. O TextBoxFor gera um input text, enquanto EditorFor gera input de acordo com o tipo existente no seu modelo que pode ser color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url e week que são na verdade as Tags Html5, ou seja, o EditorFor gera o input de acordo com o tipo, tem vantagens nesse aspecto, já visto que se o tipo mudar automaticamente se adequa ao novo tipo, alterando então o type do input.

Não existe uma forma de tirar as setas no seu caso, porque EditorFor gera um input desse tipo:

<input type="number" name="Number" />

sendo um input do type number (Html5) que possui a características de aceitar números e as setas uma facilidade para o usuário aumentar ou diminuir o valor já existente.

A única forma de contornar isso é colocar um TextBoxFor que gera um input assim:

<input type="text" name="Number" />

que é no caso um input simples do tipo text.

Referencias:

1

Outra maneira é adicionar este código CSS:

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

Retirado desta resposta do SO Inglês.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .