Question

当我尝试使用以下基于研究的代码时，我试图弄清楚为什么加载图像似乎永远循环：我在这里包含了javascript文件：spin.min.js。在我看来：

<script type="text/javascript" src="@Url.Content("~/Scripts/spin.min.js")"></script> 
<script type="text/javascript">
$(function () {
    $("#link_button").click(function () {
        $("#loading").fadeIn(); 
        var opts = { lines:12, length: 7,width: 4,radius: 10, color: '#000',speed: 1,trail: 60,shadow: false,hwaccel: false};
        var target = document.getElementById('loading');
        var spinner = new Spinner(opts).spin(target); 
    });
});
</script>
@Ajax.ActionLink("Update", "Edit", new { id = item.tbl_id },new AjaxOptions {HttpMethod = "Get",InsertionMode = InsertionMode.Replace, UpdateTargetId = "edit-div",}, new { @class = "link-list", @id = "link_button" })
<div id="edit-div"></div>
<div id="loading">
       <div id="loadingcontent">
            <p id="loadingspinner">Searching things...</p>
       </div>
</div>

在我的控制器中：

public ActionResult History(int id = 0) 
{
    Thread.Sleep(100);
    var transaction = db.Transactions_vw.Where(x => x.trans_id == id && x.status == false).OrderByDescending(s => s.trans_id).ToList().Take(3);
    return PartialView("List", transaction);
}

当我尝试单击ajax链接时，它会在div部分显示结果，但加载图像仍然存在。它不会停止。这在我使用表单时有效。当我在表单中使用它时没有问题，但在ajax链接中我遇到了这个bug。怎么解决这个问题？感谢。

Answer 1

首先，在您返回部分视图后，您不会隐藏加载div。一旦初始化，它将始终存在！接下来页面中的#submitbtn位于哪里？

最后根据你所遵循的内容，我建议你在页面中加入一件事

$( document ).ajaxComplete(function( event, xhr, settings ) {
        $("#loading").hide(); 
    }
});

因此，无论何时您的ajax请求完成，都将运行并加载div将被隐藏。只需检查xhr和settings中的选项，即可了解ajax调用的状态，并在ajaxComplete中执行必要的操作。

Ajax.AjaxLink加载程序映像

1 个答案: