Array
(
)

Enviar Imagem em Json Asp.net MVC

Marcos Seki
|
MVP
    18 out 2015

Boa tarde,
fiz um siste em ASP.NET MVC com EF para lançamentos de pedidos, itens do pedido seguindo o exemplo deste link
http://www.c-sharpcorner.com/uploadfile/hasibul2363/master-detail-crud-operations-using-Asp-Net-mvc-3-and-entity-framework/
quando o site foi entregue o cliente solicitou a inclusão das parcelas e para cada parcela do pedido a possibilidade
de anexar uma imagem, esta imagem seria a foto do comprovante de pagamento, por exemplo: No caso em que o pagamento for
realizado através de cartão de crédito, seria tirado uma foto do comprovante de autorização do POS e anexado a parcela.
Como estou usando JSON e Ajax para fazer a inserção dos registros Master/Detail (Pedidos com Itens do pedido), agora com esta
nova solicitação preciso passar a gravar a imagem em cada financeiro, estive pesquisando e parece que uma maneira seria converter a imagem
em uma string codificada em Base64, gostaria de saber se alguem teria algum exemplo de como fazer isso.
Segue abaixo o trecho de código que envia os registros do pedido e itens do pedido:

#Código

 function SalvarPedido() {
            
            if (fncQtdeItens() == 0) {
                alert("Não existe item(s) para salvar o pedido.");
                return false;
            }

            if ($("#txtIdPessoaCliente").val() == "0") {
                alert("Não foi informado o cliente.");
                return false;
            }

            // Step 1: Read View Data and Create JSON Object

            // Creating SalesSub Json Object
            var pedidoItem = { "Id_mve_PedWeb": "", "Id_pro": "", "Qtde": "", "Vl_Unit": "", "Vl_Total": "", "Vl_Efetivo": "" };

            // Creating SalesMaidn Json Object
            var pedido = {
                "Id_mve_PedWeb": "", "Id_pessoa_revenda": "", "Id_pessoa_cliente": "", "Dt_lancamento": "", "Finalidade": "", "Situacao": "", "Classe": "",
                "PedWeb_Usuario": "", "PedWeb_Browser": "", "PedWeb_IP": "", "Vl_total": "", "Vl_efetivo": "", "Obs": "", "pedidoItem": []
            };

            // Set Sales Main Value
            pedido.Id_mve_PedWeb = $("#txtIdMve").val();
            pedido.Id_pessoa_revenda = $("#txtIdPessoaRevenda").val();
            pedido.Id_pessoa_cliente = $("#txtIdPessoaCliente").val();
            pedido.Dt_lancamento = $("#txtDataLancamento").val();
            pedido.Finalidade = "PED";
            pedido.Situacao = "EM ANDAMENTO";
            pedido.Classe = "P";
            pedido.PedWeb_Usuario = $("#txtUsuarioPedido").val();
            pedido.PedWeb_Browser = $("#txtBrowser").val();
            pedido.PedWeb_IP = $("#txtIpCliente").val();
            pedido.Vl_efetivo = parseFloat($("#txtVlTotalPedidoHidden").val().replace(",", "."));
            pedido.Vl_total = parseFloat($("#txtVlTotalPedidoHidden").val().replace(",", "."));
            pedido.Obs = $("#txtObs").val();

            // Getting Table Data from where we will fetch Sales Sub Record
            var oTable = $('#tblItensPedido').dataTable().fnGetData();

            for (var i = 0; i < oTable.length; i++) {

                // IF This view is for edit then it will read SalesId from Hidden field
                //if ($('h2').text() == "Edit") {
                if ($("#txtIdMve").val() != "0") {
                    pedidoItem.Id_mve_PedWeb = $('#txtIdMve').val();
                }
                else {
                    pedidoItem.Id_mve_PedWeb = 0;
                    pedidoItem.Id_imve_PedWeb = 0;
                }

                // Set SalesSub individual Value
                pedidoItem.Id_pro = oTable[i][0];
                pedidoItem.Qtde = parseFloat(oTable[i][3].replace(".", "").replace(",", "."));
                pedidoItem.Vl_Unit = parseFloat(oTable[i][4].replace(".", "").replace(",", "."));
                pedidoItem.Vl_Total = parseFloat(oTable[i][5].replace(".", "").replace(",", "."));
                pedidoItem.Vl_Efetivo = parseFloat(oTable[i][5].replace(".", "").replace(",", "."));
                // adding to SalesMain.SalesSub List Item
                pedido.pedidoItem.push(pedidoItem);
                pedidoItem = { "Id_mve_PedWeb": "", "Id_pro": "", "Qtde": "", "Vl_Unit": "", "Vl_Total": "", "Vl_Efetivo": "" };
            };
            // Step 1: Ends Here

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

            // Set 2: Ajax Post
            // Here i have used ajax post for saving/updating information
            $.ajax({
                async: false,
                type: "POST",
                url: "CriarPedido",
                contentType: "application/json; charset=utf-8",
                //headers: headers,
                data: JSON.stringify(pedido),
                //data: { __RequestVerificationToken: token, jsonRequest: JSON.stringify(pedido)},
                dataType: "json",
                complete: function (jqXHR, textStatus) {
                },
                error: function (result) {
                    return false;
                },
                success: function (result) {
                    if (result.Success == "1") {
                        window.location.href = urlRetorno;
                        return true;
                    }
                    else {
                        alert(result.ex);
                        return false;
                    }
                }
            });
        };


Aqui seria um exemplo de como é a estrutura das minhas tabelas.
O problema esta no campo imagem da tabela Financeiro, onde para cada pedido poderá existir N parcelas com imagem.

Pedido
IdPedido int
Data datetime
IdPessoa int
Valor decimal

PedidoItens
IdPedidoItem int
IdPedido int
IdPro int
Qtde decimal
ValorUnitario decimal
ValorTotal decimal
Financeiro
IdFinanceiro int
IdPedido int
IdPessoa int
Valor decimal
DataLancto Datetime
DataVencto Datetime
Imagem Varbinary(max)