MVC вернуться к тому же представлению без обновления того же представления - PullRequest
Новая
       13

MVC вернуться к тому же представлению без обновления того же представления

0 голосов
/ 09 января 2019

Мне нужно вызвать функцию контроллера MVC и вернуться к тому же представлению без обновления представления.
Функция загрузки позволяет несколько файлов, но я хотел бы ограничить его до 10 файлов.

Текущий сценарий
У меня есть функция загрузки на странице бритвы. Код ниже вызывает функцию «UploadFiles».

Я бы хотел вернуться на ту же страницу, не обновляя ее. 

 @using (Html.BeginForm("UploadFiles", "Mycontroller", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            @Html.LabelFor(model => model.files, htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.TextBoxFor(model => model.files, "", new { @type = "file", @multiple = "multiple" })
            @Html.ValidationMessageFor(model => model.files, "", new { @class = "text-danger" })
            <div class="form-group">
            <input type="submit" value="Upload" class="btn btn-primary" />
            </div>
        }

Код контроллера выглядит следующим образом 

[HttpPost]
     public ActionResult UploadFiles(HttpPostedFileBase[] files)
        {
            //code inputstream file to bytes
            return View();
        }

Я также пытался использовать, но он перенаправляет на другую страницу. 

public void UploadFiles(HttpPostedFileBase[] files)
            {
                //code inputstream file to bytes
                return View();
            }

1 Ответ

0 голосов
/ 11 января 2019

Как уже говорил @Sahil Sharma, вам нужно использовать обратный вызов AJAX, чтобы остаться на той же странице, вместо обычной отправки формы с помощником @Html.BeginForm() и использовать частичное представление для отображения формы, содержащей элемент ввода файла.

Вы можете создать FormData объект для хранения нескольких файлов из файлового ввода перед передачей его в запрос AJAX:

Просмотр (кнопка отправки формы) 

<input id="submit" type="submit" value="Upload" class="btn btn-primary" />

JQuery 

$('#submit').on('click', function (e) {

    // preventing normal form submit
    e.preventDefault();

    // create new FormData object
    var formData = new FormData();

    // check total amount of uploaded files in file input
    var filesLength = $("#files")[0].files.length;

    // check if the file length exceeds 10 files
    if (filesLength > 10) {
        alert("You can upload at maximum of 10 files");
        return false;
    }
    else {
        // append files to FormData object and send with AJAX callback
        for (var i = 0; i < filesLength; i++) {
            formData.append("files", $("#files")[0].files[i]);
        }

        $.ajax({
            url: '@Url.Action("UploadFiles", "Mycontroller")',
            type: 'POST',
            data: formData,
            // other AJAX options here

            success: function (result) {
                // update partial view here
            }
            error: function (xhr, status, err) {
                // error handling
            }
        });
    }
});

Наконец, действие вашего контроллера должно возвращать частичное представление, чтобы обновить существующую часть на странице представления, например: 

[HttpPost]
public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)
{
    //code inputstream file to bytes

    return PartialView("_YourPartialViewName");
}

Смежные вопросы:

Опубликовать несколько файлов по списку

Загрузка нескольких файлов HTML5 и ASP.Net MVC Ajax

как загрузить несколько изображений в asp.net mvc с помощью ajax

...