Question

我确实有一个MVC5 C＃View（剃刀作为视图引擎）从数据库发送和检索信息，它不使用jQuery，AJAX或JSOn进行异步调用，因此每次刷新/重新加载视图将信息发送到数据库。

我想向用户显示一个图像（发送图像），以便让用户知道页面（MVC视图）正在运行并且等待，我在页面中有jQuery代码，并尝试过：

<script language="JavaScript" type="text/javascript">
    $(window).load(function () {
        $('#cargando').hide();
    });
</script>

<style type="text/css">
    #cargando {
        width: 350px;
        height: 70px;
        clear: both;
        background-color: #FFFF00;
        color: #CC0000;
    }
</style>

并且有这个div

<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>

但不起作用，请你告诉我如何在视图再次从actio'控制器渲染之前显示图像？

这是我的观点

<div class="section">
    <div class="container">
        <div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
        <div id="loading">
        <br />
        <div class="jumbotron">
           <div class="container">
                <img src="~/Imagenes/logo%logo.png" class="img-responsive" />
                <div class="row well">
                    <div>
                        <img src="~/Imagenes/Portada.jpg" style=" height:40%; width:100%" />  <p style="margin-left: 10px">
                        @*<img src="~/Imagenes/Edificio.jpg" style="height:3%; width:100%" />*@
                        <h4>BIENVENIDO ...</h4>
                        <p>xxx permite ... </p>
                    </div>
                </div>
             </div>
        </div>

Answer 1

没有ajax就不可能，因为当你回发到你的服务器时，它会发回一个新的HTML页面，浏览器会从头开始处理。要向用户显示不同页面之间或同一页面的不同回发之间的加载图像，您必须使用ajax请求，或者您可以使用iframe，这将比ajax更复杂，并且在这种情况下不是首选。

以下jQuery方法将有所帮助： $ .load $就和$ .get

Answer 2

如果您想要显示＆＃34;加载叠加层＆＃34;因为您的服务器往返需要一段时间，您可以使用javascript执行此操作。新页面加载将重新隐藏加载屏幕。

放置＆＃34; overlay div＆＃34;在主要内容之外，位于sshpass -p 'password' rsync -avz /source/folder/ root@192.168.x.x:/dest/folder结束标记之前的页面末尾：

</body>

您的按钮看起来像这样：

<div id="overlay" class="overlay">
  <div class="loader"></div>
  <!-- Alternatively you can have some text here -->
</div>

叠加层的一些CSS：

<button id="mvc-action-button">
  Some Action
</button>

使用以下JS显示加载屏幕：

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

.overlay {
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.8);
  position: absolute;
  z-index: 100;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

在此jsfiddle中一并查看。

请注意，我已使用flexbox将内容集中在叠加页面上，这可能不适用于所有浏览器（虽然现代浏览器应该没问题）。

警告：如果您的后续页面加载由于某种原因而挂起或失败，则用户将被卡在加载屏幕或白屏上，并且必须刷新页面。

在等待MVC视图显示时显示等待图像

2 个答案: