Razor页面选择数据库来源字段时自动填充其他表单字段的实现方案问询

1. 后端调整 #

1.1 修复现有SQL注入风险 #

原有GetAdresses方法使用字符串拼接SQL存在注入漏洞，修改为参数化查询：

public static IList<Adresse> GetAdresses(string lastname)
{
    // 改用参数化查询避免SQL注入
    string sql = "SELECT * FROM Adresse WHERE lastname like @LastName";
    SqlParameter param = new SqlParameter("@LastName", $"%{lastname}%");
    SqlDataAdapter adapter = CreateDataAdapter(sql);
    adapter.SelectCommand.Parameters.Add(param);
    DataTable dt = new DataTable();
    adapter.Fill(dt);
    IList<Adresse> list = new List<Adresse>();
    foreach (DataRow dr in dt.Rows)
    {
        Adresse item = new Adresse();
        foreach (DataColumn dc in dr.Table.Columns)
        {
            PropertyInfo p = item.GetType().GetProperty(dc.ColumnName);
            if (p != null && dr[dc] != DBNull.Value && p.CanWrite)
            {
                p.SetValue(item, dr[dc], null);
            }
        }
        list.Add(item);
    }
    return list;
}

1.2 新增查询接口 #

在对应PageModel类中新增接收LastName参数、返回关联地址信息的接口：

// 若不需要验签可加IgnoreAntiforgeryToken特性，否则前端请求需携带 antiforgery token
public IActionResult OnGetGetAddressByLastName(string lastName)
{
    if(string.IsNullOrEmpty(lastName))
        return new JsonResult(new {success = false});
    var addressList = GetAdresses(lastName);
    // 取匹配的第一条数据返回，可根据业务调整逻辑
    if(addressList.Any())
        return new JsonResult(new {success = true, data = addressList.FirstOrDefault()});
    return new JsonResult(new {success = false});
}

2. 前端视图调整 #

修改下拉列表配置，添加change事件监听，选中后触发AJAX请求填充其他字段：

<div class="table_row">
  <div class="table_cell" style="padding-bottom:5px;"> Firstname: </div>
  <div class="table_cell" style="padding-bottom:5px;"> 
    @* 给输入框加唯一id方便后续赋值 *@
    @Html.EditorFor(m => m.head.FirstName, new { htmlAttributes = new { @id = "FirstNameInput" } }) 
  </div>
</div>
<!-- 可自行添加Company等其他需要填充的字段，给对应输入框加唯一id即可 -->
<div class="table_row">
  <div class="table_cell" style="padding-bottom:5px;"> LastName: </div>
  <div class="table_cell" style="padding-bottom:5px;"> 
    @* 移除原有错误的Value绑定，给下拉框加唯一id *@
    @Html.DropDownListFor(m => m.head.LastName, selectList, new { @class = "form-control selectpicker", @id = "LastNameSelect" }) 
  </div>
</div>

<script>
  $(document).ready(function() {
    $('.selectpicker').selectpicker({
      liveSearch: true,
      showSubtext: true
    });

    // 监听bootstrap-select的选中事件
    $('#LastNameSelect').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
      var selectedLastName = $(this).val();
      if(!selectedLastName) return;
      
      // 请求后端接口获取关联数据
      $.get('?handler=GetAddressByLastName', { lastName: selectedLastName }, function(res) {
        if(res.success){
          // 填充对应字段，有其他字段按相同逻辑补充即可
          $('#FirstNameInput').val(res.data.firstName);
          // 示例：填充Company字段 $('#CompanyInput').val(res.data.company);
        }
      })
    });
  });
</script>

注意事项 #

• 如果返回的Adresse类属性名是帕斯卡命名，注意和前端取值的字段名保持一致，不匹配的话可以在后端返回Json时统一配置命名规则
• 如果需要选中精确匹配的LastName，可以把GetAdresses里的模糊查询like改成等值匹配=

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