Ajax.BeginForm 中的 LoadingElementId 不显示加载图像答案

【问题标题】：LoadingElementId in Ajax.BeginForm not displaying the loading imageAjax.BeginForm 中的 LoadingElementId 不显示加载图像
【发布时间】：2012-05-30 16:06:12
【问题描述】：

我有一个 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 遇到过这种情况吗？

【问题讨论】：

你试过用firebug调试它吗？您的控制台中是否出现任何错误？

标签： c# asp.net-mvc-3

【解决方案1】：

你也可以试试这个：here

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";

【讨论】：

我认为 OnBegin 可能是要走的路，但它没有调用我的方法 AjaxBegin。我这样做 new AjaxOptions { OnBegin = "return AjaxBegin()" })
AjaxOptions 事件采用 javascript 字符串或 javascript 函数名称，因此只要您的 AjaxBegin 函数位于全局命名空间上，它就应该可以工作。如果你去它是否有效：new AjaxOptions { OnBegin ="AjaxBegin" }
@user1202717 嘿，只是想跟进看看这是否适合您？
绝对华丽。这就是我一直追求的。
@BoundForGlory 嘿，只是想跟进看看这是否适合你？

【解决方案2】：

我宁愿避免在我进行的每个 ajax 调用中附加加载 iamge。

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

Display spinner while waiting For 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 调用执行此操作。

【讨论】：

感谢您的回复。我将此添加到我的 _Layout.cshtml 中，但我仍然没有看到加载程序。 ajaxSend 是我需要创建的方法吗？
看起来很明显，但图像是否已加载到您的项目中？尝试将替代文本设置为某些内容以确保显示 div。哦，确保你的 div 也在 _layout 中。
是的，它就在那里。如果我删除 style="display:none" 并刷新，则会显示 gif。相信我，我先看了。
尝试在 div 上设置 z-index 可能图像没有在前面加载。 style='z-index:1234';

【解决方案3】：

您可能想试试这个。我是从 SO 问题 here

中得到的

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

【讨论】：

我用手指交叉尝试过，它没有工作:(我设置了一个示例项目，它工作。我将它移到我的主项目，但它没有。但这看起来很简单。我隐藏了和之前显示的对象
您的加载 gif 是否有可能没有被复制到您的输出目录？ Build Action 是否设置为 Content 和 Copy To Output 是否设置为 Copy Always/Copy If Newer？
我认为 display:none 是正确的。我都试过了，有问题的方法对我有用。

【解决方案4】：

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

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

【讨论】：