Показывать сообщение проверки при отправке формы с помощью ajax в ASP.NET MVC

Question

В частности, в проекте ASP.Net MVC я хочу показать загрузку изображения с помощью jQuery, когда вызывается моя публикация формы на сервер и метод следующего действия, так как после входа в систему загрузка следующей страницы занимает слишком много времени.

Я пытался onclick () метод javascript на кнопка отправки :

<input type="submit" onclick="jsFunction()">

Также onsubmit () метод формы :

<form onsubmit="jsFunction"> ... </form>

или

@using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { onsubmit = "jsFunction()" }))
{

В обоих случаях оба вызова вызываются даже при наличии локальных ошибок проверки.

Я должен показывать загрузку img только тогда, когда форма отправляется на сервер, удовлетворяющий локальным ошибкам проверки.

Есть идеи, каким образом это может быть достигнуто?

Answer 1

Сначала добавьте значение атрибута id для вашей формы следующим образом:

@using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { id = "yourFormId" }))
{
}

Теперь вы можете проверить, является ли ваша форма действительной или нет, используя jQuery, следующим образом:

$(document).ready(function(){
    $("#yourFormId").on('submit',function(){
        if($("#yourFormId").valid())
        {
           // here write code to show loading image.
        }
   });
});

Убедитесь, что ваше представление формы содержит следующие файлы скриптов:

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>