ASP.NET Core MVC中Kendo多列下拉框无法获取DataValueField值求Bootstrap替代方案

我来帮你排查这个问题，同时也提供一个Bootstrap的替代实现方案，应该能解决你的需求！

一、修复Kendo控件的取值问题 #

先看你当前代码里的几个关键问题：

1. 参数名称不匹配 #

你的Kendo MultiColumnComboBox设置了.Name("tagItem")，这意味着表单提交时，选中的SearchId会以**tagItem**作为参数名传递到后台，但你的LinkToCase Action接收的是int SearchId参数——这就是为什么你拿不到值的核心原因！

你可以二选一修正：

• 方案A：修改Action的参数名，把SearchId改成tagItem：

  [HttpPost]
  public IActionResult LinkToCase(int tagItem, string updateInfo, string searchOptions, IFormCollection formItems)
  {
      Int32.TryParse(TempData.Peek("CaseId").ToString(), out int resultCaseId);
      // 这里用tagItem替代原来的SearchId
      POI newPoi = _context.Pois.SingleOrDefault(w => w.Id == tagItem); 
      newPoi.MISObjectId = resultCaseId;
      _context.Pois.Add(newPoi);
      // 后续提示和跳转代码不变
      _toast.AddSuccessToastMessage(
          $"You have linked {newPoi.FirstName} {newPoi.LastName} to case {resultCaseId:d8}");
      return RedirectToAction("Edit", new { id = resultCaseId });
  }
  

  （顺便提一句：你的Action里sesearchOptionsr是拼写错误，改成searchOptions才能正确接收下拉框的值）

• 方案B：修改Kendo控件的Name为SearchId，让参数名直接匹配：

  @(Html.Kendo().MultiColumnComboBox()
      .Name("SearchId") // 这里把tagItem改成SearchId
      .DataTextField("name")
      .DataValueField("SearchId")
      // 其他配置保持不变
  )
  

2. 确保控件值正确提交 #

如果上述修改后还是拿不到值，可能是Kendo控件没有把选中值同步到表单的提交数据里。可以在表单提交前手动获取选中值，通过隐藏字段传递：

$('form').submit(function() {
    var combo = $('#tagItem').data('kendoMultiColumnComboBox');
    var selectedValue = combo.value();
    // 动态添加隐藏字段，把值传给后台的SearchId参数
    $(this).append(`<input type="hidden" name="SearchId" value="${selectedValue}" />`);
});

3. 验证数据源字段 #

最后确认你的SearchQuery Action返回的SearchViewModel对象中，SearchId和name字段都正确赋值（和你GetSearchRecords方法的逻辑一致），确保控件能正确绑定值和显示文本。

二、Bootstrap替代实现方案 #

如果你想改用Bootstrap实现类似的多列下拉选择功能，这里有一个完整的实现思路：

1. 前端代码 #

添加隐藏字段存储选中的SearchId，并用Bootstrap组件构建多列下拉搜索：

<form asp-action="LinkToCase" method="post" asp-controller="MISObjects">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-success">
                <div class="card-header" style="background-color:#1e3f5a;color:white">
                    <h3 class="card-title">Search and Tag</h3>
                </div>
                <div class="card-body">
                    <div class="col-md-12">
                        <div class="input-group">
                            <!-- 修正下拉框重复的value值 -->
                            <select id="searchOptions" name="searchOptions" style="background-color: #1e3f5a; color: white; width: 140px; height: 45px">
                                <option value="1">Poi</option>
                                <option value="2">Vessel</option>
                            </select>
                            <!-- 自定义Bootstrap多列下拉 -->
                            <div class="input-group" style="width:80%">
                                <input type="text" id="searchInput" class="form-control" placeholder="Search contacts..." />
                                <button class="btn btn-primary" type="button" id="dropdownToggle" data-bs-toggle="dropdown">
                                    <i class="bi bi-chevron-down"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" style="max-height:400px; overflow-y:auto; min-width: 100%">
                                    <table class="table table-sm mb-0">
                                        <thead>
                                            <tr>
                                                <th>Contact Name</th>
                                                <th>Date Of Birth</th>
                                            </tr>
                                        </thead>
                                        <tbody id="searchResults">
                                            <!-- AJAX加载的结果会插入这里 -->
                                        </tbody>
                                    </table>
                                </ul>
                            </div>
                            <!-- 隐藏字段存储选中的SearchId -->
                            <input type="hidden" id="selectedSearchId" name="SearchId" value="" />
                            <button type="submit" class="btn-primary" value="Link To Case" style=" background-color:#1e3f5a;color:white">Link To Case</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

2. JavaScript逻辑 #

实现搜索联想和选中事件，把选中的SearchId存入隐藏字段：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 监听搜索输入，实时加载结果
    $('#searchInput').on('input', function() {
        var searchTerm = $(this).val().trim();
        var searchOption = $('#searchOptions').val();
        
        $.ajax({
            url: '@Url.Action("SearchQuery", "MISObjects")',
            type: 'GET',
            data: { 
                searchTerm: searchTerm,
                searchOption: searchOption
            },
            success: function(data) {
                var resultsContainer = $('#searchResults');
                resultsContainer.empty();
                
                if (data.length === 0) {
                    resultsContainer.append('<tr><td colspan="2" class="text-center">No results found</td></tr>');
                    return;
                }
                
                // 渲染多列结果
                data.forEach(item => {
                    var row = $('<tr class="dropdown-item cursor-pointer"></tr>');
                    row.append($('<td></td>').text(item.name));
                    row.append($('<td></td>').text(item.dob));
                    
                    // 选中行时更新输入框和隐藏字段
                    row.on('click', function() {
                        $('#searchInput').val(item.name);
                        $('#selectedSearchId').val(item.SearchId);
                        // 关闭下拉菜单
                        const dropdown = new bootstrap.Dropdown(document.getElementById('dropdownToggle'));
                        dropdown.hide();
                    });
                    
                    resultsContainer.append(row);
                });
            }
        });
    });

    // 页面加载时触发一次搜索，显示初始数据
    $(document).ready(function() {
        $('#searchInput').trigger('input');
    });
</script>

3. 后台代码调整 #

确保SearchQuery Action能接收搜索参数，并返回正确的结果列表：

public IActionResult SearchQuery(string searchTerm, int searchOption)
{
    var query = _context.Pois.Where(w => w.isActive == true && w.isDeleted == false);
    
    // 根据搜索选项过滤（如果需要区分Poi和Vessel，自行补充Vessel的逻辑）
    if (searchOption == 2) {
        // 这里替换成Vessel的查询逻辑
        // query = _context.Vessels.Where(...);
    }
    
    // 根据关键词过滤
    if (!string.IsNullOrEmpty(searchTerm)) {
        query = query.Where(p => 
            (p.FirstName + " " + p.LastName).Contains(searchTerm) ||
            p.ContactTitle.Contains(searchTerm) ||
            p.CompanyName.Contains(searchTerm) ||
            p.Country.Contains(searchTerm)
        );
    }
    
    var results = query.Select(person => new SearchViewModel {
        SearchId = person.Id,
        Name = person.FirstName + " " + person.LastName,
        DOB = person.DOB
    }).ToList();
    
    return Json(results);
}

这样修改后，你的LinkToCase Action就能正常接收到SearchId参数，完成数据关联的操作了。

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