HttpPostedFileBase null, когда я пытаюсь загрузить изображение в asp .net mvc5 с помощью js knockout?

Question

Я пытаюсь загрузить изображения в asp .net mvc 5 с нокаутом js, и ParaFrame PhotoFile, который имеет тип HttpPostedFileBase, приходит ко мне пустым, и я не могу загрузить изображение, я новичок в работе с Knockout js Iхотел бы, чтобы кто-нибудь помог мне с этим,

Это модель,

    public int LenderId { get; set; }
    public string GenderId { get; set; }
    public string GenderName { get; set; }
    public string Email { get; set; }
    public bool IsActive { get; set; }
    public string PhotoPath { get; set; }
    public HttpPostedFileBase PhotoFile { get; set; }

Это HTML,

        <div class="form-group">
            <span class="control-label col-md-2"><strong>Foto:</strong></span>
            <div class="col-md-10">
                <span class="btn btn-default btn-file">
                    <input type="file" class="form-control" id="PhotoUpload" name="PhotoUpload" data-bind="attr:{src: PhotoPath}" />
                </span>
            </div>
        </div>

Это JS

function lenderModel () {var lenderModel = this;

lenderModel.LenderId = ko.observable();
lenderModel.FirstName = ko.observable();
lenderModel.MiddleName = ko.observable();
lenderModel.FirstLastName = ko.observable();
lenderModel.SecondLastName = ko.observable();
lenderModel.IdentificationCard = ko.observable();
lenderModel.GenderId = ko.observable();
lenderModel.GenderName = ko.observable();
lenderModel.Email = ko.observable();
lenderModel.IsActive = ko.observable();
lenderModel.PhotoPath = ko.observable();
lenderModel.CreateBy = ko.observable();
lenderModel.CreationDate = ko.observable();
lenderModel.ModifiedBy = ko.observable();
lenderModel.ModifiedDate = ko.observable();

}

lenderViewModel.Create = function () {
    if (lenderViewModel.IsNew()) {
        $.ajax({
            url: '/AdminLenders/Create',
            data: ko.toJSON(lenderViewModel.LenderModel()),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            async: true,
            success: function (data) {
                if (data.Success) {
                    LoadGenders();
                    LoadListLenders();
                    $('#TextboxFirstName').val('');
                    $('#TextboxMiddleName').val('');
                    $('#TextboxFirstLastName').val('');
                    $('#TextboxSecondLastName').val('');
                    $('#TextboxIdentificationCard').val('');
                    $('#TextboxEmail').val('');
                    $('#ComboBoxGenders').val('');
                    $('#TextboxIsActive').prop('checked', false);
                    swal("Prestamista creado!", "Se ha registrado correctamente!", "success")
                }
                else {
                    swal("Error creando el prestamista!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};

Поскольку я новичок в этом нокауте js, я не знаю, как его реализовать, помогите оценить вклад и помощь

Answer 1

Я предположил, как выглядит метод Create на контроллере, и придумал это, используя объект FormData.

lenderViewModel.Create = function () {
    if (lenderViewModel.IsNew()) {
            var lender = lenderViewModel.LenderModel();    

        var lenderData = new FormData();

        // Build up a matching Lender
        lenderData.append("LenderId", lender.LenderId());
        lenderData.append("GenderId", lender.GenderId());
        lenderData.append("GenderName", lender.GenderName());
        lenderData.append("Email", lender.Email());
        lenderData.append("IsActive", lender.IsActive());
        lenderData.append("PhotoPath", lender.PhotoPath());

            // Get the file and add it to the Lender
        var fileUpload = $("#PhotoUpload").get(0);
        var files = fileUpload.files;
        if(files.length === 1) {
             lenderData.append("PhotoFile", files[0]);
                }

        $.ajax({
            url: '/AdminLenders/Create',
            data: lenderData,
            enctype: "multipart/form-data",
            dataType: "json",
            type: "POST",
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.Success) {
                    LoadGenders();
                    LoadListLenders();
                    $('#TextboxFirstName').val('');
                    $('#TextboxMiddleName').val('');
                    $('#TextboxFirstLastName').val('');
                    $('#TextboxSecondLastName').val('');
                    $('#TextboxIdentificationCard').val('');
                    $('#TextboxEmail').val('');
                    $('#ComboBoxGenders').val('');
                    $('#TextboxIsActive').prop('checked', false);
                    swal("Prestamista creado!", "Se ha registrado correctamente!", "success")
                }
                else {
                    swal("Error creando el prestamista!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};