Как сделать загрузку на кнопке asp.net mvc?

259
07 апреля 2017, 23:02

Есть вот такая ajax форма для переписки:

@using (Ajax.BeginForm("SendMessage", "Order", new AjaxOptions { UpdateTargetId = "herepls", OnSuccess = "document.getElementById('Message_Text').value='';" }))
@Html.HiddenFor(model => model.Order.Id)
<div class="messSender">
    <div class="col-sm-9 col-md-9">
        @Html.TextAreaFor(model => model.Message.Text, 3, 70, new { htmlAttributes = new { @class = "form-control", id = "textarea" } })
        @Html.ValidationMessageFor(model => model.Message.Text, "", new { @class = "text-danger" })<br />
    </div>
    <div class="col-sm-3 col-md-3">
        <input type="submit" value="Send" class="btn btn-default" style="margin-top:18px; margin-left: 13px;" />
    </div>
</div>
<div id="herepls">
    <div class="messagePage">
       //тут логика вывода сообщени
    </div>
</div>

Мы вводим текст в поле ввода и можем нажать 2-3 раза кнопку "Send" и пока идёт ajax запрос оно может отправить 2-3 сообщения, в зависимости от нагруженности метода. Как этого избежать? Я думал можно как-то сделать как в вк, если вдруг какие-то задержки, то кнопка Отправить становиться не нажимаемой и вместо слова "Отправить" идёт загрузка.

Answer 1

Как подсказал "teran" из комментариев:

при отпраке формы дизейблите, отправка проходит после успешной валидации. это в AjaxOptions.OnBegin и обратно в OnComplete

Вот как выглядят ajaxOptiоns :

@using (Ajax.BeginForm("SendMessage", "Order", new AjaxOptions { UpdateTargetId = "herepls", OnSuccess = "OnSuccess",OnBegin="disableBut" }))

сама кнопка:

<input type="submit" id="ourButton" value="Send" class="btn btn-default" style="margin-top:18px; margin-left: 13px;" />

и собственно скрипт:

    <script>
function disableBut() {
    ourButton.disabled = true
}
function OnSuccess() {
    ourButton.disabled = false
}
</script>
READ ALSO
Помогите с добавить значения в массив

Помогите с добавить значения в массив

Не получается добавить значение в массив, что делаю не так?

321
Баг с owl carousel 2 и history.back(); или обновлением страницы

Баг с owl carousel 2 и history.back(); или обновлением страницы

При обновлении страницы или переходом на неё через historyback(), содержимое прыгает в верх, а не остается на месте с сохранением истории, проблема...

266
Вынести div из блока с overflow

Вынести div из блока с overflow

Есть панель навигации, фиксированная

282