0

Estou com dificuldade para popular uma tabela em meu código cshtml. Sou novo no ajax e não estou entendendo bem o que preciso fazer com os dados que vieram do banco.

Segue o meu código:

Código cshtml:

<div><table id="datagrid"></table></div>

Meu Controller:

public JsonResult Buscar(string fornecedor)
{
    JsonResult json = new JsonResult();
    UsuarioViewModel usuarioViewModel = new UsuarioViewModel();
    int iCnpj;
    bool resultado = int.TryParse(fornecedor, out iCnpj);
    usuarioViewModel.FornecedorBusca = fornecedor;
    if (resultado)
    {
        List<Fornecedor> listFornecedor = new BuscaDadosFornecedorBo().BuscaRequisicaoFornecedorBo(usuarioViewModel.FornecedorBusca, "");
        usuarioViewModel.ListaFornecedorViewModels = listFornecedor;
    }
    json.Data = usuarioViewModel.ListaFornecedorViewModels;
    return json;
}

Meu código jQuery:

$(document).ready(function () {
        //Post para Buscar os fornecedores
    $("#btnBuscar").on("click", function () {
        $.ajax({
            type: 'POST',
            url: 'Buscar',
            data: {
                fornecedor: $("#FornecedorBusca").val()
            },
            dataType: 'json',
            success: function (data) {
                debugger;
                console.log(data);
            },
            error: function (data) {
                debugger;
                alert('Error' + data);
            }
        });
    });

E esse é o retorno do JSON (Com dados fictícios):

0: Object:
Codigocnpj: "88.643.168/0001-66"
Municipio: "Valinhos"
RazaoSocial: "Copyright 2007-2015 - Gerador de CNPJ"


1: Object: 
Codigocnpj: "85.558.272/0001-64"
Municipio: "Campinas"
RazaoSocial: "Gerador de CNPJ - Gerar CNPJ Válido"

2 Respostas 2

2

Pelo aspeto dos dados que colocas recebes uma array com objetos dentro.

Ou seja, algo como isto:

data = [{
    Codigocnpj: "88.643.168/0001-66",
    Municipio: "Valinhos",
    RazaoSocial: "Copyright 2007-2015 - Gerador de CNPJ"
}, {
    Codigocnpj: "85.558.272/0001-64",
    Municipio: "Campinas",
    RazaoSocial: "Gerador de CNPJ - Gerar CNPJ Válido"
}];

Se queres colocar isso numa tabela podes criar a tabela com 2 ciclos for (ou .forEach()` como no exemplo em baixo). O primeiro para cada linha, e o segundo para cada célula dentro dessa linha.

var tabela = document.getElementById('datagrid');
data.forEach(function (obj) {
    var tr = document.createElement('tr');
    Object.keys(obj).forEach(function (chave) {
        var td = document.createElement('td');
        td.innerHTML = obj[chave];
        tr.appendChild(td);
    });
    tabela.appendChild(tr);
});

jsFiddle: http://jsfiddle.net/c46bfho7/2

0

Encontrei uma forma muito eficiente de criar a tabela com os dados retornado do Controller. Mas antes, quero agradecer a resposta do Sergio. Obrigado pelo apoio. Segue o código:

$.ajax({
                type: 'POST',
                url: 'Buscar',
                data: {fornecedor: $("#FornecedorBusca").val()},
                dataType: 'json',
                success: function (data) {
                    debugger;
                    if (!data) {
                        alert('Fornecedor não encontrado. Por favor verifiquei e tente novamente.');
                    } else {
                        var tabela = $("#datagrid");
                        var rows = "";
                        tabela.find("tbody td").remove();
                        _.each(data, function (item) {
                            rows += "<tr>";
                            rows += " <td>" + item.Codigocnpj + "</td>";
                            rows += " <td>" + item.RazaoSocial + "</td>";
                            rows += " <td>" + item.Municipio + "</td>";
                            rows += " <td> <input type='checkbox' /> </td>";
                            rows += "</tr>";
                        });
                        //tabela.find("tbody").append(rows);
                        tabela.find("tbody").html(rows);
                    }
                },
                error: function (data) {
                    debugger;
                    alert('Error');
                }
            });

Caso vcs esteja se perguntando o pq utilizei o

_.each(data, function (item)

Bom, achei interessante o conceito de iteração do UnderscorJS, caso queiram, só baixar e importar para dentro do projeto de vcs. Abraços.

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 .