none
EditorFor - Aplicar uma classe CSS RRS feed

  • Pergunta

  • Pessoal,

    Estou tentando aplicar um CSS no meu EditorFor mas quando o Html é gerado esta acontecendo algo estranho, veja:

    @Html.EditorFor(model => model.Cliente.DataAtividade, new { @class = "textBoxForClass" })

    E o Html gerado:

    <input class="text-box single-line" data-val="true" data-val-date="O campo Início da Atividade deve ser uma data." id="Cliente_DataAtividade" name="Cliente.DataAtividade" type="date" value="13/04/1979" />

    O nome da classe é totalmente diferente. Neste caso como devo fazer?

    Obrigado!

    segunda-feira, 21 de janeiro de 2013 17:21

Respostas

Todas as Respostas

  • O EditFor não possui o parametro htmlAttribute que serve para fazer o que você está tentando.. no seu caso o parametro @class está sendo considerado um additionalViewData.

    O que você pode fazer é colocar a class dentro do seu editorTemplate(se você possui, caso contrário não use o EditorFor).

    Ou você tambem pode acessar esse parametro @class no seu editor template:

    @model dynamic
    
    <input type="text" class="@model.class" />


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    segunda-feira, 21 de janeiro de 2013 17:25
  • Vc pode usar um TextBox nesse caso =)

    @Html.TextBoxFor(model => model.Cliente.DataAtividade, new { @class = "textBoxForClass" })

    segunda-feira, 21 de janeiro de 2013 17:29
  • já tentou fazer manualmente, tipo: 

     new { size = 15, maxLength = 10 })

    ?

    Ou não?

    Se sim, O que deu????


    Aprendendo Ad Eternum Se minha resposta foi útil por favor marque, se minha resposta respondeu completamente sua dúvida, marque-a como resposta, se houve outra resposta melhor, marque ela. Assim facilita a busca e melhora a organização do fórum e o nosso aprendizado.

    segunda-feira, 21 de janeiro de 2013 17:31
  • Já o @Html.TextBoxFor aceita eu passar uma classe no parametro mas em contrapartida ele ja nao acata esta formatacao que coloquei no annotation: [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]

    Desconheço este editorTemplate mas vou dar uma olhada aqui na net pra ver do que se trata.

    obrigado Murilo

    segunda-feira, 21 de janeiro de 2013 17:35
  • Algo me diz que vc vai tentar adicionar o Datepicker ai depois. Aqui explica o Datepicker e templates xD

    Templates

    segunda-feira, 21 de janeiro de 2013 17:39
  • Sim, no caso vou usar um Datepicker mesmo.
    segunda-feira, 21 de janeiro de 2013 17:46
  • Para usar os EditorTemplates e DisplayTemplates

    Dentro da pasta Views\Shared crie duas pastas:

    \Views\Shared\EditorTemplates

    \Views\Shared\DisplayTemplates

    Exemplo para um EditorTemplate do tipo DateTime:

    Crie um arquivo dentro da pasta \Views\Shared\EditorTemplates com o nome de DateTime.cshtml:

    @model DateTime? @Html.TextBox("", (Model.HasValue ? Model.Value.ToString("d", System.Globalization.CultureInfo.CurrentCulture) : string.Empty),

    new { @class = "datepicker", maxlength = 10, @readonly = true })

    Através da classe css "datepicker" você finaliza o design do seu campo de formulário ou pode acionar o datepicker do jquery.

    Sempre que você usar o EditorFor em um tipo DateTime o código renderizado será o do arquivo DateTime.cshtml

    Lembrando que você pode usar essa técnica para tipos complexos também.

    Fiz um tutorial mais completo que pode ser visto aqui:

    http://pilulamvc.blogspot.com.br/2013/01/usando-editortemplates-e.html


    segunda-feira, 21 de janeiro de 2013 20:49
    Moderador
  • Amigo, você pode é setar ids, ao invés de classe, fica um pouco menos semântico, mas fica funcional.

    Outra solução seria como descrito pelo nosso amigo Omnislash009 ou então fazer o campo em html puro, sem usar os Html.Helpers

    <input type="text" name="nome" required="required" id="xx" class="zz" />

    ps. Se útil, gentileza marcar como resposta. :)

    • Sugerido como Resposta Felipe Mena terça-feira, 5 de fevereiro de 2013 12:55
    quinta-feira, 31 de janeiro de 2013 17:54
  • No caso tive que usar o TextBoxFor mesmo para resolver.
    quarta-feira, 6 de fevereiro de 2013 19:01