MVC html 状态指示器的自定义助手

Question

我正在尝试在我的应用程序顶部创建一个服务器状态图标。关闭时显示为红色，打开时显示为绿色。

我已经在我的 DAL、BL、控制器和 ViewModel 中完成了所有肮脏的工作，因此我的页面上有一个 div 元素，它根据服务状态更改颜色。我的问题是我无法在 div 旁边添加标签。

public static class ServerStatusIconHelper
{
    public static MvcHtmlString ServerStatusIconHelper(this HtmlHelper htmlHelper, bool isServerActive)
    {
        // Main container
        var div = new TagBuilder("div");
        bool isActive = isServerActive;
        var labelValue = isActive ? "The server status is On" : "The server status is Off";

        if (isActive)
        {
            div.Attributes.Add("id", "server-warning-on");
            div.Attributes.Add("style", "background-color: green; height:25px; margin-bottom: 10px; border-radius: 25px; width: 25px; margin-left: 10px;");
        }
        else
        {
            div.Attributes.Add("id", "server-warning-off");
            div.Attributes.Add("style", "background-color: red; height:25px; margin-bottom: 10px; border-radius: 25px; width: 25px; margin-left: 10px;");
        }

        return new MvcHtmlString(div.ToString());
    }
}

我将不胜感激一些帮助，因为我不知道添加一个带有段落元素的 div 将提供 labelValue。另外，如果有人有更好的想法就更好了。

Answer 1

您可以组合标签和 div 标签 this way。

此外，您需要在样式中添加 display: inline-block; 才能在 div 旁边显示标签。

Answer 2

可以使用InnerHtml属性的标签。

var labelValue = isActive ? "The server status is On" : "The server status is Off";
div.InnerHtml = labelValue;

或者如果您想将 span 元素与 div 连接起来，您可以

var span = new TagBuilder("span");
span.InnerHtml = labelValue;

和 return 作为

return new MvcHtmlString(div.ToString() + span.ToString());

Answer 3

使用TagBuilder时可以使用InnerHtml属性或SetInnerText方法设置标签内容：

InnerHtml：获取或设置元素的内部 HTML 值。
SetInnerText：将元素的 InnerHtml 属性设置为指定字符串的 HTML 编码版本。

这是一个例子：

var div = new TagBuilder("div");
div.AddCssClass("someClass");
div.MergeAttribute("id", "someId");
div.InnerHtml = "Some Text or Html Tag";
var result=  div.ToString();

生成此输出：

<div class="someClass" id="someId">Some Text or Html Tag</div>

MVC html 状态指示器的自定义助手

MVC html Custom helper for a status inidicator

html

c#

asp.net-mvc

html-helper