我正在尝试实现一个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");
}