Стилизация HTML помощников ASP.NET MVC

Question

Если у меня есть такой помощник HTML:

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

Как мне применить класс CSS к нему? Я должен обернуть это в промежутке? Или мне нужно как-то использовать свойство HtmlAttributes помощника?

Answer 1

Вы можете передать его в вызов TextBox в качестве параметра.

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

Эта строка создаст текстовое поле со значением 20 и присвоит атрибуту класса значение hello. Я поставил символ @ перед классом, потому что класс является зарезервированным ключевым словом. Если вы хотите добавить другие атрибуты, просто разделите пары ключ / значение запятыми.

Answer 2

Как добавить класс и стиль к одному элементу ...

"x" - модель, передаваемая в представление со свойством TextBoxID

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

Answer 3

Я провел небольшое исследование и наткнулся на эту статью, в которой, похоже, есть решение вашего вопроса.

Ajax Control Toolkit с ASP.NET MVC #

источник: jimzimmerman

СТАТЬЯ ССЫЛКА

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

QUOTE

Так что, в принципе, если вы поставите имя класса TextboxWatermark на любом вводе текстового поля с названием, которое вы хотели бы показать как водяной знак, как это:

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

или

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

Что хорошего во втором варианте является то, что вы получаете дополнительное преимущество получение View Engine для заполнения значение текстового поля, если есть элемент в ViewData из ViewData.Model с именем var 'Имя пользователя'.

Answer 4

Используйте параметр htmlAttributes с анонимным типом, например, tihs:

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

Answer 5

вспомогательная реализация

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

использование в разделе просмотра

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

результат

Answer 6

Нет необходимости использовать span, потому что он не динамический.

Css:

.testClass {
color: #1600d3;
}

Просмотр (индекс):

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

если вам нужны динамические параметры, вы можете использовать, например:

CSS:

.test class{
background: #ffffff;
}

Контроллер (индекс для теста):

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

Просмотр (индекс):

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

Надеюсь, это поможет.

Answer 7

Это намного больше работы?