ajax.actionlink загрузка img / div - PullRequest
Новая
       12

ajax.actionlink загрузка img / div

1 голос
/ 31 марта 2012

Я хочу сделать так: http://ajaxload.info/

вот мой код: 

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

Я хочу добавить img / div в article_1И это не ждет 3 секунды.Должен ли я спать контроллер 3 секунды тоже?

Спасибо.

Ответы [ 2 ]

1 голос
/ 04 апреля 2012 
<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
}
0 голосов
/ 23 апреля 2015

ваш код работает очень хорошо. просто удалите вещи LoadingElementDuration. сохранить отображение: нет атрибута css. и
- использовать браузер Chrome Canary.
- нажмите F12 (на Chrome Canary), чтобы активировать инструменты разработчика
- установите скорость на тест низкой скорости (возможно, gprs), чтобы увидеть загрузку div

вот и все.
нет необходимости в дополнительном скрипте, например oncomplete / onbegin

...