Отключение кнопки после нажатия кнопки и ее повторное включение после завершения процесса

Question

Я пытаюсь вызвать метод контроллера, который будет сгенерирован на странице cshtml. Пока контроллер выполняет действие, кнопка должна оставаться отключенной и должна быть включена только после завершения всего процесса. Теперь кнопка отключается, но не включается после завершения процесса. Также, если вы обновите страницу, даже если процесс все еще продолжается, кнопка активируется, что не должно произойти. Есть ли какая-нибудь помощь, как я могу добиться этого?

.cshtml файл

function generate()
{
    $('generate').attr('disabled',true);
    alert('Process started')
    var date=$(#ReportFromDate).val();
    $ajax({
        url:@Url.Content("Home/GenerateReport"),
        type:"POST",
        data:{ReportFromDate:date},
        traditional:true,
        success:function(response) {
            //alert()
        }
    });
};

это где я звоню вышеупомянутый вызов ajax

<input name="generate" id="generate" type="button" value="generate" onclick="generate">

Файл контроллера

[HttpGet]
public ActionResult Report()
{
   var reportModel= new ReportModel;
   return View("Report",reportModel)
}

[HttpPost]
public ActionResult GenerateReport()
{
   this.repository.generateReport(model);
   return View("Report");
}

Answer 1

Проблема в том, что вы отключаете кнопку перед отправкой запроса, но не активируете ее после завершения запроса ajax. Для этого вы должны использовать $('generate').removeAttr('disabled') внутри success, а также error событие вашего запроса ajax.

Примечание: также $('generate') не является правильным, и вы должны получить доступ к элементу с классом с префиксом . или идентификатором с префиксом #.