如何在HTML样式中包含CSS样式通过ASP.Net MVC Razor页面生成的代码

如何解决如何在HTML样式中包含CSS样式通过ASP.Net MVC Razor页面生成的代码

我仍然还很早就开始使用ASP.Net MVC。因此，我不确定我是否遵循良好做法。

我想基于CSS样式生成HTML代码

剃刀页面：

@foreach (p in ...)
{
    <td style="@Helper.CustomBackground(p) @Helper.CustomComplexStyle(p)">...</td>
}

CSS类：

.complexStyleA {
   // ...
}

.complexStyleB { }

C＃辅助方法：

// None of the styling method has the "style" attribute,so I can concatenate several custom-styles
public static class Helper
{
    // Basic direct styling
    public static string CustomBackground(object p) => "{ background: red; }";
    
    // More complex styling based on CSS ones
    public static string CustomComplexStyle(object p) => "{ // complexStyleA,complexStyleB,etc. based on p; }"
}

我真的不介意在HTML标记内生成所有代码，但是生成具有数千行的表，显然可以减小文件大小！

感谢您的见解：-）

更新

我认为我会做以下事情：

<td @Html.Raw(@Hepers.ConcatenateCSSClasses(@CustomComplexStyle(p),@OtherCustomComplexStyle(p),...))>
    ...
</td>

在@concatenateCSSClasses()删除所有" class="的情况下，@...Syle(p)返回"class=\"...StyleXYZ\""，除非我可以重复使用标记属性。还有更好的主意吗？

使用更清洁的方法进行更新

public static string HTMLTagAttribute(FieldType fieldType,Field field = null)
{
    string output = "";

    // Makes distinction between hearder and body
    if (field == null)
    {
        output += HTMLHeaderTagClassAttributes(fieldType);
        output += HTMLHeaderTagStyleAttributes(fieldType);
    }
    else
    {
        output += HTMLBodyTagClassAttributes(fieldType,field);
        output += HTMLBodyTagStyleAttributes(fieldType,field);
    }

    return output;
}

仅显示了类和（内联样式）之间有明显区别的主体。我没有详细说明自我说明的samll方法HTMLWidth()，HTMLBackground()等。

#region HTML Body Tag Attribute Methods

private static string HTMLBodyTagStyleAttributes(FieldType fieldType,Field field)
{
    AttributeValues style = new AttributeValues("style");

    style += HTMLWidth(fieldType);
    style += HTMLBackground(fieldType,field);
    style += HTMLAlign(fieldType);

    return style.ToString();
}

private static string HTMLBodyTagClassAttributes(FieldType fieldType,Field field)
{
    AttributeValues cls = new AttributeValues("class");

    cls += HTMLTopBorder(fieldType,field);
    cls += HTMLSideBorder(fieldType);

    return cls.ToString();
}

#endregion

有助于连接类和样式属性值的类（没有多余的空间）。

/// <summary>Class to help format HMTL class and style attribute values</summary>
class AttributeValues
{
    private readonly string _attribute = "";
    private readonly List<string> _values = new List<string>();

    // TODO - Make distinction bewteen class and styles        
    #region Constructors

    public AttributeValues(string attribute)
    {
        _attribute = attribute;
    }

    #endregion

    public static AttributeValues operator +(AttributeValues values,string value)
    {
        if (value != "") values._values.Add(value);

        return values;
    }
    
    public static bool operator ==(AttributeValues values,string value) => values == value;

    public static bool operator !=(AttributeValues values,string value) => values != value;
    
    #region Public Overridden Methods

    public override string ToString()
    {
        string values = "";

        foreach (string value in _values)
        {
            if (values != "") values += " ";

            values += value;
        }

        return values != "" ? $"{ _attribute }=\"{ values }\"" :"" ;
    }

    public override bool Equals(object obj) => base.Equals(obj);
    
    public override int GetHashCode() => base.GetHashCode();
    
    #endregion
}

最后在“剃刀”页面中（显然，由于HTML.Raw()，我不得不将其包装在"中（我同意它可能是th中的折射器，但不会简化代码）：

<td Html.Raw(Helpers.HTMLTagAttribute(Enums.FieldType.Account))>..</td>