Pass parameters by jquery through a table

Asked

Viewed 1,710 times

1

a question: I have a table and in it two columns, which are: CNPJ and Razão Social. Well, I need to do this: When I click on the column CNPJ, for example, should pass the value of CNPJ that is being clicked and go as parameter to a method in the Controller and return information from BD. The whole question is how to pass the value of CNPJ that is in a certain column of the table. Below my function jquery that for the parameters(skeleton).

function MontaDetalhePDV() {
    $.ajax({
        url: '/GerenciarPDV/DetalhesEvento',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ _cnpj: resultado_cnpj, _razao: resultado_razao }),
        success: function (data) {
        },
        error: function (error) {
        }
    });
}

My Method Controller:

[HttpPost]
public JsonResult DetalhesEvento(string _cnpj, string _razao)
        {
            V99_WEBEntities db = new V99_WEBEntities();

            var detalhe_evento = (from web in db.T_PDV

                             join testab in db.T_TipoEstabelecimento on web.IDTipoEstabelecimento equals (testab.IDTipoEstabelecimento)
                             join trede in db.T_TipoRede on web.IDTipoRede equals (trede.IDTipoRede)
                             join tusupdv in db.T_UsuarioPDV on web.IDPdv equals (tusupdv.IDPDV)
                             join tusu in db.T_Usuario on tusupdv.IDUsuario equals (tusu.IDUsuario)
                             join tstatus in db.T_CRM_StatusPDV on web.CNPJ equals (tstatus.DE_Cnpj)

                             select new
                             {
                                 web.CNPJ,
                                 web.RazaoSocial,
                                 web.NomeFantasia,
                                 web.Endereco,
                                 web.Bairro,
                                 web.Cidade,
                                 web.Estado,
                                 web.CEP,
                                 web.Complemento,
                                 web.Numero,
                                 web.QtdeCheckOuts,
                                 web.Telefone,
                                 web.NomeRede,
                                 web.Email,
                                 web.Celular,
                                 web.IS_Ativo,
                                 tstatus.IT_Status,
                                 trede.Nome,
                                 tipo = testab.Nome,
                                 contato = tusu.Nome,
                                 cel_contato = tusu.Celular,
                                 tel_contato = tusu.Telefone
                             });

            if (!string.IsNullOrEmpty(_cnpj))
                detalhe_evento = detalhe_evento.Where(cn => cn.CNPJ == _cnpj);
            if (!string.IsNullOrEmpty(_razao))
                detalhe_evento = detalhe_evento.Where(rz => rz.RazaoSocial == _razao);

            var detalheEvento = detalhe_evento.ToList();

            return Json(new { detalheEvento }, JsonRequestBehavior.AllowGet);
        }

resultado_cnpj and resultado_razao, are only suggestion, nothing more.

I just changed the method name to Detail and wind.

function DetalhesEvento() {

    var str = "";
    //var obj = {};

    $('table tbody tr').click(function () {
        var obj = {};
        $(this).each(function () {
            obj = {
                _cnpj: $(this).find('td').eq(0).text(),
                _razao: $(this).find('td').eq(1).text()
            }
        });
    });

    $.ajax({

        url: '/GerenciarPDV/DetalhesEvento',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: obj,
        success: function (data) {

            alert();

            str += '<div class="container col-xs-4  table-overflow" id="tabela">';
            str += '<table class="table table-striped table-ordered table-bordered">';
            str += '<thead>';
            str += '<tr>';
            str += '<td><strong>CNPJ</strong></td>';
            str += '<td><strong>Razão Social</strong></td>';
            str += '</tr>';
            str += '</thead>';
            str += '<tbody>';

            $(data.detalheEvento).each(function () { 

                str += '<tr>';// onclick="DetalhesEvento(this)"
                str += '<td><a href=""><small>' + this.CNPJ + '</small></a></td>';
                str += '<td><a href=""><small>' + this.RazaoSocial + '</small></a></td>';
                str += '</tr>';
            })
            str += '</tbody>';
            str += '</table>';
            str += '</div>';

            str += '<div class="pull-left">';
            str += '<div >';
            str += '<label><b>Situação:</b></label>';

            switch(data.detalheEvento[0].IS_Ativo){
                case true:
                    str += '<label>  Ativo  </label>';
                    break;
                case false:
                    str += '<label>  Inativo  </label>';
                    break;
            }
            str += '<label><b>Status:</b></label>';
            switch (data.detalheEvento[0].IT_Status) {
                case 1:
                    str += '<label> OK</label>';
                    break;
                case 2:
                    str += '<label> Alerta</label>';
                    break;
                case 3:
                    str += '<label> Erro</label>';
                    break;
            }
            str += '</div>';

            str += '<div>';
            str += '<label><b>Razão Social:</b></label>';
            str += '<label>' + data.detalheEvento[0].RazaoSocial + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Nome de Fantasia:</b></label>';
            str += '<label>' + data.detalheEvento[0].NomeFantasia + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>CNPJ:</b></label>';
            str += '<label>' + data.detalheEvento[0].CNPJ  + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Endereço:</b></label>';
            str += '<label>' +  data.detalheEvento[0].Endereco + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Número:</b></label>';
            str += '<label>' + data.detalheEvento[0].Numero  + '</label>';
            str += '<label><b>Complemento:</b></label>';
            str += '<label>' +  data.detalheEvento[0].Complemento + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Bairro:</b></label>';
            str += '<label>' +  data.detalheEvento[0].Bairro + '</label>';
            str += '<label><b>CEP:</b></label>';
            str += '<label>' + data.detalheEvento[0].CEP  + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Cidade:</b></label>';
            str += '<label>' + data.detalheEvento[0].Cidade  + '</label>';
            str += '<label><b>Estado:</b></label>';
            str += '<label>' + data.detalheEvento[0].Estado  + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Telefone Fixo:</b></label>';
            str += '<label>' + data.detalheEvento[0].Telefone  + '</label>';
            str += '<label><b>Celular:</b></label>';
            str += '<label>' +  data.detalheEvento[0].Celular + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Tipo:</b></label>';
            str += '<label>' + data.detalheEvento[0].tipo + '</label>';
            str += '<label><b>Qtde Checkouts:</b></label>';
            if (data.result_dim[0].Checkout > 0) {
                str += '<label>' + data.result_dim[0].Checkout + '</label>';
            } else {
                str += '<label>Não há informação</label>'
            }
            str += '</div>';

            str += '<div>';
            str += '<label><b>Tipo da Rede:</b></label>';
            str += '<label>' +  data.detalheEvento[0].Nome + '</label>';
            str += '<label><b>Nome da Rede:</b></label>';
            str += '<label>' +  data.detalheEvento[0].NomeRede + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Contato:</b></label>';
            str += '<label>' + data.detalheEvento[0].contato + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<label><b>Tel. Contato:</b></label>';
            str += '<label>' + data.detalheEvento[0].tel_contato + '</label>';
            str += '<label><b>Cel. Contato:</b></label>';
            str += '<label>' + data.detalheEvento[0].cel_contato  + '</label>';
            str += '</div>';

            str += '<div>';
            str += '<div>';
            str += '<div class="pull-right">';
            //str += '<div>';
            str += '<button type="button" class="btn btn-danger">Inativar</button>';
            str += '<button type="button" class="btn btn-primary">Add</button>';
            str += '</div>';
            str += '</div>';
            str += '</div>';


            str += '<div class="pull-right" id="tabela4">';
            str += '<br />';
            str += '<table class="table table-striped table-ordered table-bordered col-md-4">';
            str += '<thead>';
            str += '<tr>';
            str += '<td><strong>ID Evento</strong></td>';
            str += '<td><strong>Tipo</strong></td>';
            str += '<td><strong>Usuário</strong></td>';
            str += '<td><strong>Data de Inclusão</strong></td>';
            str += '<td></td>';
            str += '</tr>';
            str += '</thead>';

            str += '<tbody>';

            $(data.result_evento).each(function () {

                //var data_evento = getFormattedDate(data.result_evento);

                str += '<tr>';
                str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.ID_CRM_Evento + '</small></td>';
                str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.ID_TipoEvento  + '</small></td>';
                str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>' + this.DE_Usuario  + '</small></td>';
                str += '<td class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><small>' + getFormattedDate(this.DT_Inclusao) + '</small></td>';
                str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><button type="button" class="btn btn-primary">Abrir</button></td>';
                str += '</tr>';
            });
            str += '</tbody>';
            str += '</table>';
            str += '</div>';

            str += '</div>';
            str += '</form>';
            str += '</div>';

            cont++;

            $('#montaPesquisaGrid').html(str);
            str = "";

        },
        error: function (error) {

        }

    });
}

I did this job, but I don’t know what to call it in my code.

$(document).on('click', 'td', function (e) {
    var ancora = $(this).find('label a');
    var valor = ancora.text();

    $('#txtCnpjRazao').val(valor);
});

This field(txtCnpjRazao) is of the Hiddenfield type and I want to take its value in my jquery variable and pass to the controller.

javascript c# jquery asp.net-mvc-5

  • What’s your problem? Your Post is coming to your Ctrler?

  • Not a problem, but how to do it. How I take the cnpj that is in a column of a table and pass it as parameter, via jquery to my controller.

1 answer

2

You can capture the click on tr and mount the object, example:

$('table tbody tr').click(function(){
    var obj = {};
    $(this).each(function(){       
        obj = {
            _cnpj: $(this).find('td').eq(0).text(),
            _razao: $(this).find('td').eq(1).text()
        }    
    });
});

Jsfiddle

Or you can put onclick in tr and assemble the object within its function:

HTML

<tr onclick="MontaDetalhePDV(this)"></tr>

JS

function MontaDetalhePDV(tr) {
    var obj = {};
    $(tr).each(function(){       
        obj = {
            _cnpj: $(this).find('td').eq(0).text(),
            _razao: $(this).find('td').eq(1).text()
        }    
    });
    $.ajax({
        url: '/GerenciarPDV/DetalhesEvento',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: obj,
        success: function (data) {
        },
        error: function (error) {
        }
    });
}

  • I tried a lot of different ways, and I couldn’t make it work. It simply does not give any error, but it does not call the controller method and consequently does not return in the ajax success. I will edit my post and post what should return, the html that should be mounted.

Browser other questions tagged javascript c# jquery asp.net-mvc-5

You are not signed in. Login or sign up in order to post.