MVC 4 - 加载消息或图形

本文关键字:图形 消息 加载 MVC | 更新日期: 2023-09-27 18:34:30

是否可以在处理函数时显示加载消息或图形?

我目前有一个控制器,它可以在返回视图之前执行所有功能。但是,由于该功能的一部分包括ServerXMLHTTP进程,因此在连接到第三方服务器时可能需要30秒以上。对于用户来说,这显然不理想,他们在等待xmlHttp.readyState完成时观察到空白屏幕。

任何帮助将不胜感激:-(

MVC 4 - 加载消息或图形

这是一个在页面之间插入自身的 JavaScript 加载页面的示例。此代码在加载之前放置在页面上。我使用了一个简单的提交按钮来提交我的搜索查询。你可以从这里获取ajax加载gif:

http://www.ajaxload.info/

<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=70);display:none">
    <p style="position: absolute; top: 30%; left: 45%; color: White;">
        Loading, please wait...<img src="../../Content/themes/base/images/ajax-loading.gif">
    </p>
</div>
<button type="submit" class="btn btn-success" onclick="JavascriptFunction()"value="filter" name="searchQuery">SUBMIT</button>
 <script type="text/javascript" language="javascript">
function JavascriptFunction() {
    var url = '@Url.Action("PostMethod", "Home")';
    $("#divLoading").show();
    $.post(url, null,
            function (data) {
                $("#PID")[0].innerHTML = data;
                $("#divLoading").hide();
            });
}
</script>

基本上,当用户单击提交按钮时,加载器会出现,直到加载下一个方法/数据/视图。

我发现这个解决方案非常适合我的需求,请参阅http://blog.michaelckennedy.net/2012/11/13/improve-perceived-performance-of-asp-net-mvc-websites-with-async-partialviews/,因为这最有帮助。