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

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

1 个答案: