Estilizando ajudantes HTML ASP.NET MVC

Question

Se eu tiver um auxiliar HTML assim:

Name:<br />
<%=Html.TextBox("txtName",20) %><br />

Como aplico uma classe CSS a ele?Eu tenho que envolvê-lo em um vão?Ou preciso utilizar de alguma forma a propriedade HtmlAttributes do auxiliar?

Answer 1

Você pode passá-lo para a chamada TextBox como parâmetro.

Name:<br/>    
<%= Html.TextBox("txtName", "20", new { @class = "hello" }) %>

Esta linha criará uma caixa de texto com o valor 20 e atribuirá ao atributo de classe o valor hello.Coloquei o caractere @ na frente da classe, porque classe é uma palavra-chave reservada.Se você quiser adicionar outros atributos, basta separar os pares chave/valor com vírgulas.

Answer 2

É assim que se adiciona uma classe e um estilo no mesmo elemento...

"x" sendo o modelo passado para a view com uma propriedade TextBoxID

@Html.TextBoxFor(x => x.TextBoxID, new { @class = "SearchBarSelect", style = "width: 20px; background-color: green;" })

Answer 3

Fiz algumas pesquisas e me deparei com este artigo que parece ter uma solução para sua dúvida.

Kit de ferramentas de controle Ajax com ASP.NET MVC#

fonte:Jimzimmerman

LINK DO ARTIGO

http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330

CITAR

Então, basicamente, se você colocar o nome da classe TextBoxwatermark em qualquer entrada de texto com o título que você gosta de mostrar como a marca d'água como esta:

<input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" />

ou

<%= Html.TextBox("username", new { @class = "TextboxWatermark", @title = "Must be at least 6 chars" }) %>

O que é bom na segunda opção é que você obtém o benefício adicional de obter o mecanismo de exibição para preencher o valor da caixa de texto se houver um item no ViewData do ViewData.model que possui um Var chamado 'Nome de usuário'.

Answer 4

Use o htmlAttributes parâmetro com um tipo anônimo, como este:

<%=Html.TextBox("txtName","20", new { @class = "test"}) %>

Answer 5

a implementação auxiliar

public static class LabelExtensioncs
{
    public static MvcHtmlString Alarm(this HtmlHelper helper, string target, string text)
    {
        return MvcHtmlString.Create(string.Format("<p class='alert' style='background-color: #b8f89d;border-radius: 5px;width: 100%;'><b>{0}</b><br /><i>{1}</i></p>", target, text));
    }    
}

o uso na seção de visualização

@Html.Alarm("Title", "please unsure your card no is invisible in your authorized information")

o resultado

Answer 6

Não há necessidade de usar span, porque não é dinâmico.

CSS:

.testClass {
color: #1600d3;
}

Visualizar (Índice):

@Html.TextBox("expression", "Text to show.", new { @class = "testClass" })

se precisar de opções dinâmicas, você pode usar, por exemplo:

CSS:

.test class{
background: #ffffff;
}

Controlador (Índice para teste):

[HttpGet]
public ActionResult Index()
{
ViewBag.vbColor = "#000000";
return View();
}

Visualizar (Índice):

<div>
<span>
@Html.TextBox("expression", "Text to show.", new 
{ @class = "testClass", @style="color: " + 
@ViewBag.vbColor })
</span>
</div>

Espero que ajude.

Answer 7

É muito mais trabalho?