Styliser les assistants HTML ASP.NET MVC

Question

Si j'ai un assistant HTML comme celui-ci :

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

Comment lui appliquer une classe CSS ?Dois-je l'envelopper dans une travée ?Ou dois-je utiliser d'une manière ou d'une autre la propriété HtmlAttributes de l'assistant ?

Answer 1

Vous pouvez le transmettre dans l'appel TextBox en tant que paramètre.

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

Cette ligne créera une zone de texte avec la valeur 20 et attribuera l'attribut de classe avec la valeur bonjour.Je mets le caractère @ devant la classe, car la classe est un mot-clé réservé.Si vous souhaitez ajouter d'autres attributs, séparez simplement les paires clé/valeur par des virgules.

Answer 2

Voici comment ajouter une classe et un style sur le même élément...

"x" étant le modèle passé à la vue avec une propriété TextBoxID

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

Answer 3

J'ai fait quelques recherches et suis tombé sur cet article qui semble avoir une solution à votre question.

Boîte à outils de contrôle Ajax avec ASP.NET MVC#

source:jimzimmerman

LIEN DE L'ARTICLE

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

CITATION

Donc, fondamentalement, si vous mettez le nom de classe TextBoxWaterMark sur n'importe quelle entrée de zone de texte avec le titre que vous aimez afficher en tant que filigrane comme ceci:

<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" }) %>

Ce qui est bien dans la deuxième option, c'est que vous obteniez l'avantage supplémentaire d'obtenir le moteur View pour remplir la valeur de la zone de texte s'il existe un élément dans ViewData de ViewData.Model qui a un VAR nommé «Nom d'utilisateur».

Answer 4

Utilisez le htmlAttributes paramètre avec un type anonyme, comme ceci :

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

Answer 5

l'implémentation de l'assistant

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));
    }    
}

l'utilisation dans la section d'affichage

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

le résultat

Answer 6

Il n'est pas nécessaire d'utiliser span, car ce n'est pas dynamique.

CSS :

.testClass {
color: #1600d3;
}

Vue (Index) :

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

si vous avez besoin d'options dynamiques, vous pouvez utiliser par exemple :

CSS :

.test class{
background: #ffffff;
}

Contrôleur (Index pour test) :

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

Vue (Index) :

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

J'espère que cela aide.

Answer 7

Est-ce que c'est beaucoup plus de travail ?