ASP.NET MVC: как другие люди применяют условные классы CSS?

Question

Скажем, у меня есть два стиля CSS с именами january и tuesday.Я хочу применить их к некоторым текстовым полям в моем представлении в зависимости от того, будет ли это январь и вторник.

Вариант A: Выполните логику в контроллере и поместите стили в ViewData.

В контроллере:

if( month == Month.January) 
  ViewBag.UserNameCssStyles = "january";
if( today == Day.Tuesday )
  ViewBag.UserNameCssStyles += " tuesday";

И в представлении:

@Html.TextBoxFor(model => model.UserName, new { @class = ViewBag.UserNameCssStyles }

Опция B: сделать логику в контроллере и назначитьстили в представлении?

В контроллере:

ViewBag.IsJanuary = (month == Month.January);
ViewBag.IsTuesday = (today == Day.Tuesday);

И в представлении:

@if (ViewBag.IsJanuary && !ViewBag.IsTuesday) 
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "january" })
}
else if (!ViewBag.IsJanuary && ViewBag.IsTuesday)
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "tuesday" })
}
else if(ViewBag.IsJanuary && ViewBag.IsTuesday)
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "january tuesday" })
}
else
{
  @Html.TextBoxFor(model => model.UserName)
}

Ни один из способов не кажется мне правильным.Первая опция имеет контроллер, связанный с отображением, а также блокирует стили, так что кто-то, работающий с представлением, не может их изменить и, скажем, добавить третий класс.Но второй вариант кажется довольно логичным для того, чтобы быть просто «тупым» видом.

Как другие люди обычно делают это?

Answer 1

Опция C: Выполните логику в контроллере и назначьте стили в представлении, но более простым способом:

В контроллере:

ViewBag.IsJanuary = (month == Month.January);
ViewBag.IsTuesday = (today == Day.Tuesday);

По виду:

@string userNameClass = string.Empty;
@userNameClass += ViewBag.IsJanuary ? "january " : "";
@userNameClass += ViewBag.IsTuesday ? "tuesday " : "";

@Html.TextBoxFor(model => model.UserName, new { @class = userNameClass })

в противном случае ваш контроллер загрязняется из-за проблем просмотра. Пустой класс по большей части безвреден, если вы не гуглите и каждый байт не считается.

Answer 2

Рассматривали ли вы использовать jQuery для присоединения классов CSS? Контроллер должен не знать имена классов css, поскольку это нарушает принцип разделения задач.

То, что вы пытаетесь сделать, - это изменить свой стиль в зависимости от даты, что легко выполняется с помощью jQuery, если вас интересует дата в браузере клиента, а не на сервере, на котором вы размещаете свой веб-сайт ...

например. в главном файле .js вашего сайта введите

$(document).ready(function () {
    var today = new Date();
    if (today.getMonth() == 0) $(".dateStyle").addClass("january");
    if (today.getDay() == 2) $(".dateStyle").addClass("tuesday");
});

Тогда, по вашему мнению, используйте

@Html.TextBoxFor(model => model.UserName, new { @class = "dateStyle" }

Если вам действительно нужно, чтобы оно варьировалось в зависимости от даты на сервере, то, если вы хотите следовать этому подходу, вам нужно будет передать значения, сохраненные в вашем ViewBag, в javascript через объект JSON.

Answer 3

Вариант A - определенно.

Вся логика должна быть размещена в контроллере. Контроллер несет ответственность за передачу всех необходимых данных в представление через модель.

Вместо нескольких if операторов (что немного неприятно) используйте switch или создайте статические словари <Month, string> и <Day, string> для хранения отображений.

Answer 4

Я знаю, что это действительно старая версия, но у меня была такая же проблема, и я обнаружил, что все эти варианты довольно уродливы, особенно если учесть, что если первое условие ложно, а второе верно, вы быостаться с чем-то вроде:

class=" className"

(обратите внимание на пробел перед именем класса)

Я создал HtmlHelper для решения моей проблемы:

public static IHtmlString ClassString(this HtmlHelper helper, Dictionary<string, bool> classes)
{
    return new HtmlString(string.Join(" ", classes.Where(c => c.Value).Select(c => c.Key)));
}

И длясогласованность (если требуется один условный класс):

public static IHtmlString ClassString(this HtmlHelper helper, string classString, bool condition)
{
    return new HtmlString(condition ? classString : "");
}

Затем их можно использовать следующим образом:

@{
    var classes = new Dictionary<string, bool>() {
        { "january", month == Month.January },
        { "tuesday", today == Day.Tuesday }
    }
}
<div class="@Html.ClassString(classes)">...</div>
// OR
@Html.TextBoxFor(model => model.UserName, new { @class = Html.ClassString(classes) })
// OR (for a single condition)
<div class="@Html.ClassString("january", month == Month.January)">...</div>
// OR
@Html.TextBoxFor(model => model.UserName, new { @class = Html.ClassString("january", month == Month.January) })