如何更改绑定到 Razor 页面上模型的特定文本的字体颜色？

Posted 2023-03-27

【中文标题】如何更改绑定到 Razor 页面上模型的特定文本的字体颜色？

【英文标题】：How do I change the font color of a specific text bound to a model on a Razor page?

【发布时间】：2020-05-10 01:48:06

【问题描述】：

我正在构建一个 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 解决方案所需字体设为红色。我没有遇到此代码的任何错误，但字体是黑色的。 在此先感谢您的帮助。

【问题讨论】：

应更新问题以包含所需行为、特定问题或错误以及重现问题所需的最短代码。

变色的标准是什么？这可以通过 CSS 的 nth 选择器来完成吗？

@JohnPavek 标准是如果 EventType 包含“需要 RL 解决方案”字样，则将其显示为红色。我不熟悉第 n 个选择器，但我现在会研究一下。谢谢。

【参考方案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>

【讨论】：

这很完美！我没有意识到我怎么能在 Razor 中做到这一点！谢谢@RC 可乐。

【参考方案2】：

您遇到的问题可能有多种原因。

例如：我看到您在某些 css 中使用了 !important。如果您有另一个跨度标记，其颜色属性也设置为 !important，它将覆盖您插入到 html 中的颜色。

最好的办法是在浏览器的开发工具中检查元素并尝试修改 css 以正确更新那里的颜色。如果您可以在此处更新并描述您所做的更改，则可以更轻松地缩小您在此处遇到的具体问题。

如果您能够使用 css 正确修改元素，并且生成的代码中需要更改某些内容，那么您也许可以从那里着手解决。

【讨论】：

我无法使用开发人员工具更改 CSS，因为我无法使用 $("#eventType").val() 访问数据行中的数据。我很难访问数据，因为它是通过模型动态生成的。开发工具只能让我为屏幕上的静态内容设置样式。