Question

我想将Class添加到我的自定义HTML帮助器中。我正在为图像创建HTML助手。我很困惑如何将类添加到自定义html帮助器中。

任何建议都值得赞赏。

在这种情况下，我需要帮助方法。

<img src=@model.Path alt="Image" class="img-thumbnail" style="height:20px; width:30px;">

代码

 public static IHtmlString Image(this HtmlHelper helper, string src, string alt,string height, string width)
        {
            TagBuilder tb = new TagBuilder("img");
            tb.Attributes.Add("src", VirtualPathUtility.ToAbsolute(src));
            tb.Attributes.Add("alt", alt);
            tb.Attributes.Add("height", height);
            tb.Attributes.Add("width", width);

            return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
        }

Answer 1

    public static IHtmlString Image(this HtmlHelper helper, string src, string alt, string height, string width, params string[] allClasses)
    {
        TagBuilder tb = new TagBuilder("img");
        tb.Attributes.Add("src", VirtualPathUtility.ToAbsolute(src));
        tb.Attributes.Add("alt", alt);
        if (!string.IsNullOrEmpty(height) || !string.IsNullOrEmpty(width))
        {
            StringBuilder value = new StringBuilder();

            if (!string.IsNullOrEmpty(height))
                value.AppendFormat("height:{0};", height);

            if (!string.IsNullOrEmpty(width))
                value.AppendFormat("width:{0};", width);

            tb.Attributes.Add("style", value.ToString());
        }
        if (allClasses?.Any() ?? false)
            tb.Attributes.Add("class", string.Join(" ", allClasses));

        return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
    }

类似的东西吗？

Answer 2

您有以下代码：

<img src=@model.Path alt="Image" class="img-thumbnail" style="height:20px; width:30px;">

有效。现在，您要创建一个html帮助器，因此您创建了它：

public static IHtmlString Image(this HtmlHelper helper, string src, string alt, string height, string width)
{
    TagBuilder tb = new TagBuilder("img");
    tb.Attributes.Add("src", VirtualPathUtility.ToAbsolute(src));
    tb.Attributes.Add("alt", alt);
    tb.Attributes.Add("height", height);
    tb.Attributes.Add("width", width);

    return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
}

，但是此助手不会产生与上面完全相同的html。它将把每个height和width视为单独的属性，并将其呈现：

<img src = @model.Path alt="Image" class="img-thumbnail" height="20px" width="30px">

正确的方式

每当您创建HTML助手时，请查看MVC框架是如何完成的，因为他们会花费大量时间和金钱来制作它，因此您的代码将与他们使用的模式更加内联，并且将更加可重用。

在HTML或HTML帮助器（最终只是呈现HTML）中包含style属性中的任何属性不是一个好主意。更好的方法是将结构和样式的分隔分开：关注点分隔。 MVC框架的方法如下：

public static IHtmlString Image(this HtmlHelper helper, object htmlAttributes)
{
    TagBuilder tb = new TagBuilder("img");
    RouteValueDictionary htmlAttrs = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
    foreach (var thisAttribute in htmlAttrs)
    {
        tb.Attributes.Add(thisAttribute.Key, thisAttribute.Value.ToString());
    }

    return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
}

用法

@Html.Image(new { Src = VirtualPathUtility.ToAbsolute("your path"), Alt = "alt", @Class = "my-stackoverflow-image" })

请注意，我们是如何不将style传递给帮助者的。您希望HTML是自由样式的，并将其保存在CSS文件中。最后，将样式添加到css文件中（MVC创建Site.css，因此您可以使用它），如下所示：

.my-stackoverflow-image {
    height: 20px;
    width: 30px;
}

这很棒，因为如果您要更改样式，则无需重新编译，并且在某些情况下，当您在团队中工作时，前端设计师（CSS专家）可以向其中添加各种精美的CSS。您所需要做的就是告诉前端设计师该图像使用my-stackoverflow-image类。

如何在MVC中将“类”属性添加到“自定义HTML助手”中？

2 个答案: