Question

我有一个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吗？

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

Answer 2

我更愿意避免将加载iamge附加到我所做的每个ajax调用上。

这里的最佳答案是在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调用执行此操作。

Answer 3

您可能想尝试这样做。我是从问题here

中得到的

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

Answer 4

我有同样的问题，并且能够解决它更改要隐藏/显示的元素的名称。我使用了驼峰式格式：＆＃34; myDivToBeHidden＆＃34;

该元素需要＆＃34;显示＆＃34;属性设置为＆＃34;无＆＃34;。

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

4 个答案: