javascript - 如何更改绑定(bind)到 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。只需使用 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>
}