Question

使用 ASP .Net MVC 4.0 ， vs10 ， MSSQL 2008

我有一个存储过程，它在我的一个页面中执行。执行通常需要30到50秒。我想显示一个警告对话框，在此过程中将加载gif图像。我正在使用sqlcommand执行存储过程。该过程从单击“处理”按钮开始。完成该过程后，该页面返回另一个视图。

我对javascript知之甚少，所以请给我一个简单的方法。

修改

是否可以在按钮上显示图像并执行其他代码隐藏过程？

像：

<script type="text/javascript">
    function showImage() {
        document.getElementById('Processing').style.visibility = visible;
    }
</script>

<div id="progessbar">
     <img alt="Processing" src="../../Images/Processing2.gif" id="Processing" style="visibility:hidden"/>
</div>

Answer 1

由于请求需要很长时间，因此很难以传统的MVC方式完成您尝试做的事情。使用AJAX可以更好地完成这项任务，异步处理您的请求。我建议还使用jQueryUI对话框或任何模式来显示进度指示器，甚至是任何自定义JS。

我个人喜欢jQuery BlockUI为我创建模态，但这只是一种偏好。

/** Using a wrapper to show/hide the progress indicator.
    Swap the blockUI with any library or custom JavaScript for displaying the progress indicator.
 */
var showProgress = function() {
    $.blockUI({ message: '<img src="progressImage.gif" />' });
};

var hideProgress = function() {
    $.unblockUI();
;}

/** Trigger to submit the form */
$('#submit').click(function() {
    /** Show an indicator before making an AJAX request*/
    showProgress();
    $.ajax({
        url: '/someEndpoint',
        data: $.toJSON({/* some JSON param */}),
        type: 'POST', 
        dataType: 'json',
        timeout: 50000 /** Override timeout in ms accordingly */

    }).done(function(data){
        /** Remove the indicator once the request has succeeded and process returned data if any. */
        hideProgress();
    });
    return false;
});

Answer 2

使用ajax进行处理。它将进行“显示gif”并完成所需代码的并行处理。您可以通过以下方式使用JQuery-AJAX页面方法：[1]：http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

成功回调包含一个带有返回数据的参数。

或者你可以试试这个

var actionURL = "(Your disired action e.g /index.jsp)"
$.ajax({
cache:false,
url: actionURL,
beforeSend: function( xhr ) {
    xhr.overrideMimeType( 'text/plain; charset=UTF-8' );
    $("#progessbar").show();
    //Here you can write any code to execute before the action like gif loading etc
},
success: function( data ) {
    alert("Success Conditions");
    //"data" is what u gets from your target. You can see by alert(data); here
    //Here you can write any code which you want to execute on finding the required action successfully
},
complete: function(){
    alert("Complete Conditions");
    $("#progessbar").hide();
    //Here you can write any code which you want to execute on completion of the required action you given in actionURL
},
error: function(){  
    alert("Error Conditions");
}
});

注意：警报只是为了解释，您也可以编写自己的代码对于此代码，您必须包含jquery个插件。可以从他们的官方网站下载[l]：http://jquery.com/

使用javascript进行警报对话

2 个答案: