2

Tenho esse método no Controller

[HttpPost]
public JsonResult PreencheEndereco(string _cpf)
{
    AgaxturCmsEntities db = new AgaxturCmsEntities();

    try
    {
        var Result = (from a in db.TB_CLIENTES
                      where a.CdCliente == "1" && a.CPF == _cpf
                        select new {

                           a.Endereco,
                           a.Numero,
                           a.CEP,
                           a.Complmento,
                           a.Telefone,
                           a.Celular

                        }).ToList();

        return Json(new { Result }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        return Json(new { Result = ex.Message }, JsonRequestBehavior.AllowGet);
    }
}

O que eu preciso é fazer uma função jquery e preencher esses 6 campos retornados pela função. Esse é meu esqueleto da função, mas como eu faço agora para preencher?

$(function () {
    $("#btnEndereco").click(function () {
        $.ajax({
            url: '/Passo/PreencheEndereco',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            data: JSON.stringify({ _cpf: $("#CPF").val() }),
            success: function (data) {

                $(data.Result).each(function () {
                    $("#endereco").val(this.Endereco);
                });
            },
            error: function (error) {
            }
        });
    });
});

Nessa linha que acho que deveria inserir o retorno do banco no campo, não funciona. Gostaria de saber se é necessário mais alguma coisa:

$("#endereco").val(this.Endereco);

Esses são os campos que precisam ser preenchidos, no HTML. Coloquei um id para cada um deles, para pegar no jquery. O id's são para os inputs.

<div class="form-group">
    <div class="grid_4">
        <label>CEP</label>
    </div>
    <div class="grid_14">
        <input id="cep" type="number" name="txtCep" class="grid_3  required" placeholder="00000-000" required />
    </div>
</div>
<div class="form-group">
    <div class="grid_4">
        <label>Endereço</label>
    </div>
    <div class="grid_14">
        <input id="logradouro" type="text" name="txtLogradouro" class="grid_14 required" placeholder="Nome completo" required />
    </div>
</div>
<div class="form-group">
    <div class="grid_4">
        <label>Número</label>
    </div>
    <div class="grid_4">
        <input id="numero" type="text" name="txtNumero" class="grid_3  required" required />
    </div>
    <div class="grid_2">
        <label>Complemento</label>
    </div>
    <div class="grid_8">
        <input id="complemento" type="text" name="txtComplemento" class="grid_8  required" required />
    </div>
</div>
<div class="form-group">
    <div class="grid_4">
        <label>Telefone</label>
    </div>
    <div class="grid_6">
        <input id="telefone" type="text" name="txtTelefone" class="grid_6  required" required />
    </div>
    <div class="grid_2">
        <label>Celular</label>
    </div>
    <div class="grid_6">
        <input id="celular" type="text" name="txtCelular" class="grid_6  required" required />
    </div>
</div>

2 Respostas 2

3

Em seu controller, remova o atributo HttpPost da action, se a intenção é chamar via GET. Pelo retorno do mesmo, permitindo que o Json seja retornado via GET suponho que seja essa a intenção.

A view você poderia fazer assim:

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <script type="text/javascript" src="/Scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        function PreencheEndereco() {

            $.ajax({
                url: '/Home/PreencheEndereco',
                data: { _cpf: $("#CPF").val() },
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "GET",
                success: function (data) {

                    var result = data.Result;
                    for (var it = 0; it < result.length; it++) {
                        $("#tbl > tbody").append(
                            "<tr>" +
                            "    <th>" + result[it].Endereco + "</th>" +
                            "    <th>" + result[it].Numero + "</th>" +
                            "    <th>" + result[it].CEP + "</th>" +
                            "    <th>" + result[it].Complmento + "</th>" +
                            "    <th>" + result[it].Telefone + "</th>" +
                            "    <th>" + result[it].Celular + "</th>" +
                            "</tr>"
                            );

                    }
                },
                error: function (error) {

                }
            });
        }

        $(function () {
            $("#btn").on("click", function () {
                PreencheEndereco();
            });
        });
    </script>
</head>
    <body>
        <div>
            CPF: <input type="text" id="CPF"/>
        </div>
        <button id="btn">Preencher dados</button>
        <table id="tbl">
            <thead>
                <tr>
                    <th>Endereco</th>
                    <th>Numero</th>
                    <th>CEP</th>
                    <th>Complmento</th>
                    <th>Telefone</th>
                    <th>Celular</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </body>
</html>

Neste exemplo, quando você clicar no botão, ele vai enviar o CPF que estiver escrito na caixa de texto, fazer a consulta que você tem no controller, e então com o Json que retornar, irá preencher a tabela existente logo abaixo do botão com os valores que vierem do banco de dados.

2
  • Desculpe-me pela minha ignorância. Como você colocou tudo em TR e TH, eu fiquei meio confuso. Ainda apanho pacas com jquery. No meu HTMl os campos estão organizados com divs.
    – pnet
    Commented 14/03/2014 às 13:16
  • @pnet Quer dizer que os campos já existem na tela?? Você poderia, ao invés disso, construir os campos dinamicamente, da mesma forma que eu fiz com os TD, é só tirar o TD e colocar um input. Commented 14/03/2014 às 13:59
-3

Resolvido. Erro de BIOS. Havioa uma div com o mesmo nome da id endereco e por isso acho que o jquery ficava meio maluco e não sabia quem preencher. Está funcionando.

1
  • 1
    O código do Miguel Angelo é uma boa abordagem para você refatorar seu código e obter mais qualidade do mesmo Commented 18/03/2014 às 13:44

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 .