MVC3 — значок загрузки Ajax

Я хотел бы показать значок загрузки AJAX во время запроса ActionResult, обработка которого может занять несколько секунд.

Каков наилучший подход для достижения этой цели?

Я хочу отображать значок только после прохождения встроенной проверки (я использую MVC3, EF Code First, поэтому проверка автоматически помещается на страницу).

Во время ActionResult могут быть дополнительные проверки/исключения, и в этом случае пользователю отображается сообщение, и я бы хотел, чтобы значок загрузки снова исчез.


ajax asp.net-mvc asp.net-mvc-3 actionresult
person mp3duck    schedule 24.06.2011    source источник
comment
здесь есть хороший небольшой плагин github .com/bstaley/ajax-auto-loading/blob/master/ будет автоматически показывать и скрывать загрузочное изображение при каждом вызове ajax.   -  person Brandon.Staley    schedule 02.05.2014

Ответы (3)


arrow_upward
12
arrow_downward

Определите свою ссылку как ссылку действия Ajax и укажите идентификатор вращающегося GIF-файла где-нибудь на вашей странице.

<div id="result"></div>
<img id="spinner" src="../content/ajaxspinner.gif" style="display: none;">
@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null)

или если это форма:

@using(Ajax.BeginForm("Action", "Controller", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null))
{
   @Html.TextBox("Data")<br/>
   <input type="submit" value="Submit" />
}
person Chris    schedule 24.06.2011
comment
@Chirs спасибо за ваш ответ. Это не совсем работает для меня. 1. У меня не появляется значок счетчика, когда я нажимаю «Отправить». 2. Когда я возвращаю пользователя на страницу из ActionResult, он добавляет? Длина = 10 в конец моего URL-адреса? Я использовал ваш второй пример - person mp3duck; 24.06.2011
comment
Редактирование @Crhis: я добавил null в свойство значений маршрута, и это остановило бит ?Length=10. Так это просто тот факт, что он не отображает значок сейчас? - person mp3duck; 24.06.2011
comment
У меня не получается. Кто может помочь или дать альтернативу? - person Gelásio; 27.06.2013

arrow_upward
3
arrow_downward

Поместите изображение в тег div следующим образом:

<div id="busydiv" style="display:none;"><img src="busything.gif" /></div>

а затем создайте свою ссылку следующим образом:

@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions { LoadingElementDuration = 1000, LoadingElementId = "busyDiv", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }, null)

или в форме сделать это:

@using (Ajax.BeginForm("TestAjax", new AjaxOptions { LoadingElementDuration=1000, LoadingElementId="dave", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }))

Очевидно, опуская те AjaxOptions, которые вам не нужны, в соответствии с приведенной здесь документацией: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx

person Tom Chantler    schedule 24.06.2011

arrow_upward
1
arrow_downward

Просто мои два цента:

Решение, опубликованное Крисом, действительно и будет работать, НО вы должны добавить ссылку на две приведенные ниже библиотеки javascript. Обратите внимание, что порядок имеет значение:

<script src="~/scripts/jquery-1.8.0.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>

Когда вы создаете приложение MVC с предварительно загруженным пакетом и всеми этими пакетами nu-get, это, вероятно, не будет для вас проблемой, но если вы, как и я, создали пустое приложение ASP.NET MVC, у вас могут возникнуть проблемы.

person Denys Wessels    schedule 17.07.2016