Ajax.ActionLink в MVC3 Razor и загрузка картинок не работает должным образом - PullRequest
Новая
       3

Ajax.ActionLink в MVC3 Razor и загрузка картинок не работает должным образом

0 голосов
/ 03 апреля 2012

Я использую AjaxOptions в Ajax ActionLink, и я подумал, что загрузочный 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>

Ответы [ 2 ]

0 голосов
/ 03 апреля 2012

Мне удалось настроить функцию 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: Как использовать $ (this) внутри MVC3 Ajax.ActionLink OnBegin, OnComplete Events

В итоге я применил изменения, найденные в ответе выше, к jquery.unobtrusive-ajax.js. ИМО гораздо чище решение.

0 голосов
/ 03 апреля 2012

Вы вызываете функции вместо того, чтобы дать им ссылку:

Изменить с: 

@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 , вызываемой перед обновлением страницы.

* 1021 MSDN *

То же самое для OnComplete ( MSDN )

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...