MVC 5阻止表单提交时刷新页面 [英] MVC 5 prevent page refresh on form submit

问题描述

yBrowser:IE9技术:MVC5

yBrowser: IE9 Technologies: MVC5

我主要将Angular用于页面上的所有内容.(单页应用).

I am mainly using Angular for everything on my page. (Single Page App).

但是因为我正在使用IE9，所以无法使用FileAPI.因此，我决定使用MVC的Form Actions在我的控制器方法中获取HttpPostedFileBase来处理文件上传.

But because I am working with IE9, I can't use FileAPI.. So, I decided to go with MVC's Form Actions to get HttpPostedFileBase in my controller methods to handle fileupload.

HTML代码(以模态形式出现)

@using (Html.BeginForm("UploadTempFileToServer", "Attachment", FormMethod.Post, new { enctype = "multipart/form-data", id = "attachmentForm" }))
{
    <div>
        <span id="addFiles" class="btn btn-success fileinput-button" ng-class="{disabled: disabled}" onclick="$('#fileUpload').click();">
            <span>Add files...</span>
        </span>
        <input id="fileUpload" type="file" name="files" class="fileInput" onchange="angular.element(this).scope().fileAdded(this)" />
    </div>
    <div>
        <span class="control-label bold">{{currentFilePath}}</span>
        <input name="fileUniqueName" value="{{fileUniqueName}}" />
        <input id="attachmentSubmit" type="submit" value="Upload File" />
    </div>
}

MVC控制器:

public void UploadTempFileToServer(IEnumerable<HttpPostedFileBase> files, string fileUniqueName)
    {
        var folderPath = fileStorageFolder;

        foreach (var file in files)
        {
            if (file.ContentLength > 0)
            {
                file.SaveAs(folderPath + fileUniqueName);
            }
        }
    }

问题#1 :有人知道不使用表单的Submit操作将HttpPostedFileBase数据发送到控制器的方法吗?

Question #1: Does anyone know of a way to send the HttpPostedFileBase data to the controller, without using form's submit action?

如果需要的话，我不介意使用Jquery.我尝试劫持表单的提交动作，但没有用.我尝试使用非提交按钮事件发送文件控件的数据，但那里也没有运气.

I don't mind using Jquery if need be. I have tried hijacking the form's submit action and that didn't work. I tried sending the file control's data using non submit button event, but no luck there either.

否:

问题#2 :提交完成执行后，如何防止页面转到/Attachment/UploadTempFileToServer?

Question #2 How do I prevent the page from going to /Attachment/UploadTempFileToServer after the execution of submit is completed?

推荐答案

因此，经过大量研究和尝试.这是我的解决方案:

So, after much research and attempts. This is my solution:

使用 https://github.com/blueimp/jQuery-File-Upload/wiki

HTML:

之前，我使用的是隐藏文件上传控件，并通过跨度触发其点击.但是由于安全问题，JavaScript无法打开由javascript打开的文件输入.

Earlier I was using a hidden file upload control and triggering its click via a span. But because of security issues a file input which is opened by javascript can't be submitted by javascript too.

<div class="col-md-7">
    <div class="fileupload-buttonbar">
        <label class="upload-button">
            <span class="btn btn-success btnHover">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
                <input id="fileUpload" type="file" name="files"/>
            </span>
        </label>
     </div>
</div>

Javascript:

$('#fileUpload').fileupload({
    autoUpload: true,
    url: '/Attachment/UploadTempFileToServer/',
    dataType: 'json',
    add: function (e, data) {
        var fileName = data.files[0].name;
        var ext = fileName.substr(fileName.lastIndexOf('.'), fileName.length);

        var attachment = {
            AttachmentName: fileName,
            Extension: ext
        }

        var fileUniqueName = id + ext;

        //Sending the custom attribute to C#
        data.formData = {
            fileUniqueName: fileUniqueName
        }

        data.submit().success(function (submitData, jqXhr) {
            attachment.Path = submitData.path;

            //Add the attachment to the list of attached files to show in the table.
            $scope.attachmentControl.files.push(attachment);
            //Since this is not a direct angular event.. Apply needs to be called for this to be bound to the view.
            $scope.$apply();

        }).error(function (errorData, textStatus, errorThrown) {

        });
    },
    fail: function (data, textStatus, errorThrown) {

    }
});

C#:

public virtual ActionResult UploadTempFileToServer(string fileUniqueName)
    {
        //Getting these values from the web.config.
        var folderPath = fileStorageServer + fileStorageFolder + "\\" + tempFileFolder + "\\";

        var httpPostedFileBase = this.Request.Files[0];
        if (httpPostedFileBase != null)
        {
            httpPostedFileBase.SaveAs(folderPath + fileUniqueName);
        }
        return Json(new
            {
                path = folderPath + fileUniqueName
            },
            "text/html"
        );
    }

这篇关于MVC 5阻止表单提交时刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！