MVC3 - значок загрузки Ajax - PullRequest
Новая
       9

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

6 голосов
/ 24 июня 2011

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

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

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

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

Ответы [ 3 ]

12 голосов
/ 24 июня 2011

Определите вашу ссылку в качестве ссылки действия 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" />
}
3 голосов
/ 24 июня 2011

Поместите изображение в тег 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

0 голосов
/ 17 июля 2016

Только мои два цента:

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

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

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

...