Помощники по стилю 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 с использованием ASP.NET MVC#

Источник:джимциммерман

ССЫЛКА НА СТАТЬЮ

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

Цитата

Итак, в принципе, если вы добавите имя класса 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" }) %>

Что приятно во втором варианте , так это то, что вы получаете дополнительное преимущество заставляя механизм просмотра заполнять значение текстового поля, если есть элемент в ViewData из ViewData.Модель, у которой есть переменная с именем 'username'.

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

Неужели так много еще работы?