Question

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

我在DAL，BL，Controller和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 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状态inidicator的自定义帮助程序

3 个答案: