Question

我在Ajax ActionLink中使用AjaxOptions，我认为加载gif会显示在UpdateTargetId（containerDiv）中，而不是。我还期望加载gif与LoadingElementDuration一样长，但它没有。无论我使用的持续时间--GIF加载并快速淡出（并且看起来缩小而不是直接淡化）。我在代码中遗漏了一些阻止预期行为发生的事情吗？

@{
    ViewBag.Title = "Index";
}
 <script type="text/javascript">

     function OnBeginAjax() {

         var item = $("#spanBegin");
         item.text("Begin Request Fired!");

     }

     function OnCompleteAjax() {
         var item = $("#spanComplete");
         item.text("Complete Request Fired!");
     }
    </script>
<h2>Index View</h2>
<div id="spinner_container">
    <img id="spinner" src="@Url.Content("~/content/themes/base/images/ajax-loader.gif")" class="hidden"/>
</div>
<br />
<br />
<span id="spanBegin">Begin Request.....</span><br/>
<span id="spanComplete">Complete Request.....</span>
<div>
@Ajax.ActionLink(" << Fire Ajax Link", "AjaxMethod", new AjaxOptions
               {
                   UpdateTargetId = "containerDiv",
                   LoadingElementId = "spinner",
                   LoadingElementDuration = 100000,
                   OnBegin = "OnBeginAjax",
                   OnComplete = "OnCompleteAjax"

               })
</div>
<div id="containerDiv"></div>

如果我拥有（以及我所看到的）是预期的行为（这看起来很无用） - 关于如何将UpdateTargetId作为参数传递给OnBegin函数的任何想法？

这是呈现的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<h1>
    MVC Sandbox Test Site</h1>
<body>
     <script type="text/javascript">
     $(document).ready(function () {
         //            function OnBeginAjax() {
         //                alert("Begin no params");
         //                //               debugger;
         //                //               var item = $("#activityDiv");
         //            }

         //            function OnCompleteAjax() {
         //                alert("Complete no params");
         //            }
     });
     function OnBeginAjax() {
         //alert("Begin no params");
         //               debugger;
         var item = $("#spanBegin");
         item.text("Begin Request Fired!");

     }

     function OnCompleteAjax() {
         var item = $("#spanComplete");
         item.text("Complete Request Fired!");
     }
    </script>
<h2>Index View</h2>
<div id="spinner_container">
    <img id="spinner" src="/content/themes/base/images/ajax-loader.gif" class="hidden"/>
</div>
<br />
<br />
<span id="spanBegin">Begin Request.....</span><br/>
<span id="spanComplete">Complete Request.....</span>
<div>
<a data-ajax="true" data-ajax-begin="OnBeginAjax" data-ajax-complete="OnCompleteAjax" data-ajax-loading="#spinner" data-ajax-loading-duration="100000" data-ajax-mode="replace" data-ajax-update="#containerDiv" href="/Home/AjaxMethod"> &lt;&lt; Fire Ajax Link</a>
</div>
<div id="containerDiv"></div>

</body>
</html>

Answer 1

您调用函数而不是提供引用：

更改自：

@Ajax.ActionLink(" << Fire Ajax Link", "AjaxMethod", new AjaxOptions
               {
                   UpdateTargetId = "containerDiv",
                   LoadingElementId = "spinner",
                   LoadingElementDuration = 100000,
                   OnBegin = "OnBeginAjax()", /// <<<<<=
                   OnComplete = "OnCompleteAjax()" /// <<<<<=
               })

要：

@Ajax.ActionLink(" << Fire Ajax Link", "AjaxMethod", new AjaxOptions
{
   UpdateTargetId = "containerDiv",
   LoadingElementId = "spinner",
   LoadingElementDuration = 100000,
   OnBegin = "OnBeginAjax", /// <<<<<=
   OnComplete = "OnCompleteAjax"/// <<<<<=
})

AjaxOptions.OnBegin属性

在页面更新之前调用的 JavaScript函数名称。

MSDN

OnComplete（MSDN）

也是如此

Answer 2

我能够自定义OnBegin函数并传入一个我可以在被调用的方法中使用的参数：

<div>
@Ajax.ActionLink(" << Fire Ajax Link", "AjaxMethod", new AjaxOptions
               {
                   UpdateTargetId = "containerDiv",
                   LoadingElementId = "spinner",
                   LoadingElementDuration = 100000,
                   OnBegin = "OnBeginAjax('containerDiv')",
                   OnComplete = "OnCompleteAjax"

               })
</div>

在调用方法中，我创建了jquery以在我想要的地方添加我的loading.gif效果，以及我需要的持续时间。

<强> Ammendment： How to use $(this) inside MVC3 Ajax.ActionLink OnBegin,OnComplete Events

我最终实现了上面对jquery.unobtrusive-ajax.js的回答中找到的更改。 IMO更清洁的解决方案。

MVC3 Razor中的Ajax.ActionLink和加载的gifs没有按预期工作

2 个答案: