0

Como enviar via JSON campos input criados dinamicamente, exemplo:

O usuário digita em um campo texto a quantidade 4 e a função cria 8 campos inputs, ou digita 5 e a função cria 10 campos inputs, essa função já funciona e está OK!.

Esse é o trecho da função que cria os campos dinamicamente:

for (var i = 0; i < _qtde; i++) {
var new_date = new Date();
new_date.setMonth(new_date.getMonth() + i);
$("#divParcela").append("<div class='col-xs-6'> <label>Vencimento - parcela 
  " + parseInt(i + 1) + "</label> <input type='text' id='' value='" + 
  $.datepicker.formatDate('dd/mm/yy', new_date) + "' class='form-control' />
  </div> <div class='col-xs-6'><label>Valor - parcela " + parseInt(i + 1) + 
  "</label><input type='text' id='' value='" + _valorParcela.toFixed(3)  + 
  "' class='form-control' /></div>");
 };

Em seguida quando clica no botão Cadastrar, o sistema pega os valores e envia via json para o banco de dados, seria algo assim:

$("#btnCadastrar").on("click", function () {

        var _movimentacao = {
            "MovimentoFinanceiroID": $("#MovimentoFinanceiroID").val(),
            "NumDocumento": $("#NumDocumento").val(),
            "ItemMovimentoFinanceiro":[]
            };

        _movimentacao.ItemMovimentoFinanceiro.pusch({
                "NumParcela": "Campo_Parcela_criado_dinamicamente",
                "ValorDocumento": "Campo_Valor_criado_dinamicamente"
         });

        $.ajax({
        url: "/MovimentoFinanceiro/IncluirJSON",
        type: "post",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        processData: false,
        data: JSON.stringify(_movimentacao),
        success: function (data) {
            window.location.href = "/MovimentoFinanceiro/Index";
        },
        error: function (result) {
            alert(result.responseText);
        }
    });
});

Esse é o método JsonResult:

