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

У меня есть модель:

public class FileUploadModel
{
    [Required(ErrorMessage = "Select file(s) to upload.")]
    [Display(Name = "Browse")]
    public HttpPostedFileBase[] Files { get; set; }

    [Display(Name = "File Type")]
    public EFileType FileType{ get; set; }
}

У меня есть форма:

@using (Html.BeginForm("FileExchange", "General", FormMethod.Post, new { enctype = "multipart/form-data", id = "uploadform" }))

Метод в контроллере:

[HttpPost]
public async Task<ActionResult> FileExchange(FileUploadModel model)
{
    await UploadFiles(model);
    return View("FileExchange");
}

И я пробовал что-то вроде следующего в javascript / ajax:

<script>
    $(document).ready(function () {
        $("#preloader").hide(); //the wait indicator
        $('#uploadform').on('submit', function (e) {
            e.preventDefault();

            var formdata = new FormData($('#uploadform').get(0));

            $("#preloader").show();

            var url = '@Url.Content("~/General/FileExchange/")'
            //var dataModel = $(this).serialize();
            $.ajax({
                url: url,
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                //dataType: "json",
                success: function (resp) {
                    $("#preloader").hide();
                },
                error: function (resp) {
                    $("#preloader").hide();
                }
            });
        });
    })
</script>

Индикатор ожидания работает, НО метод не работает.

Когда я добавляю модель в функцию отправки:

$('#uploadform').on('submit', model, function (e)

Метод POST сработал, но индикатор ожидания перестал работать. Похоже, что функция «отправить» больше не работает.

Есть идеи, как решить эту проблему?

-1
Janco de Vries 1 Май 2018 в 14:49

1 ответ

Лучший ответ

Я искал немного дольше и нашел решение своей проблемы:

<script type="text/javascript">
    $(document).ready(function () {
        $("#preloader").hide();
    })

    $('#uploadform').on('submit', function () {

        $("#preloader").show();

        $('#uploadform').ajaxForm({
            url: '@Url.Content("~/General/FileExchange")',
            dataType: 'json',
            success: function () {
                $("#preloader").hide();
            }
        })
    })
</script>

Таким образом, я могу показать индикатор, когда срабатывает on 'submit', и скрыть индикатор, когда метод POST из заданного URL-адреса успешно выполнен.

0
Janco de Vries 1 Май 2018 в 14:02