Question

我的View（Index.cshtml）中有一个jquery函数......

<script type="text/javascript">
    // call ASP.NET MVC Controller and return value of Checkboxes as string array
    function SerializeMappings()
    {
        var matches = [];

        $('[class^="mappings_"]:checked').each(function () {
            matches.push(this.value);
        });

        $.post("/Home/Validate", { listofmappings: matches }, function (data) {
            document.write(data);
        });
    }
</script>

此函数调用此函数：

    // POST: Home/Validate
    [HttpPost]
    public ActionResult Validate(string[] listOfMappings)
    {
       //Some code which takes Long time (~10-15sec)
       //....
       //fill List<List<string>> with data and return it to Validate.cshtml

       return View(anyStringList);
    }

现在我真正的问题：如何在'验证'功能运行时显示加载圈...？提前谢谢。

Answer 1

你有一些不同的方法。

<小时/> 基本的一个是在帖子之前显示微调器并在调用结束时隐藏它，如下所示：

// Here you show the spinner
...
$.post("/Home/Validate", { listofmappings: matches }, function (data) {
    document.write(data);
})
.always(function() {
    // Here you hide the spinner
    ...
});;

<小时/> 另一种方法，如果您使用布局并且想要标准化和集中管理微调器，则使用jQuery Global Ajax Event Handlers。

首先，让jQuery知道当你启动Ajax请求时，你想要显示将在你的布局中找到的微调器：

$.ajaxSetup({
    beforeSend: function () {
        // Here you show your spinner
        ...
    }
});

每个请求完成后，您只需隐藏微调器：

$(document).ajaxComplete(function () {
    // Here you hide the spinner
    ...
});

Azim在评论中建议使用ajaxStart和ajaxStop完成同样的事情。

显示加载微调器，而jquery在ASP.NET MVC中调用Controller

1 个答案: