MVC return 到同一个视图而不刷新同一个视图

Question

我需要调用一个 MVC 控制器函数，然后 return 回到相同的视图而不刷新视图。
上传功能允许多个文件，但我想将其限制为 10 个文件。

当前场景
我在剃须刀页面上有一个上传功能。下面的代码调用了一个 "UploadFiles" 函数。

我想 return 到同一页面而不刷新它。

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

最后，您的控制器操作应该 return 部分视图来更新视图页面内的现有部分，如下所示：

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

    return PartialView("_YourPartialViewName");
}

MVC return 到同一个视图而不刷新同一个视图

MVC return to same view without refreshing the same view

asp.net-mvc

razor

asp.net-mvc-3

asp.net-mvc-4