CODEWITHSUNDEEP
cssasp.net-mvcasp.net-ajaxcontroller
AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

ajax.actionlink loading img/div

I want to do like this : http://ajaxload.info/

here is my 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>

I want to img/div placed in the article_1. And it is not waiting 3 seconds. Should I sleep controller 3 seconds too?

Thanks.

Upvotes: 1

Views: 2388

Answers (2)

Fables Alive
Fables Alive

Reputation: 2810

your code is working very well. just remove LoadingElementDuration stuffs. keep display:none css attribute. and
- use "Chrome Canary" browser.
- press F12(in chrome canary) to activate developer tools
- set speed to low speed test (gprs maybe) to see loading div

thats all.
no need extra script like oncomplete / onbegin

Upvotes: 0

user1291494
user1291494

Reputation: 

<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
}

Upvotes: 1

Related Questions