MVC html Пользовательский помощник для идентификатора состояния

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

При использовании 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> 

Answer 2

Вы можете комбинировать метки и теги div this way.

Кроме того, вам необходимо добавить display: inline-block; в свой стиль, чтобы отображать ярлык рядом с div.

Answer 3

Вы можете использовать свойство 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());