public JsonResult IncluirJSON(MovimentoFinanceiroViewModel pMovimentoFinanceiro)
        {
            try
            {
                //Aqui vou implementar rotina para gravar no banco de dados
                return Json("OK", JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {
                return Json("ERRO", JsonRequestBehavior.AllowGet);
            }
        }

Essas duas classes é o modelo intermediário (DTO):

public class MovimentoFinanceiroViewModel
{
    public List<ListDetalheMovimento> ListItens { get; set; }
}

public class ListDetalheMovimento
{
    public decimal ValorParcela { get; set; }
    [Column(TypeName = "DateTime2")]
    public DateTime? DataVencimentoParcela { get; set; }
}

Entidade que refle a tabela do banco de dados:

 public class MovimentoFinanceiro
    {
        [Key]
        public int MovimentoFinanceiroID { get; set; }
        public int ItemPlanoContabilID { get; set; }
        public decimal ValorParcela { get; set; }
        public DateTime DataVencimentoParcela { get; set; }
}
2
  • Você precisa fazer isso por json mesmo ou pode fazer por um POST normal? Talvez o BeginCollectionItem possa lhe atender.
    – Randrade
    10/02/2016 às 11:46
  • Sim, nesse caso tem que ser Json
    – hard123
    10/02/2016 às 11:59

3 Respostas 3

2

Para enviar os valores de campos criados dinamicamente você precisa criar elementos input com o mesmo name e em seu model você precisa possuir uma propriedade com o mesmo nome utilizado no atributo name e que seja de um tipo de coleção como array ou List<T>. Basta fazer isso que o ASP.NET MVC irá fazer o binding automático desses dados enviados para dentro da propriedade.

Além disso, notei que você está enviando os dados para o action method no formato JSON (contentType: "application/json; charset=utf-8"), o ideal seria que você mudasse para o contentType: "application/x-www-form-urlencoded; charset=UTF-8" que é o formato padrão, e que irá permitir uma serialização mais fácil dos dados do formulário utilizando apenas o .serialize().

Bom, vou te dar um exemplo para facilitar o entendimento.

Model:

public class IndexModel
{
    public List<string> Coisas { get; set; }
}

Action method:

 public JsonResult IndexJson(IndexModel model)
 {
      return Json("Ok", JsonRequestBehavior.AllowGet);
 }

View:

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "form" }))
{
    <div class="form-group">
        @Html.LabelFor(x => x.Coisas)
        @Html.TextBoxFor(x => x.Coisas, new { @class = "form-control" })
        @Html.TextBoxFor(x => x.Coisas, new { @class = "form-control" })
        @Html.TextBoxFor(x => x.Coisas, new { @class = "form-control" })
        @Html.TextBoxFor(x => x.Coisas, new { @class = "form-control" })
        @Html.TextBoxFor(x => x.Coisas, new { @class = "form-control" })
    </div>

    <button id="enviar" class="btn btn-primary">Enviar</button>
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    $('#form').submit(function () {
        $.ajax({
            url: '/Home/IndexJson',
            type: 'POST',
            dataType: 'json',
            data: $('#form').serialize(),
            success: function (data) {
                console.log(data);
            },
            error: function (result) {
                console.log(result);
            }
        });
    });
</script>

No exemplo gerei os campos pelo Razor, mas no seu caso basta continuar fazendo por JavaScript e lembrando de colocar o mesmo name em todos os elementos input:

<form action="/Home/Index" method="post">
    <div class="form-group">
        <label for="coisa">Coisas</label>
        <input class="form-control" type="text" name="coisa">
        <input class="form-control" type="text" name="coisa">
        <input class="form-control" type="text" name="coisa">
        <input class="form-control" type="text" name="coisa">
        <input class="form-control" type="text" name="coisa">
    </div>
    <button class="btn btn-primary">Enviar</button>
</form>

Uma coisa que havia passado despercebido por mim e seria interessante adicionar é que no seu caso talvez seja melhor criar um model intermediário, para ser utilizado no lugar do MovimentoFinanceiro como parâmetro no IncluirJSON, isso é uma padrão conhecido como Data Transfer Object (DTO), um DTO pode ser utilizado como um contêiner de dados entre comunicações dentro de um sistema, no seu caso esse DTO, que nada mais é que uma classe montada por você mesmo, deverá conter essa propriedade de coleção, além das outras propriedades do MovimentoFinanceiro.

Dessa forma você não precisará alterar o MovimentoFinanceiro que, aparentemente, mapeia uma tabela no banco de dados, portanto é inviável alterar sua estrutura.

5
  • Entendi, muito boa alternativa, mas acredito que não vai funcionar pro meu caso devido ao detalhe do Modelo um tipo de coleção como array ou List<T>, o meu modelo não é List<T>, conforme eu adicionei na pergunta.
    – hard123
    9/02/2016 às 14:54
  • @AdrianoSUV alterei a resposta para falar sobre isso, de uma olhada nos dois últimos parágrafos, espero que tenha ficado claro, qualquer coisa pergunte.
    – Zignd
    9/02/2016 às 15:35
  • Olá @Zignd implementei a classe DTO e os dados não estão sendo carregados, ou seja são enviados para o JsonResult como nulos, o que será que eu fiz errado ?
    – hard123
    9/02/2016 às 19:03
  • @AdrianoSUV inspecione a request que está sendo feita ao servidor, ela possui os dados realmente? Note também que os nomes das propriedades no JSON enviado devem ser os mesmo das propriedades da classe DTO.
    – Zignd
    9/02/2016 às 19:06
  • Ok @Zignd !, os dados eram enviados ao servidor somente quando o modelo TDO NÃO era um tipo List<T>, ou seja quando eu alterava o meu modelo TDO para tipo List<T> não era enviado, muito provavelmente eu estava fazendo algo errado e como eu estou com os prazos apertados encontrei uma outra solução que me atendeu, não sei se é a melhor, mas no momento é o que eu preciso para cumprir os prazos curtíssimos, vou adicionar a solução na pergunta.
    – hard123
    10/02/2016 às 11:27
1

No seu caso, acredito que utilizar Action Filters é um bom caminho, visto que você quer receber o conteúdo do seu JSON já como uma instância corretamente preenchida na sua Action.

Para fazer isso acontecer a ideia é:

1) Você deve ter um padrão na hora de nomear seus campos. Por padrão, o navegador entende que quando existem vários campos de mesmo nome com colchetes (por exemplo "ValorParcela[]"), que todos os valores desses campos serão divididos por uma vírgula na requisição.

2) Criar uma classe que estende de ActionFilterAttribute e fazer o método OnActionExecuting() ler os parâmetros passados conforme o padrão definido. Através do contexto desse filtro, você consegue tratar todos esses campos e retornar o seu ViewModel preenchido.

3) Marcar a sua Action com a classe criada acima.

Você até pode implementar isso passando apenas uma string com o seu JSON e fazer o devido tratamento no filtro. Porém, aproveitando a boa ideia do @Zignd de passar as informações de formulário serializadas, fiz um pequeno exemplo baseado em como ele já estava fazendo.

A View, em que eu aproveitei um pouco do código da resposta do @Zignd:

<form id="form">
    <input type="text" name="ValorParcela[]">
    <input type="text" name="DataVencimentoParcela[]">

    <input type="text" name="ValorParcela[]">
    <input type="text" name="DataVencimentoParcela[]">

    <input type="text" name="ValorParcela[]">
    <input type="text" name="DataVencimentoParcela[]">

    <input type="text" name="ValorParcela[]">
    <input type="text" name="DataVencimentoParcela[]">

    <input type="text" name="ValorParcela[]">
    <input type="text" name="DataVencimentoParcela[]">
