Changing a Dropdownlist through a search

Question

Changing a Dropdownlist through a search

Navigation

#1 by (2 votes)

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.

Theprojectisasp.netmvc4c#andthecodeintheviewis:

<scripttype="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>

On 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 took the time to mount the dropdownlist with the result of the search in the database. Is there a better way to do this? Or a light to effect the way I'm doing?

jquery c# asp.net-mvc

asked by anonymous 11.07.2014 / 13:52

1 answer

Problems with slow Delphi and FireDAC Load Bootstrap Carousel

score 2 · Accepted Answer

In your doubt it would look like this:

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 Methods of Controller

Example:

Search page )

@{ 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);
}