Загрузите файл с помощью Jqgrid, используя ASPNET MVC 4, ajaxFileUpload и Webpi.

Question

Я не могу заставить загрузку работать с помощью ( ajaxFileUpload), но я не могу заставить ее работать. Я слежу за этим постом, но функция UploadImage не вызывается. Я имею в виду, кажется, что событие afterSubmit не запускается.

Есть идеи почему?

jQuery("#ajaxGrid").jqGrid({
    url: $("#ServiceUrl").val(),
    datatype: "json",
    jsonReader: { repeatitems: false, id: "Id" },
    colNames: ['Id', 'logoTarjeta'],
    colModel: [
        { name: 'Id', index: 'id', editable: false, sortable: true, hidden: true, align: 'left' },
        {
            name: 'FileToUpload', index: 'logo', editable: true, edittype: 'file',
            editoptions: {
                enctype: "multipart/form-data"
            },
            width: 210, align: 'center', /*formatter: jgImageFormatter,*/ search: false
        }
    ],
    prmNames: { nd: null, search: null, page: "pageNumber", rows: "pageSize", sort: "sortColumn", order: "sortDirection" },
    mtype: 'GET',
    rowNum: 15,
    pager: '#ajaxGridPager',
    rowList: [10, 20, 50, 100],
    imgpath: $("#ServiceImagesUrl").val(),
    multiselect: false,
    scrollOffset: 0,
    afterSubmit: UploadImage,
    error: function (x, e) {
        alert(x.readyState + " " + x.status + " " + e.msg);
    }
});

function updateDialog(action) {
    return {
        url: $("#ServiceUrl").val(),
        closeAfterAdd: true,
        closeAfterEdit: true,
        afterShowForm: function (formId) { },
        modal: true,
        onclickSubmit: function (params) {
            var list = $("#ajaxGrid");
            var selectedRow = list.getGridParam("selrow");
            params.url += "/" + list.getRowData(selectedRow).Id;
            params.mtype = action;
        },
        width: "400",
        ajaxEditOptions: { contentType: "application/json" },
        serializeEditData: function (data) {
            delete data.oper;
            return JSON.stringify(data);
        }
    };
}

jQuery("#ajaxGrid").jqGrid(
    'navGrid',
    '#ajaxGridPager',
     {
         add: true,
         edit: true,
         del: true,
         search: false,
         refresh: false
     },
     updateDialog('PUT'),
     updateDialog('POST'),
     updateDialog('DELETE')
);

$(window).resize(resize_the_grid);

function resize_the_grid() {
    $('#ajaxGrid').fluidGrid({ base: '#grid_wrapper', offset: -20 });
}

function UploadImage(response, postdata) {
    debugger;
    var data = $.parseJSON(response.responseText);

    if (data.success == true) {
        if ($("#fileToUpload").val() != "") {
            ajaxFileUpload(data.id);
        }
    }
    return [data.success, data.message, data.id];
}

function ajaxFileUpload(id) {
    $("#loading")
    .ajaxStart(function () {
        $(this).show();
    })
    .ajaxComplete(function () {
        $(this).hide();
    });

    $.ajaxFileUpload(
        {
            url: $("#UploadImageUrl").val(),
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            data: { id: id },
            success: function (data, status) {
                if (typeof (data.success) != 'undefined') {
                    if (data.success != true) {
                        return alert(data.message);
                    }
                    return true;
                } else {
                    return alert('Failed to upload logo!');
                }
            },
            error: function (data, status, e) {
                return alert('Failed to upload logo!');
            }
        }
    );
}

Это сервис webapi, который вызывается при отправке.

public HttpResponseMessage Put(Type type)
        {
            if (ModelState.IsValid)
            {
                Uow.Types.Update(type);
                Uow.Commit();
                var resp = new HttpResponseMessage
                {
                     Content = new StringContent("{\"success\":true,\"message\":\"\",\"new_id\":\"\"}")
                };
                resp.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
                //resp.StatusCode = HttpStatusCode.NoContent;
                return resp; 
            }

            throw new HttpResponseException(HttpStatusCode.BadRequest);
        }

И я вижу плагин javascript, загруженный на веб-странице.

Заранее спасибо! Гильермо.

Answer 1

Я решил это! У меня было две проблемы: 1) Проверяя инструменты разработчика в браузере, я смог увидеть, что для запроса было два возможных действия. Я переместил действие загрузки файла на отдельный контроллер webapi, и это устранило эту проблему. 2) имя столбца FileUpload не принималось, так как я использовал fileUpload ниже (без заглавных букв).

Спасибо! Гильермо.