Question

根据模型是否有任何内容，我想在视图中使用jQuery更改HTML元素的背景颜色。但这并不像我想的那样工作，因为文档已经加载到DOM中，而PartialView只是更改了文档的一小部分，而且脚本的运行次数不会超过第一次。有没有办法以另一种方式解决这个问题？

这是我认为应该有效的代码：

@if (Model.Any())
{
<script>
    $(document).ready(function () {
        $("#Filter").addClass("match");
    });

    console.log("Det matchar!!");
</script>

Show content of list here

}
else
{
<p>No Match!</p>

<script>
    $(document).ready(function () {
        $("#Filter").addClass("noMatch");
    });
    console.log("Ingen match!!");
</script>
}

编辑1：它是我想要更改的输入元素，它位于index.cshtml文件中。

编辑2：我还测试过从View中调用索引文件中的一个简单的javascript函数，如下所示：

    <script>
    checkMatch();
    </script>

我可以传递像＆＃34; no＆＃34;或＆＃34;是＆＃34;然后根据输入参数改变输入元素。但我不确定插入PartialView中的代码时是否进行了调用。

编辑：3抱歉，我忘了写部分视图是用AJAX更新的。我想这可能是一个问题！？

编辑：4现在看起来它正在运作！当我移开javascript函数时，它最初是在jQuery document.ready代码中，它通过调用索引文件中的函数来工作！谢谢所有试图帮助我的人！并且它不能与jQuery .addClass一起使用，但它与.css一起使用来改变元素的背景颜色。我的问题解决了！

Answer 1

实现这一目标的一种更简单的方法是在从服务器返回之前将适当的CSS类添加到HTML中。有很多方法可以用Razor来做到这一点，但也许最简单的方法就是这样：

 @if (Model.Any()) {
     <div id="Filter" class="match">
 }
 else {
     <div id="Filter" class="noMatch">
 }

Answer 2

document.ready不会在这里工作。直接在脚本标签中使用js代码。

试试这个

@if (Model.Any()) {
<script>
  $("#Filter").addClass("match");

  console.log("Det matchar!!");
</script>

Show content of list here } else {
<p>No Match!</p>

<script>
  $("#Filter").addClass("noMatch");

  console.log("Ingen match!!");
</script>
}

在PartialView

2 个答案: