Ajax.ActionLink chargement img/div

Je veux faire comme ceci: http://ajaxload.info/Ajax.ActionLink chargement img/div

voici mon code:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
</head> 
<body> 
<div id="div_loading" style="display:none;"> 
    <img src="ajax-loading.gif" /> 
</div> 

    <nav class="menu"> 
    <ul> 
      <li>@Ajax.ActionLink("link1", "Index1", "Home", new AjaxOptions { UpdateTargetId = "article_1", LoadingElementId = "div_loading", LoadingElementDuration = 3000 })</li> 
      <li>@Ajax.ActionLink("link2", "Index2", "Home", new AjaxOptions { UpdateTargetId = "article_1", LoadingElementId = "div_loading", LoadingElementDuration = 3000 })</li> 
      <li>@Ajax.ActionLink("link3", "Index3", "Home", new AjaxOptions { UpdateTargetId = "article_1", LoadingElementId = "div_loading", LoadingElementDuration = 3000 })</li> 
      <li>@Ajax.ActionLink("link4", "Index4", "Home", new AjaxOptions { UpdateTargetId = "article_1", LoadingElementId = "div_loading", LoadingElementDuration = 3000 })</li> 
    </ul> 
</nav> 
<article class="site_content" id="article_1"> 
     @RenderBody() 
    </article> 
</body> 
</html>

Je veux img/div placé dans le article_1. Et il n'attend pas 3 secondes. Devrais-je dormir contrôleur 3 secondes aussi?

Merci.

Source

2012-03-31 AliRıza Adıyahşi

<img id="image_loading" alt="" src="@Url.Content("~/content/loading.gif")" class="progress" /> 

.progress { 
display: none; 
position: fixed; 
top: 50%; 
left : 50%; 
margin-top: -50px; 
margin-left: -100px; 
} 

@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { 
OnBegin = "onBegin", 
OnComplete = "onComplete", 
UpdateTargetId = "article_site" 
}) 

function onBegin() { 
// TODO: show the progress image 
} 

function onComplete() { 
// TODO: hide the progress image 
}

Source

2012-04-04 13:00:44

votre code fonctionne très bien. il suffit de supprimer stuffs LoadingElementDuration. keep display: aucun attribut css. et
- utilisez le navigateur "Chrome Canary".
- appuyez sur F12 (en canari chrome) pour activer les outils de développement
- Réglage de la vitesse à essai à faible vitesse (gprs peut-être) pour voir le chargement div

c'est tout.
pas besoin de script supplémentaire comme oncomplete/onbegin

Source

2015-04-23 16:52:08

Ajax.ActionLink chargement img/div

Répondre

Questions connexes