Changing a Dropdownlist via a search

Question

Changing a Dropdownlist via a search

Asked 10 years, 5 months ago

Viewed 411 times

5

I am creating a registration screen where in a text field I provide a search and the search result will have to appear in a dropdownlist.

Busco no campo Buscar e obtenho os resultados no campo 'Insumo'

The project is asp.net mvc4 c# and the code in the view is:

<script type="text/javascript">
$(function () {
    $("#searchBtn").click(function () {
        obterInsumo($("#inputBusca").val());
    });
});

function obterInsumo(insumo) {
    $.getJSON('@Url.Action("ObterInsumo")?insumo=' + insumo, listaInsumoBack);
}

function listaInsumoBack(json) {
    //AQUI É MINHA DÚVIDA...

<div class="form-group">
        <div class="col-lg-2">
        <label class="control-label input-sm">Buscar Insumo</label>
            <div class="input-group">
            <input type="text" class="form-control input-sm" id="inputBusca">
                <span class="input-group-btn">
                <button class="btn btn-transparente" type="button" id="searchBtn"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </div>

        <div class="col-lg-2">
            <label class="control-label input-sm">Insumo</label>
            <select class="form-control input-sm" id="selectInsumo" name="selectInsumo" required>
                <option selected="selected" value="">Efetue a busca</option>
            </select>
        </div>
    </div>

In my Controller:

[Authorize]
    public ActionResult ObterInsumo(string insumo)
    {
        InsumoService insumos = new InsumoService();
        IQueryable<Insumo> i = insumos.ListarTodos().Where(x => x.Codigo.Contains(insumo)).OrderBy(x => x.InsumoId);

        return Json(i, JsonRequestBehavior.AllowGet);
    }

Through this method, I stopped at the time to assemble the dropdownlist with the result of the database search. Is there a better way to do this? Or a light to effect the way I’m doing?

1 answer

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

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

by user6026 · Answer 1 · 2014-07-11T14:22:19+00:00

In your doubt it would be so:

function listaInsumoBack(json) {
    $("#selectInsumo").empty();
    var option = "";
    $.each(json, function (index, value) {
        option = option + '<option value="' + value.InsumoId + '">' + value.Codigo + '</option>';
    });
    $("#selectInsumo").html(option);
}

I created an example with View and the Methods of Controller

Example:

Página Busca (View)

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Busca</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $("#searchBtn").click(function () {
                obterInsumo($("#inputBusca").val());
            });
        });

        function obterInsumo(insumo) {
            $.getJSON('@Url.Action("ObterInsumo")?insumo=' + insumo, listaInsumoBack);
        }
        function listaInsumoBack(json) {
            $("#selectInsumo").empty();
            var option = "";
            $.each(json, function (index, value) {
                option = option + '<option value="' + value.InsumoId + '">' + value.Codigo + '</option>';
            });
            $("#selectInsumo").html(option);
        }
    </script>
</head>
<body>
        <div class="form-group">
            <div class="col-lg-2">
                <label class="control-label input-sm">Buscar Insumo</label>
                <div class="input-group">
                    <input type="text" class="form-control input-sm" id="inputBusca">
                    <span class="input-group-btn">
                        <button class="btn btn-transparente" type="button" id="searchBtn">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </div>

            <div class="col-lg-2">
                <label class="control-label input-sm">Insumo</label>
                <select class="form-control input-sm" id="selectInsumo" name="selectInsumo" required>
                    <option selected="selected" value="">Efetue a busca</option>
                </select>
            </div>
        </div>
</body>
</html>

Controller Methods:

[HttpGet]
public ActionResult Busca()
{
    return View();
}

[HttpGet]
public JsonResult ObterInsumo(string insumo)
{
    InsumoService insumos = new InsumoService();
    IList i = insumos.ListarTodos()
            .Where(x => x.Codigo.Contains(insumo))
            .OrderBy(x => x.InsumoId)
            .Select(x => new
            {
                x.Codigo, 
                x.InsumoId
            })
            .ToList();
    return Json(i, JsonRequestBehavior.AllowGet);
}

inserir a descrição da imagem aqui