6

我有一个 MVC3 应用程序，我需要添加 ajax 加载图像。我把它放在我的视野中

    @using (Ajax.BeginForm(
      "LogOn","Account",
      new AjaxOptions { LoadingElementId = "div_loading" }))

这是我在同一视图上的非常简单的 div：

  <div id="div_loading" style="display:none;">
   <img src="@Url.Content("~/Content/Images/loading.gif")" alt="" />
 </div>

当我单击提交按钮将表单发回时，loading.gif 永远不会出现。我的代码运行良好，但没有显示加载指示器。并且图像的名称正确且位于正确的位置。有谁知道为什么？

更新 显然，这与 Telerik 应用程序有关。如果我创建一个常规的 MVC3 应用程序，它可以工作。当我创建 Telerik MVC3 应用程序时，它不起作用。有其他人在 Telerik 遇到过这种情况吗？

4

4 回答 4

14

你也可以试试这个：这里

function AjaxBegin()
{
    $('#div_loading').show();

}
function AjaxComplete()
{
    $("#div_loading").hide();
}
function AjaxFailure(ajaxContext)
{
    var response = ajaxContext.responseText;
    alert("Error Code [" + ajaxContext.ErrorCode + "] " + response);
}


AjaxOptions:

OnFailure = "AjaxFailure";
OnBegin = "AjaxBegin";
OnComplete = "AjaxComplete";
于 2012-05-30T16:41:39.753 回答
6

我更喜欢避免在我所做的每个 ajax 调用中附加加载 iamge。

这里的最佳答案是每当 ajax 发出发送调用时显示 ajax 微调器（加载图像）的解决方案：

等待ajax时显示微调器

它具有您需要的功能。只需使用 javascript 将图像的显示附加到 ajax 调用。

它应该是这样的：

<script type="text/javascript">
        $(document).ready(function () {
            BindSpinner();
        });

        function BindSpinner() {
            $("#div_loading").bind("ajaxSend", function () {
                $(this).show();
            }).bind("ajaxStop", function () {
                $(this).hide();
            }).bind("ajaxError", function () {
                $(this).hide();
            });
        };
    </script>

这样做是在 ajax 发送时显示 div，并在 ajax 停止或页面上所有调用出错时隐藏它。如果您将此脚本和 div 放在您的 _layout 中，它将为您网站上的每个 Ajax 调用执行此操作。

于 2012-05-30T16:15:59.507 回答
1

你可能想试试这个。我从这里的 SO 问题中得到它

<div id="div_loading" style="visibility:hidden;">
   <img src="@Url.Content("~/Content/Images/loading.gif")" alt="" />
</div>
于 2012-05-30T16:26:43.740 回答
1

我遇到了同样的问题，并且能够通过更改要隐藏/显示的元素的名称来解决它。我使用驼峰格式：“myDivToBeHidden”

该元素需要将“display”属性设置为“none”。

于 2016-07-18T14:18:41.383 回答