在ASP.NET Core MVC（VS2017）中从自动完成文本框绑定其他文本框

嘿，我来帮你搞定这个基于EF Core的ASP.NET Core 1.1自动填充需求！下面分前端交互和后端数据接口两部分，一步步实现功能：

1. 前端Create.cshtml页面调整 #

先补全你的出生地表单结构，添加自动完成文本框和需要填充的省份、城市字段，再引入必要的交互脚本：

<div class="form-group">
    <label asp-for="BirthCityName" class="control-label"></label>
    <!-- 自动完成输入框 -->
    <input id="birthCityAutoComplete" class="form-control" placeholder="输入城市名开始搜索..." />
    <input type="hidden" asp-for="BirthCityId" /> <!-- 可选：存储城市ID，方便后续保存数据 -->
</div>
<div class="form-group">
    <label asp-for="BirthProvinceName" class="control-label"></label>
    <input id="birthProvince" asp-for="BirthProvinceName" class="form-control" readonly />
</div>
<div class="form-group">
    <label asp-for="BirthCity" class="control-label"></label>
    <input id="birthCity" asp-for="BirthCity" class="form-control" readonly />
</div>

<!-- 引入jQuery和jQuery UI（ASP.NET Core 1.1可通过LibMan管理这些依赖） -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-ui/dist/jquery-ui.min.js"></script>
<link href="~/lib/jquery-ui/dist/jquery-ui.min.css" rel="stylesheet" />

<script>
$(function() {
    // 初始化自动完成组件
    $("#birthCityAutoComplete").autocomplete({
        source: function(request, response) {
            // 向后端发送AJAX请求，根据输入关键词获取匹配城市
            $.ajax({
                url: "@Url.Action("GetMatchingCities", "Person")", // 替换成你的控制器名称
                type: "GET",
                data: { keyword: request.term },
                success: function(data) {
                    // 格式化返回数据适配autocomplete组件
                    var options = $.map(data, function(item) {
                        return {
                            label: item.CityName, // 下拉列表显示的文本
                            value: item.CityName, // 选中后填充到输入框的内容
                            cityId: item.Id,
                            provinceName: item.ProvinceName,
                            fullCityName: item.FullCityName
                        };
                    });
                    response(options);
                }
            });
        },
        minLength: 2, // 输入至少2个字符才触发搜索
        select: function(event, ui) {
            // 选中选项后自动填充其他字段
            $("#birthProvince").val(ui.item.provinceName);
            $("#birthCity").val(ui.item.fullCityName);
            $("#BirthCityId").val(ui.item.cityId);
        }
    });
});
</script>

2. 后端创建数据接口 #

首先创建一个DTO（数据传输对象），用来返回前端需要的字段，避免直接暴露实体类：

public class CityLookupDto
{
    public int Id { get; set; }
    public string CityName { get; set; }
    public string ProvinceName { get; set; }
    public string FullCityName { get; set; }
}

然后在你的控制器中添加处理AJAX请求的Action，通过EF Core查询数据库：

using Microsoft.AspNetCore.Mvc;
using YourProject.Data; // 替换成你的DbContext命名空间
using YourProject.Models; // 替换成你的实体类命名空间
using System.Linq;

public class PersonController : Controller
{
    private readonly AppDbContext _dbContext;

    // 构造函数注入DbContext
    public PersonController(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 处理城市搜索的AJAX请求
    public IActionResult GetMatchingCities(string keyword)
    {
        if (string.IsNullOrWhiteSpace(keyword))
        {
            return Json(new List<CityLookupDto>());
        }

        // EF Core查询匹配的城市，关联省份表获取省份名称
        var matchedCities = _dbContext.Cities
            .Where(c => c.CityName.Contains(keyword))
            .Select(c => new CityLookupDto
            {
                Id = c.Id,
                CityName = c.CityName,
                ProvinceName = c.Province.ProvinceName, // 假设City实体有Province导航属性
                FullCityName = c.FullCityName
            })
            .Take(10) // 限制返回结果数量，提升性能
            .ToList();

        return Json(matchedCities);
    }

    // 你的Create、Edit等其他Action...
}

3. 关键注意事项 #

• EF Core导航属性配置：确保City实体类已经和Province实体配置了关联导航属性，否则无法查询到省份名称。可以通过数据注解或Fluent API配置关联。
• 性能优化：如果城市数据量较大，建议给CityName字段添加数据库索引，提升查询速度。
• JSON序列化设置：如果返回JSON时出现循环引用问题，在Startup.cs的ConfigureServices中添加配置：

  services.AddMvc()
      .AddJsonOptions(options =>
      {
          options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
      });
  

这样配置后，用户在自动完成输入框输入关键词时，前端会请求后端接口，EF Core从数据库拉取匹配数据，选中后自动填充省份、城市等字段，完全满足你的需求！

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