首页 > 解决方案 > Jquery Autocomplete 未将所选值传递给部分视图

问题描述

我正在尝试实现一个 jquery 自动完成输入文本框。单击按钮时,选定的值将传递给局部视图,但它不起作用。所选值未传递给控制器​​以在部分视图中呈现。我想知道如何执行此操作。

这是我的视图代码:

 <label class="col-lg-3 col-md-3 col-sm-3 col-xs-12 control-label" for="Teste">Aeroporto:</label>
    <div class="col-lg-5 col-md-5 col-xs-12 col-sm-12">
        <input id="aeroportoAutocomplete" type="text" class="form-control" name="AeroportoNome" />
    </div>

    <div class="form-group row">
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
            <div class="pull-right">
                <input id="continuarBtn" type="button" value="Continuar" class="btn btn-primary"/>
            </div>
        </div>
    </div>

    <br />

    <div class="form-group row">
        <div id="formularioPesquisa">
        </div>
    </div>

这是自动完成的javascript代码:

<script type="text/javascript">
    $(document).ready(function () {
        $("#aeroportoAutocomplete").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "/DemandaAgregada/AeroportoAutocomplete",
                    type: "POST",
                    dataType: "json",
                    data: { termo: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.OACI + " - " + item.AEROPORTO,
                                value: item.OACI + " - " + item.AEROPORTO
                            };
                        }))
                    }
                })
            },
            messages: {
                noResult: "",
                results: ""
            },
        });
    })
</script>

这是与控制器一起使用以呈现局部视图的脚本:

<script type="text/javascript">
    $(function () {
        $('#continuarBtn').click(function () {
            $.get('@Url.Action("FormularioPesquisa", "DemandaAgregada")', function (data) {
                $('#formularioPesquisa').replaceWith(data);
            });
        });
    });
</script>

最后,这是我的控制器方法,它们执行自动完成并呈现部分视图:

    [HttpPost]
    public JsonResult AeroportoAutocomplete(string termo)
    {
        var aeroportoDimensao = horaPicoDB.AeroportoDimensao;

        var aeroportos = (from aero in aeroportoDimensao
                          where aero.OACI.ToLower().Contains(termo.ToLower()) ||
                          aero.IATA.ToLower().Contains(termo.ToLower()) ||
                          aero.AEROPORTO.ToLower().Contains(termo.ToLower()) ||
                          aero.CIDADE.ToLower().Contains(termo.ToLower())
                          select new 
                          { 
                              aero.OACI,
                              aero.AEROPORTO
                          }).ToList();

        return Json(aeroportos, JsonRequestBehavior.AllowGet);
    }

    public ActionResult FormularioPesquisa(string AeroportoNome)
    {

        ViewBag.Message = "Aeroporto Nome: " + AeroportoOACI;

        return PartialView("FormPesquisaDemAgregada");
    }

标签: javascriptjqueryasp.net-mvc

解决方案


推荐阅读