使用 javascript 在 MvC 5 中突出显示答案

【问题标题】：Highlighting in MvC 5 using javascript使用 javascript 在 MvC 5 中突出显示
【发布时间】：2017-03-21 11:19:30
【问题描述】：

我试图在视图中比较两个值以查看它们是否相等，如果它们相等则不要突出显示它们是否不相等然后突出显示新值。我正在尝试的一切都不起作用，谁能举例说明我做错了什么？

<div>
     Old Registered Host Name:
     @Html.DisplayFor(model => model.OldHostName, new { htmlAttributes = new {@id = "oldhostname"}})
</div>
<div>
     Registered Host Name:
     @Html.DisplayFor(model => model.NewHostName, new { htmlAttributes = new {@id = "newhostname"}})
</div>
<script type="text/javascript">
       $(document).ready(function(){
     if(document.getElementById('oldhostname').value != document.getElementById('newhostname').value)
      { 
        document.getElementById('newhostname').style.backgroundColor = "#FDFF47";
      }
});
</script>

【问题讨论】：

@Html.DisplayFor() 不会生成 html 元素 - 只是文本（而您的 new { htmlAttributes... } 毫无意义，什么也不做（查看您生成的 html）- 您没有任何带有 id="oldhostname" 的元素或id="newhostname"
ummm 太好了，因为@Html.DisplayFor() 不会生成 html 元素，所以我无法以我想要的方式使用它。当我检查元素时，没有像 @Html.EditorFor 那样的元素 ID。对不同的路线还有其他建议吗？
这有什么意义（为什么在编辑值时不处理它）？ - 但 Dymos 的回答显示了一种解决方案）
因为有人需要审查更改并批准更改，个人希望查看数据库中已有的内容以及正在更改的内容。如果这两个值不同，他们希望突出显示更改的值，我不希望正在审查的个人能够更改数据。主机名只是显示的一项我还有大约 20 个其他项目需要显示数据库中的旧值和正在更改的新值。突出显示更改的值使审阅者更容易
你不需要 javascript - 你可以在从服务器生成视图时应用一个类名

标签： javascript c# html asp.net-mvc-5

【解决方案1】：

我的 C#/cshtml 有点生锈，但看起来这只会渲染一些带有一些文本内容的 div。为了得到你需要的东西，你需要要么

呈现具有您要检查的文本内容的 ID 的元素
使用具有您要检查的值的 ID 呈现输入

您的 JS 使用 HTMLElement.value，这对于 div 的任何元素都无效，例如没有 value

如果生成的 HTML 类似于：

<div> Old host name: <span id="oldhostname">...</span> </div>
<div> New host name: <span id="newhostname">...</span> </div>

然后你可以检查 JS 中的值

var old = document.getElementById('oldhostname').textContent;
var new = document.getElementById('newhostname').textContent;
if (old !== new) {
    console.log('different!');
}

【讨论】：