如何更改綁定到 Razor 頁面上模型的特定文本的字體顏色？

Question

我正在構建一個 ASP.NET Core Web 應用程序，並希望將我的結果表中的某些文本設置為與表的其余部分不同的顏色。 例如：

我試圖在 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>
}

以下是 Razor 頁面上的 JavaScript 代碼：

 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 字體變成紅色。 我沒有遇到此代碼的任何錯誤，但字體是黑色的。 在此先感謝您的幫助，我們將不勝感激。

Answer 1

您不需要為此使用 Javascript。 只需使用剃刀。

@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>
}

Answer 2

您遇到的問題可能有多種原因。

例如：我看到您在某些 css 中使用了 important，如果您有另一個 span 標簽，其顏色屬性也設置為 .important，它將覆蓋您插入到 html 中的顏色。

最好的辦法是檢查瀏覽器開發工具中的元素並嘗試修改 css 以正確更新那里的顏色。 如果您可以讓它在那里更新並描述您所做的更改，那么將更容易縮小您在這里遇到的具體問題的范圍。

如果您能夠使用 css 正確修改元素並且需要在生成的代碼中更改某些內容，您可以從那里開始並弄清楚。