</form>
<button id="submit">Enviar</button>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    $('#submit').on('click', function () {
        $.ajax({
            url: '/Home/IncluirJSON',
            type: 'POST',
            dataType: 'json',
            data: $('#form').serialize(),
            success: function (data) {
                console.log(data);
            },
            error: function (result) {
                console.log(result);
            }
        });
    });
</script>

As classes relacionadas ao View Model:

public class MovimentoFinanceiroViewModel
{
    public MovimentoFinanceiroViewModel()
    {
        this.DetalhesMovimento = new List<DetalheMovimento>();
    }

    public List<DetalheMovimento> DetalhesMovimento { get; set; }
}

public class DetalheMovimento
{
    public decimal ValorParcela { get; set; }        
    public DateTime? DataVencimentoParcela { get; set; }
}

A classe do filtro:

public class MovimentoFinanceiroFilterAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        base.OnActionExecuting(filterContext);

        /*
        Exemplo de como são recebidos os campos:

        filterContext.HttpContext.Request.Form["ValorParcela[]"] = "1,2,3,4,5"
        filterContext.HttpContext.Request.Form["DataVencimentoParcela[]"] = "1,2,3,4,5"
         */

        string sValorParcela = filterContext.HttpContext.Request["ValorParcela[]"];
        string sDataVencimentoParcela = filterContext.HttpContext.Request["DataVencimentoParcela[]"];

        var valoresParcela = sValorParcela.Split(new char[] { ',' });
        var datasVencimentoParcela = sDataVencimentoParcela.Split(new char[] { ',' });

        var viewModel = new MovimentoFinanceiroViewModel();

        for (int i = 0; i < valoresParcela.Length; i++)
        {
            decimal valorParcela = 0;
            Decimal.TryParse(valoresParcela[i], out valorParcela);

            DateTime dataVencimentoParcela = DateTime.MinValue;
            DateTime.TryParse(datasVencimentoParcela[i], out dataVencimentoParcela);

            viewModel.DetalhesMovimento.Add(new DetalheMovimento { ValorParcela = valorParcela, DataVencimentoParcela = dataVencimentoParcela });
        }

        filterContext.ActionParameters["pMovimentoFinanceiro"] = viewModel;
    }
}

E finalmente, a Action:

[MovimentoFinanceiroFilterAttribute]
public JsonResult IncluirJSON(MovimentoFinanceiroViewModel pMovimentoFinanceiro)
{
    try
    {
        //Aqui vou implementar rotina para gravar no banco de dados
        return Json("OK", JsonRequestBehavior.AllowGet);
    }
    catch (Exception)
    {
        return Json("ERRO", JsonRequestBehavior.AllowGet);
    }
}
1
  • Bom dia @Diego Jeronymo, muito boa a sua solução mas como havia comentado no post anterior com o Zignd eu optei por uma outra solução e quado você postou a sua sugestão eu já havia feito uma implementação que atendeu, mas muito boa sua dica.
    – hard123
    10/02/2016 às 11:32
0

Talvez não seja a melhor solução, mas atendeu as minhas necessidades:

   $("#btnCadastrar").on("click", function () {
            var _movimentacao = {
                "MovimentoFinanceiroID": $("#MovimentoFinanceiroID").val(),
                "NumDocumento": $("#NumDocumento").val(),
                "ItemMovimentoFinanceiro": []
            };

            var _contaLinha = 0;

            $("input[name='ValorParcela[]']").each(function () {                
            var _valor = new Array();
            var _dtVencimento = new Array();
            _valor.push($(this).val());               
            _dtVencimento[0] = new Object();
            _dtVencimento[0].DataVencimentoParcela = $("input[name='DataVencimentoParcela[]']")[_contaLinha].value;
            _movimentacao.ItemMovimentoFinanceiro.push({
                "ItemMovimentoFinanceiro": 0,
                "MovimentoFinanceiroID": $("#MovimentoFinanceiroID").val(),
                "qtdeParcela": $("#qtdeParcela").val(),
                "ValorParcela": JSON.parse(_valor),
                "DataVencimentoParcela": _dtVencimento
            });
            _contaLinha = _contaLinha + 1;
        });

        $.ajax({
            url: "/MovimentoFinanceiro/IncluirJSON",
            type: "post",
            dataType: "json",
            contentType: "application/json charset=utf-8",
            processData: false,
            data: JSON.stringify(_movimentacao),
            success: function (data) {
                console.log(data);
            },
            error: function (result) {
                alert(result.responseText);
            }
        });
    });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .