文件上传AJAX调用

时间:2015-09-02 15:50:25

标签: c# jquery asp.net-mvc asp.net-mvc-4 model-view-controller

我的表格

@using (Html.BeginForm("ViewProjectAssignment", "AssignmentOfProject", FormMethod.Post, new { enctype = "multipart/form-data", @id="formAssignment" }))
{
    @Html.AntiForgeryToken()
    <table class="headertable">            
        <tbody>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>Project Name</b>
                </td>
                <td>
                    @Html.DropDownListFor(mod => mod.ProjectName, Model.ProjectNameList, new { @class = "textBoxDisplay", @id = "ddlProjectName", style = "width:300px;" })
                    @Html.ValidationMessageFor(x => x.ProjectName)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>CEQR Number</b>
                </td>
                <td>
                    @Html.DropDownListFor(mod => mod.CEQRNumber, Model.CEQRNumberList, new { @class = "textBoxDisplay", @id = "ddlCEQRNumber" })
                    @Html.ValidationMessageFor(x => x.CEQRNumber)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>Upload File</b>
                </td>
                <td>
                    @Html.TextBoxFor(mod => mod.File, new { @class = "textBoxFileDisplay", style = "width:600px;", type = "file", multiple = "true", @id = "txtFiles" })
                    @Html.ValidationMessageFor(x => x.File)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;"></td>
                <td>
                    <button name="button" class="button" value="UploadFile" id="btnUploadFiles">
                        Upload File
                    </button>                        
                    &nbsp;
                    <button name="button" value="create" class="button" id="btnClearSeach">
                        Clear
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
}

Jquery的

// AntiForgeryToken 

   var token = $('[name=__RequestVerificationToken]').val();
    var headers = {};
    headers["__RequestVerificationToken"] = token;

// button click event

$('#btnUploadFiles').click(function (event) {
        fnBlockUI();
        event.preventDefault();
        $.ajax({
            url: '@Url.Action("ViewProjectAssignment", "AssignmentOfProject", new { Area = "PrivateCEQRApplication" })',
            type: 'POST',
            dataType: 'json',
            cache: false,
            headers: headers,
            data: {
                ProjectName: $("#ddlProjectName").val(),
                CEQRNumber: $("#ddlCEQRNumber").val(),
                File: $("#txtFiles").val()
            },
            beforeSend: function (xhr, settings) { xhr.setRequestHeader('__RequestVerificationToken', token); },
            success: function (result) {
                $.unblockUI();
                $('body').empty().append(result);
            },
            error: function (xhr, textStatus, errorThrown) {
                $.unblockUI();
                alert("An error occurred while processing your request. Please try again. If the error persists, please email the account administrator .");
            }
        });
    });

控制器方法

[HttpPost]
public ActionResult ViewProjectAssignment(ProjectUploadFiles uploadFiles)
{
    // Upload code here
}

模型

public class ProjectUploadFiles
{
    public string CEQRNumber { get; set; }

    public string ProjectName { get; set; }

    public IEnumerable<HttpPostedFileBase> File { get; set; }
}

问题

  1. 我的应用程序允许用户根据CEQRNumber和相应的ProjectName上传多个文件。 btnUploadFiles click事件发出ajax帖子,将选定的CEQRNumber,ProjectName和Files传递给coltroller。现在的问题是,Action方法从ajax调用获取的参数返回null为文件为IEnumerable(公共ActionResult ViewProjectAssignment(ProjectUploadFiles uploadFiles))

0 个答案:

没有答案