JQuery Autocomplete选中值无法传递至Partial View的解决求助

我懂你现在卡在哪了——用jQuery Autocomplete选好机场值后，点按钮没法把选中值传到控制器，导致Partial View没法正确渲染对吧？别着急，我给你一步步拆解实现方案，帮你搞定这个问题。

一、先补全前端基础结构 #

首先把你没写完的视图代码补全，假设页面里有Autocomplete输入框、触发按钮，还有用来放Partial View的容器：

<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="aeroporto" type="text" class="form-control" placeholder="Digite o nome do aeroporto..." />
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
    <button id="carregarDados" class="btn btn-primary">Carregar Dados do Aeroporto</button>
</div>
<!-- 这里是Partial View的渲染容器 -->
<div id="partialViewContainer" class="mt-3"></div>
<!-- 加个隐藏域存选中机场的ID（比直接传文本更可靠） -->
<input type="hidden" id="selectedAeroportoId" />

二、配置jQuery Autocomplete组件 #

首先确保你已经引入了jQuery和jQuery UI（Autocomplete是UI里的组件，顺序别搞反：先引jQuery，再引jQuery UI）。然后配置Autocomplete，把选中项的ID存到隐藏域，避免用户手动输入的文本和后台数据不匹配：

$(document).ready(function() {
    $("#aeroporto").autocomplete({
        // 从控制器获取数据源
        source: function(request, response) {
            $.ajax({
                url: "/Aeroporto/GetAeroportos", // 替换成你的控制器路由
                type: "GET",
                data: { term: request.term }, // 传递用户输入的关键词
                success: function(data) {
                    // 把后台返回的数据转成Autocomplete需要的格式
                    response($.map(data, function(aeroporto) {
                        return {
                            label: aeroporto.NomeCompleto, // 输入框下拉显示的文本
                            value: aeroporto.Id, // 实际要传给后台的ID
                            text: aeroporto.NomeCompleto // 选中后输入框显示的文本
                        };
                    }));
                }
            });
        },
        // 选中项时的处理
        select: function(event, ui) {
            $("#selectedAeroportoId").val(ui.item.value); // 把选中的ID存到隐藏域
            $(this).val(ui.item.text); // 输入框显示友好的文本
            return false; // 阻止默认行为，避免输入框显示ID
        },
        minLength: 2, // 输入至少2个字符才触发搜索
        delay: 300 // 输入后延迟300ms再发请求，减少不必要的请求
    });
});

三、按钮点击时发送请求到控制器 #

点击按钮时，先校验是否选中了机场，然后通过AJAX把选中的ID传到控制器，最后把返回的Partial View渲染到页面容器里：

$("#carregarDados").click(function() {
    var aeroportoId = $("#selectedAeroportoId").val();
    
    // 先校验有没有选中值
    if (!aeroportoId) {
        alert("Por favor, selecione um aeroporto da lista primeiro!");
        return;
    }

    // 发送AJAX请求
    $.ajax({
        url: "/Aeroporto/CarregarDetalhesAeroporto", // 替换成你的控制器Action路由
        type: "GET",
        data: { aeroportoId: aeroportoId }, // 传递选中的ID
        success: function(partialHtml) {
            // 把Partial View的内容渲染到容器里
            $("#partialViewContainer").html(partialHtml);
        },
        error: function() {
            alert("Ocorreu um erro ao carregar os detalhes do aeroporto!");
        }
    });
});

四、后端控制器的处理逻辑 #

在你的控制器里，需要写两个Action：一个给Autocomplete提供数据源，另一个返回Partial View：

public class AeroportoController : Controller
{
    private readonly SeuDbContext _context;

    public AeroportoController(SeuDbContext context)
    {
        _context = context;
    }

    // 给Autocomplete提供数据源的Action
    public JsonResult GetAeroportos(string term)
    {
        // 从数据库查询匹配关键词的机场（替换成你的数据逻辑）
        var aeroportos = _context.Aeroportos
            .Where(a => a.NomeCompleto.Contains(term))
            .Select(a => new { Id = a.Id, NomeCompleto = a.Nome + " - " + a.Sigla })
            .ToList();

        return Json(aeroportos, JsonRequestBehavior.AllowGet);
    }

    // 返回Partial View的Action
    public ActionResult CarregarDetalhesAeroporto(int aeroportoId)
    {
        // 根据ID查询需要渲染到Partial View的数据（替换成你的数据逻辑）
        var detalhes = _context.DetalhesAeroporto
            .Where(d => d.AeroportoId == aeroportoId)
            .FirstOrDefault();

        // 返回Partial View，把数据传进去
        return PartialView("_DetalhesAeroporto", detalhes);
    }
}

五、创建对应的Partial View #

创建名为_DetalhesAeroporto.cshtml的Partial View，接收控制器传递的数据并渲染：

@model SeuProjeto.Models.DetalhesAeroporto

@if (Model != null)
{
    <div class="card">
        <div class="card-header">
            <h5>Detalhes do Aeroporto</h5>
        </div>
        <div class="card-body">
            <p><strong>Nome:</strong> @Model.Aeroporto.Nome</p>
            <p><strong>Sigla:</strong> @Model.Aeroporto.Sigla</p>
            <p><strong>Cidade:</strong> @Model.Cidade</p>
            <p><strong>Estado:</strong> @Model.Estado</p>
        </div>
    </div>
}
else
{
    <p>Nenhum dado encontrado para este aeroporto.</p>
}

常见问题排查 #

1. 引用顺序错误：一定要先引入jQuery，再引入jQuery UI，不然Autocomplete会失效。
2. 路由不匹配：AJAX的url要和控制器Action的路由完全匹配，推荐用@Url.Action()生成url避免硬编码，比如url: '@Url.Action("CarregarDetalhesAeroporto", "Aeroporto")'。
3. 选中值未正确存储：用浏览器开发者工具查看selectedAeroportoId隐藏域的value是否在选中项后正确赋值。
4. AJAX请求失败：打开浏览器控制台的网络面板，查看请求的状态码、参数是否正确传递到控制器。

内容的提问来源于stack exchange，提问作者Victor Dantas