使用 MVC 基于枚举值定义 HTML 元素颜色答案

【问题标题】：Define HTML element color based on a Enum value with MVC使用 MVC 基于枚举值定义 HTML 元素颜色
【发布时间】：2016-08-02 13:42:09
【问题描述】：

我的 MVC 项目中有一个问题类别枚举：

public enum QuestionCategory
{
    [Display(Name = "Enum_Category_Overall_Display", ResourceType = typeof(ResQuestion))]
    Overall = 0,
    [Display(Name = "Enum_Category_Service_Display", ResourceType = typeof(ResQuestion))]
    Service = 1,
    [Display(Name = "Enum_Category_Facilities_Display", ResourceType = typeof(ResQuestion))]
    Facilities = 2,
    [Display(Name = "Enum_Category_Team_Display", ResourceType = typeof(ResQuestion))]
    Team = 3
}

而且我需要根据 Enum 的值在 View 中设置图表颜色。

现在我在视图中进行切换：

string color = "";
switch (answer.QuestionCategory)
{
    case Core.Data.Models.QuestionCategory.Overall: color = "#10c469"; break;
    case Core.Data.Models.QuestionCategory.Service: color = "#f9c851"; break;
    case Core.Data.Models.QuestionCategory.Facilities: color = "#188ae2"; break;
    case Core.Data.Models.QuestionCategory.Team: color = "#5b69bc"; break;
}

我在图表中应用颜色：

<round-progress max="5" current="@answer.Numeric" color="@color" semi="isSemi" rounded="rounded" clockwise="clockwise" responsive="responsive"></round-progress>

问题是我需要基于另一个视图中枚举值的颜色，我不想重复代码（DRY）。

【问题讨论】：

请不要把这个处理放在视图中，它不整洁。为了解决可重用性问题，请在后端创建一个辅助方法，以便您可以重复调用它并将处理后的值分配给模型，并将该视图绑定到该模型中
您好，谢谢！但在您看来，样式决定不应该在表示层中做出，在这种情况下，视图？
是的，即使是样式决定，值仍然是硬编码的，我可以在后端完成

标签： c# css asp.net-mvc enums

【解决方案1】：

您可以创建一个 html 帮助程序，如他的回答中提到的 mxmissle。另一种选择是在枚举上创建扩展方法。

public static class QuestionCategoryExtensions
{
    public static string ToColor(this QuestionCategory category)
    {
            switch (category)
            {
                case QuestionCategory.Overall: return  "#10c469"; 
                case QuestionCategory.Service: return "#f9c851";
                case QuestionCategory.Facilities: return "#188ae2"; 
                case QuestionCategory.Team: return "#5b69bc"; 
            }
            return string.Empty;
        }
    }
}

在您看来，您可以简单地在模型的枚举属性上调用它。

假设您的视图模型有一个名为 Catenter code hereegory 类型为 QuestionCategory 枚举的属性

你可以这样做

@Model.Category.ToColor()

此扩展方法可用于视图和控制器代码。

【讨论】：

您可以将它存储在项目中的任何位置。（只需创建一个新类并粘贴它）。只需要确保你有相关的using 语句来导入这个类所属的命名空间（类似于你访问其他类的方式）
可能使用公共枚举 QuestionCategory 命名空间文件
保存在哪里取决于您。我个人创建了一个名为“扩展方法”的目录，并将我的扩展方法类保存在那里。
谢谢@Shyju！我已经检查了您的答案，因为它运行良好并且能够扩展枚举，这是我能够将更多信息加入每个枚举的好方法。很好的解决方案！
是的，我也和他评论过，如果你不说这个答案，我肯定会选择他的。

【解决方案2】：

创建一个 HtmlHelper 扩展：

public static class HtmlHelperExtensions
{
    public static MvcHtmlString QuestionCategoryColor(this HtmlHelper helper, QuestionCategory category)
    {
        string color = "";
        switch (category)
        {
            case Core.Data.Models.QuestionCategory.Overall: color = "#10c469"; break;
            case Core.Data.Models.QuestionCategory.Service: color = "#f9c851"; break;
            case Core.Data.Models.QuestionCategory.Facilities: color = "#188ae2"; break;
            case Core.Data.Models.QuestionCategory.Team: color = "#5b69bc"; break;
         }

        return MvcHtmlString.Create(color);
    }
}

然后在你的视图中使用@Html.QuestionCategoryColor(...)

【讨论】：

您好，谢谢！我认为您的答案很棒，我肯定会使用它，但是扩展 Shyju 的枚举的可能性会更好，因为我可以在项目中的任何地方使用它，而且我现在知道如何将更多信息加入枚举.但再次感谢您。