在 PartialView 中运行 jQuery 代码

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：我还测试了从视图中调用索引文件内的简单 javascript 函数，如下所示：

    <script>
    checkMatch();
    </script>

我可以传递“否”或“是”之类的值，然后根据输入参数更改输入元素。但是我不确定在插入 PartialView 中的代码时是否进行了调用。

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

编辑：4 现在似乎可以正常工作了！当我移开最初在 jQuery document.ready 代码中的 javascript 函数时，它通过调用索引文件中的函数来工作！感谢所有试图帮助我的人！它不适用于 jQuery .addClass，但它可以与 .css 一起使用，以这种方式更改元素的背景颜色。我的问题解决了！

Answer 1

实现此目的的更简单方法是在从服务器返回 HTML 之前将适当的 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>
}