Question

这是我的代码：

<!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放在第1条中。它不是等待3秒。我应该把控制器睡3秒钟吗？

感谢。

Answer 1

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

Answer 2

您的代码运行良好。只需删除LoadingElementDuration东西。 keep display：none css属性。和
- 使用“Chrome Canary”浏览器。
- 按F12（镀铬金丝雀）激活开发人员工具
- 将速度设置为低速测试（可能是gprs）以查看加载div

这就是全部。
不需要额外的脚本，如oncomplete / onbegin

ajax.actionlink正在加载img / div

2 个答案: