在 Asp.Net MVC 2 中调用控制器的进度条答案

【问题标题】：Progress bar on calling controller in Asp.Net MVC 2在 Asp.Net MVC 2 中调用控制器的进度条
【发布时间】：2010-12-22 21:09:35
【问题描述】：

我想在用户提交表单时显示进度条，因为该过程可能需要大约 8 到 10 秒，所以我想显示进度条，因此用户必须知道需要多少时间。此过程将在简单调用控制器操作时执行，如正常回发，不涉及 ajax。那么我如何才能完成这项任务，我正在使用 asp.net mvc 2

【问题讨论】：

你怎么知道它需要 8 到 10 秒？如果您确实知道如何以编程方式获取该值，那么您可以使用简单的 ajax 制作进度条。不知道您在哪里以及何时完成任务，就不可能制作进度条。

标签： asp.net-mvc progress-bar

【解决方案1】：

弗拉兹，

虽然我注意到你说不涉及 AJax，但我想我会把它扔进去以供参考。

只要您不关心显示确切进度的“请稍候”指示器，那么使用 jquery 有一种简单的方法可以做到这一点，我在这里的回答取决于此。

基本上，创建一个“等待”视图，其中包含一条简单消息以及嵌入其中的动画 gif。然后只需通过以下基本大纲启动您的插入（或长时间运行的操作）：

$(document).ready(function() {
    $('#btnSave').click(function() {
        $.ajax({
            type: "POST",
            url: '<%=Url.Content("~/Booking/Save") %>',
            data: { data: prepareData() }, // your data properties to be saved
            beforeSend: beforeQuery(),
            success: function(data) {
                saveDataResponse(data);
            },
            error: function(xhr) { alert(xhr.statusText); }
        });

    });
});

// here we show the 'wait' view prior to processing starting
function beforeQuery() {
    var url = '<%= Url.Action("Wait", "Booking") %>';
    $("#mainDiv").load(url);
}

// when the long running process has completed (or error'd)
// either populate mainDiv with the details view of the booking 
// or show the error appropriately
function saveDataResponse(data) {
    if (data.length != 0) {
        if (data.indexOf("ERROR:") >= 0) {
            $("#mainDiv").html(data).css('backgroundColor','#eeaa00');
        }
        else {
            $("#mainDiv").html(data);
        }
    }
}

显然，错误条件等会涉及更多内容，但这是基本的“模板”。

希望对你有帮助

【讨论】：