jQuery 函数在 MVC 局部视图中不起作用

Question

在我的部分视图中的 .hide 函数最初不为第二和第三人称渲染，然后延迟 .hide 和 .fadein 也将不起作用。我是 js 和 jquery 的新手，所以我可能遗漏了一些明显的东西……为什么这个 js 脚本不能在局部视图中工作？

当一切都在主视图中时一切正常，但我需要部分视图的原因是因为我不想每 15 秒重新加载整个页面。我做了一些研究，获取 html 数据类型可能有问题？

主视图：

 @model IEnumerable<project.Models.MyList>

<div id="scrolllist">
    @Html.Partial("_ScrollList")
</div>

@section Scripts{
<script>
function loadScrollListPV() {
   $.ajax({
    url: "@Url.Action("ScrollList")",
    type: 'GET', // <-- make a async request by GET
    dataType: 'html', // <-- to expect an html response
    success: function(result) {
                $('#scrolllist').html(result);
             }
   });
}
$(function() {
    loadScrollListPV();
    // re-call the functions each 15 seconds
    window.setInterval("loadScrollListPV()", 15000);
});
</script>
}

控制器动作：

     public ActionResult ScrollList()
    {
        return PartialView("_ScrollList", db.MyList.ToList());
    }

局部视图：

 @model IEnumerable<project.Models.MyList>

<div id="firstperson">
@*Get lastest record and display.*@
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Take(1))
{
}
</div>

<div id="secondperson">
@*Get second lastest record and display.*@
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Skip(1).Take(1))
{
}
</div>

<div id="thirdperson">
@*Get third lastest record and display.*@
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Skip(2).Take(1))
{
}
</div>

@section Scripts{
<script>
$("#secondperson").hide();
$("#thirdperson").hide();
function person() {
    $("#firstperson").delay(5000).hide(0, function () {
        $("#secondperson").fadeIn();
        $("#secondperson").delay(5000).hide(0, function () {
            $("#thirdperson").fadeIn();
            $("#thirdperson").delay(5000).hide(0, function () {
                $("#firstperson").fadeIn();
                person();
            });
        });
    });
}
</script>
}

任何帮助都会很棒，并在此先感谢！

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在这里不是 100% 确定，但我认为根据此 答案 在部分视图中呈现 @script 部分可能存在问题。提到分部视图默认不能使用@section 元素。

尝试删除脚本部分周围的剃刀语法并只使用：

 <script type="text/javascript">
    $("#secondperson").hide();
    $("#thirdperson").hide();
    function person() {
    $("#firstperson").delay(5000).hide(0, function () {
        $("#secondperson").fadeIn();
        $("#secondperson").delay(5000).hide(0, function () {
        $("#thirdperson").fadeIn();
        $("#thirdperson").delay(5000).hide(0, function () {
            $("#firstperson").fadeIn();
            person();
        });
    });
});
}
</script>

原文由 MUlferts 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

1. 删除 @section Scripts{ 并且您的代码将起作用。

---

1. 你应该避免 hide() 和 fadeIn() 的回调地狱。如果有 10 divs ，则必须添加 10 层该代码。在您的部分视图中，以下方法适用于任意数量的 divs ：

您可以为您的 div 分配一个 class 。默认情况下仅使第一个 div 可见。创建一个每 5 秒调用一次的函数。

 // gets the currently visible div. Hides it.
// If this is last content `div`, shows the first div, else shows the next div
function incremental() {
  $visible = $(".content-div:visible");
  $visible.hide();

  $visible.next().is('.content-div')
    ? $visible.next().fadeIn()
    : $(".content-div").first().fadeIn();
}

setInterval(incremental, 3000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content-div">first content</div>
<div class="content-div" style="display:none">second content</div>
<div class="content-div" style="display:none">third content</div>

此 partialIntervalRef 变量将在 global 范围（主视图）中定义。每次加载局部视图之前，您都应该清除它。

 <script>
    var partialIntervalRef;

    function loadScrollListPV() {
        clearInterval(partialIntervalRef);
        -----
        ----
        }

这比使用回调更清晰和可扩展。

---

1. window.setInterval("loadScrollListPV()", 15000) 应该改为 window.setInterval(loadScrollListPV, 15000)

原文由 adiga 发布，翻译遵循 CC BY-SA 4.0 许可协议