Search database information by selecting a field

Question

How to select a field and pull the information related to it?

For example, I wanted to select a user and when I selected it appears in the fields type Name, Address, Cpf and etc all filled, searching for this information from the database.

I am using ASP . NET, C#, HTML, javascript.

If anyone can help out there, I’d appreciate it.

Answer 1

Use an ajax request to send the request with the selected user data:

// <select id="usuario">...</select>
// Instrução será chamada assim que o campo usuario for alterado
$(document).on('change', '#usuario', function(event){
    // Valor atual selecionado
    var user = $(this).val();
    $.ajax({
        url: 'endereco/da/pagina.aspx',
        type: 'GET',
        dataType: 'json',
        // No servidor com C# vai receber como Request.QueryString["usuario"]
        data: {usuario: user}, 
        success: function(json){
            // "nome" deve ser o id do campo input ex:
            // <input type="text" name="nome-do-usuario" id="nome">
            // Segue mesma regra para demais campos
            $('#nome').val(json.nome);
            $('#cpf').val(json.cpf);
            $('#endereco').val(json.endereco);
        },
        error: function (e){
            alert("Deu algo errado, examine o console para mais detalhes");
            console.log(e);
        }
    });
});

Using jQuery you get a great result with few lines. However you can get the same result with pure Javascript, just plaster a little on AJAX. And to enter the values in the fields you can use an instruction similar to:

var json = JSON.parse(xmlhttp.responseText);
document.getElementById("nome").value = json.nome;

I don’t program in ASP.NET, so I won’t be posting server code, but to learn more about how to encode a json see the documentation for MSDN.

Answer 2

Dude, it’s hard to answer your question because you have very little information about how you’re doing your application and how you’re accessing the data, but I think what you want is something like the following link example.

http://www.w3schools.com/asp/asp_ajax_database.asp

Answer 3

For this, you can make a method that returns all users in Json in his controller, would look like this:

Fetch method in controller:

    public JsonResult ObterPorId(int id)
        {  
 //ViewBag para listar todos os usuários
 ViewBag.Usuarios = Context.Usuarios.ToList()
                .Select(e => new SelectListItem
                {
                    Value = e.UsuarioId.ToString(),
                    Text = e.Nome,                    
                });
            var usuarios= context.usuarios.where(u => u.id == id).FirstOrDefault();

            return Json(usuarios, JsonRequestBehavior.AllowGet);
        }

And in his View, you can use the query Ajax, as @Kaduamaral suggested, so:

View:

<div class="col-md-2">
    Usuarios:
    @Html.DropDownList("ddlUsuarios", new SelectList(ViewBag.Usuarios, "value", "text"), new { @class = "form-control" })
</div>


id: <input id="id" name="id" /><br/>
Nome: <input id="nome" name="nome" /><br />
Cpf: <input id="cpf" name="cpf" />

@section Scripts {
    <script type="text/javascript">
        $('#ddlUsuarios').change(function () {
           // Valor atual selecionado
           var user = $(this).val();
           $.ajax({
               url: @Url.Content("~/") +'Usuarios/ObterPorId',
               type: 'GET',
               dataType: 'json',
               // No servidor com C# vai receber como Request.QueryString["usuario"]
               data: { id: user },
               success: function (json) {
                   // "nome" deve ser o id do campo input ex:
                   // <input type="text" name="nome-do-usuario" id="nome">
                   // Segue mesma regra para demais campos
                   //Lembrando que aqui e sensitive case, ou seja, diferenciando letras maiúsculas de minúsculas. 
                   $('#id').val(json.id);
                   $('#nome').val(json.nome);
                   $('#cpf').val(json.cpf);

               },
               error: function (e) {
                   alert("Deu algo errado, examine o console para mais detalhes");
                   console.log(e);
               }
           });
       });

    </script>
}