MVC返回相同视图而不刷新相同视图

Question

我需要调用 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();
            }

Answer 1

正如@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");
}

相关问题：

Post multiple files by List<HttpPostedFileBase>

HTML5 Multiple File Upload and ASP.Net MVC Ajax

how to upload multiple image in asp.net mvc using ajax