Question

问候，

有没有人能帮助我如何在点击按钮时使用ASP.NET MVC实现Jquery Progress Spinner，请

提前谢谢你。

Answer 1

我最终使用了这些优秀的资源：

简单易行。

Answer 2

所以我发现这个问题正是我想要的，但我不喜欢官方答案的概念......为什么？使用AJAX提交表单很好但是你失去了ASP MVC的功能和他将@model返回给View的概念，并且通过使用AJAX你还需要改变很多代码来返回在Controller内部的AJAX / JSON响应（将ActionResult的返回更改为JsonResult等）。我不想丢失ActionResult return View(model)的输出，因为它非常方便（特别是jQuery Validation挂钩到模型）...所以我想出了使用以下内容代替：

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    ...

    <div class="form-group">
        <button id="saveBtn" type="submit" class="btn btn-primary">Save</button>
        @Html.ActionLink("Back to List", "Index")
    </div>
}

@section Scripts {
    <!-- jQuery ASP Validation -->
    @Scripts.Render("~/Scripts/jqueryval")

    <script type="text/javascript">
        $(document).ready(function () {
            // clear error summary from inside our global variable (defined in _layout view)
            window.App.errorSummary = {};

            // Attach click handler to the submit button
            // from there, attach a spinner but only if no error summary are showing
            $('#saveBtn').click(function () {
                // has to be inside a timer else it would be triggered too late
                setTimeout(function () {
                    if (window.App.errorSummary.numberOfInvalids < 1) {
                        // your spinner here... in my case spinner.js
                    }
                }, 50);
            });
        });
    </script>
}

并且您还必须扩展jQuery Validator对象，但最好将其扩展到_Layout视图中，从那里我的代码如下所示：

window.App = {
    baseUrlArea: '@((ViewContext.RouteData.Values["area"] == null) ? "" : ViewContext.RouteData.Values["area"])',
    baseUrl: '@Url.Content("~/")',
    language: '@((ViewContext.RouteData.Values["language"] == null) ? "en" : ViewContext.RouteData.Values["language"])',
    controller: '@ViewContext.RouteData.Values["controller"]',
    action: '@ViewContext.RouteData.Values["action"]',
    errorSummary: {}
};

$(document).ready(function () {
    // extend the jquery validator object to keep track of error summary 
    // save summary inside the global (window.App) variable
    if (typeof $.validator !== "undefined") {
        $.validator.setDefaults({
            showErrors: function (errorMap, errorList) {
                window.App.errorSummary.numberOfInvalids = this.numberOfInvalids();
                window.App.errorSummary.errorMap = errorMap;
                window.App.errorSummary.errorList = errorList;

                $("#summary").html("Your form contains "
                  + this.numberOfInvalids()
                  + " errors, see details below.");
                this.defaultShowErrors();
            }
        });
    }            
});

您可能会想，为什么还要为numberOfInvalids而烦恼？好吧，不这样做会使微调器在点击“保存”按钮时出现，尽管我们只希望它在验证错误摘要为空时显示...有意义吗？所以，你去了，我们现在通过jQuery验证重新获得ASP / MVC的全部功能！我们的微调器只有在必须显示时才显示出来。甜！！！：）

Answer 3

$.ajax({
type="get",
url="someurl.html",
dataType:"html",
beforeSend(jqXHR, settings)
{
     //append spinner image to some html element
},
success:function(data)
{
    //manipulate data
},
Complete:(jqXHR, textStatus)
{
    //Remove spinner from the page
}
});

Answer 4

Showing loading animation in center of page while making a call to Action method in ASP .NET MVC

Answer 5

假设您在进行过程中有500个项目（文件/其他）要处理，...

您必须单独处理每件物品。

然后遍历所有项目并且：

对ItemController中处理单个项目的“处理”操作进行$ .ajax调用
返回json结果代码
如果没问题，请将jquery进度向上移动一步
如果失败，要么执行下一个，要么取消整个过程（根据您的要求）

Answer 6

您可以使用ajaxStart / ajaxStop。 jQuery 1.8示例：

$(document).ready(function () {
        $("#btnShowSpinner").click(ajaxToExecute); // wire up click event for the button
        (function () { $("#loading").hide(); })(); // hide the spinner initially
        $(document).ajaxStart(function () { $("#loading").show(); }); // show spinner when ajax request executes
        $(document).ajaxStop(function () { $("#loading").hide(); });// show spinner when ajax request completes
});

在页面标记中添加一个包含微调器的div，以显示给用户：

<input id="btnShowSpinner" type="button" value="Show Spinner" />
<div id="loading"><img src="spinner.gif" /></div>

Ajax电话：

function ajaxToExecute() {
    $.ajax({
        cache: false,
        type: "POST",
        url: myURL
        data: { "id": id},
        success: function (data) {
            updateDiv.html(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
                   alert('Request failed.\nError: ' + thrownError);
               }
    });
}

此设计还允许在页面上重用任何其他ajax请求的微调器。

Answer 7

该问题迟到了聚会，但是任何寻求NONE AJAX方法或使用html.BeginForm的人，那么这里的答案都对我有所帮助。

Activating loading animation by Html.BeginForm submission

答案摘要（如果已删除或链接中断）：

首先，向表单添加一个ID，以便您可以使用JQuery来获取它：

@using (Html.BeginForm("SData", "Crawl", FormMethod.Post, new { id = "myform" }))
{
    // the form
}

接下来，添加一个Javascript事件处理程序以拦截表单提交并显示正在加载的GIF。

$("#myform").submit(function(e) {
    $("#myLoadingElement").show();
});

MVC Jquery Progress Spinner提交

7 个答案: