Передайте одно значение модели (строку) в качестве параметра в повторно используемую функцию javascript, чтобы установить класс ячейки таблицы в представлении MVC

Question

Мое представление отображает таблицу, содержащую состояние некоторых данных, сгруппированных в столбцы:

• Готов
• Готово
• Пропущено
• N/ A

У меня каждый раз около 6 столбцов и несколько строк (упрощенный образец, чтобы следовать ниже). Мне нужно установить цвет фона ячейки, что легко сделать с помощью css, однако установив класс стилякаждый раз повторяющийся код в представлении утомительно отнимает много времени для каждого столбца и подвержен ошибкам.

Поэтому я подумал об использовании функции javascript, использующей параметр значения модели (указанное выше состояние) для динамической установкистиль класса css.

Я не уверен на 100%, как это сделать.

Пример кода:

@using NS.Data
@model NS.Models.PublicationsModel


@{
    ViewBag.Title = "PublicationState";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var PublicationState = Model.PublicationState.ToList();
}
@*Below the idea of the intended "reusable" javascript function*@
<script type="text/javascript" language="javascript">
    $(function ToggleCellColour(StepState) {

        switch (StepState) {
            case "Ready":
                return "cssReadyState";
                break;
            case "Done":
                return "cssDoneState";
                break;
            case "Skipped":
                return "cssSkippedState";
                break;
            default:
                return "";
                break;
        }
    });
</script>
<h2>Publication State</h2>

@Html.ActionLink("Back to previous page", "ActionName", "ControllerName", new { returnActive = true }, null)
<table class="table">
    <tr>
        <th>Client</th>
        <th>Availability Communicated to Team</th>
        <th>Schedule Test</th>
        <th>Tested</th>
        <th>Planned Prod Implementation</th>
        <th>Implemented to Prod</th>
    </tr>
    @*Returned Publication States: N/A, Ready, Skipped, Done*@
    @foreach (var PubSt in PublicationState)
    {
           <tr>
                <td>@PubSt.Client</td>
                <td align="center" class="ToggleCellColour(@PubSt.Availability_Communicated_to_Team)"> @*This is where I thought of calling the javascript method to determine the css formatting for the cell*@
                    @if (PubSt.Availability_Communicated_to_Team != "N/A")
                    {
                        if (PubSt.Availability_Communicated_to_Team == "Done" || PubSt.Availability_Communicated_to_Team == "Skipped")
                        {
                            <img src="~/Images/MailClosed.png" />
                        }
                        else @*The "Ready" State*@
                        {
                            <img src="~/Images/MailOpen.png" />
                        }
                    }
                    else
                    {
                        @PubSt.Availability_Communicated_to_Team
                    }
                </td>
                <td align="center" class="ToggleCellColour(@PubSt.Schedule_Test)">
                    @if (PubSt.Schedule_Test != "N/A")
                    {
                        if (PubSt.Schedule_Test == "Done" || PubSt.Schedule_Test == "Skipped")
                        {
                            <img src="~/Images/MailClosed.png" />
                        }
                        else
                        {
                            <img src="~/Images/MailOpen.png" />
                        }
                    }
                    else
                    {
                        @PubSt.Schedule_Test
                    }
                </td>
                <td align="center" class="ToggleCellColour(@PubSt.Tested)">
                    @if (PubSt.Tested != "N/A")
                    {
                        if (PubSt.Tested == "Done" || PubSt.Tested == "Skipped")
                        {
                            <img src="~/Images/MailClosed.png" />
                        }
                        else
                        {
                            <img src="~/Images/MailOpen.png" />
                        }
                    }
                    else
                    {
                        @PubSt.Tested
                    }
                </td>
                <td align="center" class="ToggleCellColour(@PubSt.Planned_Prod_Implementation)">
                    @if (PubSt.Planned_Prod_Implementation != "N/A")
                    {
                        if (PubSt.Planned_Prod_Implementation == "Done" || PubSt.Planned_Prod_Implementation == "Skipped")
                        {
                            <img src="~/Images/MailClosed.png" />
                        }
                        else
                        {
                            <img src="~/Images/MailOpen.png" />
                        }
                    }
                    else
                    {
                        @PubSt.Planned_Prod_Implementation
                    }
                </td>
                <td align="center" class="ToggleCellColour(@PubSt.Implemented_on_Prod)">
                    @if (PubSt.Implemented_on_Prod != "N/A")
                    {
                        if (PubSt.Implemented_on_Prod == "Done" || PubSt.Implemented_on_Prod == "Skipped")
                        {
                            <img src="~/Images/MailClosed.png" />
                        }
                        else
                        {
                            <img src="~/Images/MailOpen.png" />
                        }
                    }
                    else
                    {
                        @PubSt.Implemented_on_Prod
                    }
                </td>
            </tr>
        }
    }
</table>

Можно повторить, еслиКод оператора else, как я делал для отображения изображений, однако я думал, что смогу избавить вас от проблем и внести меньше ошибок, используя функцию javascript для упрощения вещей.

Любая помощь будет принята с благодарностью.

Answer 1

Если вы используете JQuery, вы можете добавить в ячейку атрибут данных, а также некоторый идентификатор (например, имя класса), который позволяет вам нацеливать его, и сделать так, чтобы ненавязчивый JS установил для вас класс CSS:

<tr>
    <td class="coloredCell" data-availability="@PubSt.Planned_Prod_Implementation">stuff</td>
</tr>

Затем используйте JS, чтобы установить цвет готового документа:

$(function ()
{
    $('.coloredCell').each(function (index, element)
    {
        var availability = $(element).attr("data-availability");
        var cssClass;
        switch (availability)
        {
            case "Ready":
                cssClass = "cssReadyState";
                break;
            case "Done":
                cssClass = "cssDoneState";
                break;
            case "Skipped":
                cssClass = "cssSkippedState";
                break;
            default:
                cssClass = "";
                break;
        }
        $(element).addClass(cssClass);
    });
});