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

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

你也可以尝试这个:这里

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微调器(加载图像)的解决方案:

等待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调用执行此操作.