Как изменить цвет шрифта указанного c текста, привязанного к модели на странице Razor? - PullRequest
Новая
       24

Как изменить цвет шрифта указанного c текста, привязанного к модели на странице Razor?

2 голосов
/ 23 января 2020

Я создаю базовое веб-приложение ASP. NET и хотел бы стилизовать определенный текст в моей таблице результатов в цвет, отличный от остальной таблицы. Например:

The desired result

Я пытаюсь сделать это в JavaScript, но, похоже, возникают проблемы, потому что данные генерируются на странице из модели после кнопки поиска нажимается с выбранными параметрами. Вот что у меня на странице HTML Razor: 

@foreach (var item in Model.SecurityLog)
{
  <tr>
  <td style="width:7% !important" id="eventType">
      @Html.DisplayFor(modelItem => item.EventType.Name)
  </td>
  <td style="width:9% !important">
      @Html.DisplayFor(modelItem => item.ContactName)
  </td>
}

Вот код JavaScript, который также находится на странице Razor: 

 var text = document.getElementById("searchString");
 var str = text.innerHTML;
 var reg = /RL Solution Required/ig;

 var toStr = String(reg);
 var search = (toStr.replace('\/g', '|')).substring(1);
 var searches = search.split("|");

 if (searches.indexOf("RL Solution Required") > -1) {
    str = str.replace(/RL Solution Required/g, '<span style="color:red;">R/L Solution Required</span>');
 }
 document.getElementById("searchString").innerHTML = str;

Я пытаюсь получить шрифт RL Solution Required красным. Я не испытываю никаких ошибок с этим кодом, но шрифт черный. Заранее спасибо и любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 23 января 2020

Вам не нужно использовать Javascript для этого. Просто используйте Razor. 

@foreach (var item in Model.SecurityLog)
{
  <tr>
  <td style="width:7% !important">        
      @{
        string eventType = item.EventType.Name;
      }
      @if(eventType.Contains("RL Solution Required"){
        <span style="color:red;">@Html.DisplayFor(modelItem => eventType)</span>
      }else{
        @Html.DisplayFor(modelItem => eventType)
      }          
  </td>
  <td style="width:9% !important">
      @Html.DisplayFor(modelItem => item.ContactName)
  </td>
}
0 голосов
/ 23 января 2020

Проблема, с которой вы столкнулись, может быть по ряду причин.

Например: я вижу, вы используете! Важный в некоторых ваших css. Если у вас есть другой тег span со свойством color, для которого также установлено значение! Important, он будет переопределять цвет, который вы вставляете в html.

. Лучше всего проверить элемент в инструментах разработчика браузера и попробуйте изменить css, чтобы правильно обновить цвет там. Если вы сможете обновить его там и описать, что вы изменили, вам будет легче сузить конкретную проблему c, которая у вас здесь есть.

Если вы МОЖЕТЕ правильно изменить элемент, используя css и что-то нужно изменить в сгенерированном коде, вы можете просто go оттуда и выяснить это.

...