Discussion :

[zeprogrameur]

Bonjour,
Ma méthode Index() de mon controller doit charger des données en db : cela dure 5-6 s.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
public ActionResult Index()
{       
<div style="margin-left:40px"> //chargement dans la DB...
return View();</div>}

Je voudrais afficher un ui dialog pendant ce temps.
Problème, je n'ai aucun code HTML chargé à ce moment-là.
J'ai pensé à faire ça en asynchrone sans succès :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
public ActionResult IndexAsync()
{       
<div style="margin-left:40px">return View("Splashscreen", null);</div>}
 
public ActionResult IndexCompleted()
{
<div style="margin-left:40px"> //chargement dans la DB...
return View();</div>}

Est-il de possible d'afficher une vue au démarrage (vue d'attente) puis de passer à la vraie vue quand le chargement est fini?

[katkiller]

Salut,

Tu crée une vue assez simple qui ne demande pas de long temps de traitement.

Et dans ta vu tu fais un appel Ajax qui va aller récupérer tes données.

Dans l'exemple ci-dessous il ne faut pas oublier d'inclure JQuery.

Controller :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    public class TestApiController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

ApiController :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
public class TestApiApiController : ApiController
    {
        public HttpResponseMessage GetById(int id)
        {
                Thread.Sleep(10000);
                string retValue = "Le retour";
                return Request.CreateResponse(HttpStatusCode.OK, retValue);
            }
}

Vue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
    <label id="lblTest"></label>
<label id="lblError"></label>
@section scripts
{
<script type="text/javascript">
var apiUrl = "api/TestApiApi"
$(document).ready(function () {
$.getJSON(apiUrl + '/' + 1)
                .done(function (data) {
                    $("#lblTest").text(data);
                })
                .fail(function (jqXHR, textStatus, err) {
                    $('#lblError').text('Error: ' + err);
                });
});
</script>
}

Je n'ai pas testé ce code... j'ai fait un copié coller(renommer) d'un code qui fonctionne donc il peut manquer un ou deux trucs mais l'idée est là !

Pour info mais a utiliser plus tard : Il y a des libraires JS pour faire du Binding (Angular, Knockout, ...)